6

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.

Bjorn
  • 69,215
  • 39
  • 136
  • 164
  • Where are you adding the ASCII art, and why? Can you show us a screen shot of the ASCII art? –  Mar 27 '14 at 00:43
  • Can you just give the element an aria-label describing the ascii art? – Damon Smith Mar 27 '14 at 01:06
  • hmm actually I can see in http://www.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. – Damon Smith Mar 27 '14 at 01:10
  • 1
    why would you ever want to use text as background? the background should be a simple image,at most. – mpm Mar 27 '14 at 04:10
  • 4
    Because freakin' ASCII art, man. – BoltClock Mar 27 '14 at 06:02
  • Well the ACII thing doesn't really matter, I just don't want it to be visible to screen readers, but just regular browsers, how do I do that? – Bjorn Mar 27 '14 at 12:55

2 Answers2

8

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>
Hugh Guiney
  • 1,309
  • 2
  • 19
  • 34
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.

katranci
  • 2,551
  • 19
  • 24
  • 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 '14 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](http://stackoverflow.com/questions/22367234/actual-effect-of-using-wai-aria/22406547#22406547). – katranci Mar 27 '14 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 '14 at 15:19