5

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.

6
  • Where are you adding the ASCII art, and why? Can you show us a screen shot of the ASCII art?
    – user764357
    Mar 27, 2014 at 0:43
  • Can you just give the element an aria-label describing the ascii art? Mar 27, 2014 at 1:06
  • hmm actually I can see in deque.com/blog/text-links-practices-screen-readers that some screen readers would read the text as well as the aria-label, at least if it was an anchor tag. Mar 27, 2014 at 1:10
  • 1
    why would you ever want to use text as background? the background should be a simple image,at most.
    – mpm
    Mar 27, 2014 at 4:10
  • 3
    Because freakin' ASCII art, man.
    – BoltClock
    Mar 27, 2014 at 6:02

2 Answers 2

6

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>
0
3

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.

3
  • 2
    My concerns that implementing this with hidden as true is that the elements are actually visible and perceivable for people using regular browsers. Read the note, this is for hiding things that aren't hidden by display:none, but shouldn't be visible.
    – Bjorn
    Mar 27, 2014 at 12:53
  • 1
    Browsers don't use WAI-ARIA to style elements. Setting aria-hidden="true" on an element doesn't make it not rendered on the page. It makes it hidden to the assistive technology users. Check my answer on how ARIA is used.
    – katranci
    Mar 27, 2014 at 14:31
  • 1
    I guess this is the answer, but it goes against the spec for how it should be used. Thanks!
    – Bjorn
    Mar 27, 2014 at 15:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.