Making ASCII art accessible

Written on

According to the w3c recommendation, there is a nice and simple way to make ASCII art accesible rather than a garbled mess of punctuation.

In this fishy example provided in the HTML-ARIA recommendation document, W3C have put the art inside a figure element with a figcaption, but you don't have to do this, as long as you have accurately described your ASCII art with an aria-label and added the role="img" onto the pre or code element, this is enough to make it work accessibly!

This will work any type of text based art, nopt just ASCII, it's easy to add and means that everyone can enjoy your .

Using this method, this is what the ASCII art fishy will look like to assistive technologies, such as screen readers:

A screenshot of the accessibility tree, showing the image labelled as 'Cute ASCII Fish with bubbles coming out of it's mouth'

Copy the code below, add your art, and change the aria-label and you will have made your website more accessible!

<pre role="img" aria-label="Cute ASCII Fish with bubbles coming out of it's mouth">
o           .'`/
    '      /  (
  O    .-'` ` `'-._      .')
      _/ (o)        '.  .' /
      )       )))     ><  <
      `\  |_\      _.'  '. \
        '-._  _ .-'       '.)
    jgs     `\__\
</pre>

Happy ASCII arting!