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? w3.org/TR/WCAG20-TECH…

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 :-) scottohara.me/blog/2019/01/2…

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.