See the entire conversation

People who know more about accessibility than I do (looking at you, @sundress @cookiecrook @ZoeBijl @handcoding): Is this still the best practice re: ASCII art?…
11 replies and sub-replies as of Oct 02 2020

Currently I have <figure><pre>ASCII art</pre><figcaption>Description of the ascii art for everybody, including those using AT</figcaption></figure> Maybe I should I aria-hidden="true" to the <pre>?
Should I add a skip link to the <figcaption> before the <pre>? If so, what's the best practice for hiding the skip link from non-AT users?
I would use a role="img" on the <pre> and then use aria-label to add an alternative text. That way the whole <pre> should be interpreted as an image with the label as an alternative text.
Since the <pre> is already in a <figure> that has a <figcaption>, is aria-label actually necessary? If so, why?
The alt text for the image probably is not always the same as the figcaption and there are weirdnesses around figure/figcaption, so I don’t really trust it :-)…
In this particular case, the figcaption literally is exactly what I would have written for alt text.
In that case not using aria-label seems fine. :-)
Images with no accessible name are generally ignored by screen readers, so the figcaption would be a caption for nothing
Good point. I would probably expect aria-label="ASCII art"…
Ideally SRs would announce the presence of an image in a <figure> even when it does not have an accname, but currently this is not the case AFAIK
Re the skip link: Not necessary since there's no focusable content in the Ascii art & the aria-hidden or role="img"already hides it from screen readers. When you do use a skip link, best practice is to use .skip:not(:focus) to apply a 0px clip rectangle or almost 0 opacity.