Frage

We are adding some cute ASCII art on our web site. We're worried that it might cause problems for screen readers so I was thinking about adding aria-hidden="true" or role="presentation" so screen readers don't see the ASCII art. Is this the right approach? I don't have a screen reader to test with and it looks like maybe aria-hidden or role don't completely hide content.

It looks like this:

ascii art

I could do it as an image, but it would be cool to do it as actual text, that is not selectable via CSS. It feels weird to me to do characters as an image anyway.

War es hilfreich?

Lösung

The correct role to use is img with aria-label or aria-laelledby. Here’s an example from the HTML Living Standard:

These features can be used to make accessibility tools render content to their users in more useful ways. For example, ASCII art, which is really an image, appears to be text, and in the absence of appropriate annotations would end up being rendered by screen readers as a very painful reading of lots of punctuation. Using the features described in this section, one can instead make the ATs skip the ASCII art and just read the caption:

<figure role="img" aria-labelledby="fish-caption"> 
 <pre>
 o           .'`/
     '      /  (
   O    .-'` ` `'-._      .')
      _/ (o)        '.  .' /
      )       )))     ><  <
      `\  |_\      _.’  ‘. \
        ‘-._  _ .-’       ‘.)
    jgs     `\__\
 </pre>
 <figcaption id="fish-caption">
  Joan G. Stark, “<cite>fish</cite>“.
  October 1997. ASCII on electrons. 28×8.
 </figcaption>
</figure>

Andere Tipps

The WAI-ARIA Spec gives the definition of hidden as follows:

Indicates that the element is not visible or perceivable to any user. An element is only considered hidden in the DOM if it or one of its ancestor elements has the aria-hidden attribute set to true.

So, in your case just apply aria-hidden to the element that is containing the ascii-art and that would be satisfactory.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top