ASCII Art Accessibility

Previous All tips Next

First, ASCII art is a graphical image composed of text. Since ASCII art is made up of text, a text reader will get confused if it tries to read the graphic. There are two easy ways to make ASCII art more accessible.

1. Substitute ASCII art for text

Most of the time you can just replace the ASCII art with plain text.

For example:

;-) could be replaced with <wink>

--> could be replaced with the word "therefore"

gr8 could be replaced with the word "great"

Skip over ASCII art

If you cannot substitute the ASCII art, you should provide a method to skip over it and give a text description of the art.

Example:

skip over ASCII art

                         __ <`-,-,_,-,
                         \_;>   ^  _<---'
                            )  _,-'
                           /  /
__                       ,'  /
)_\                  _,-'   /
   \_   _,-_-,_  _,-'      /
     \_/\,_ `  `'          \
      /\,_ `               |
      |\,_` )     ,        <
       \\_`/,_,_ _\,_  _/ _/
       |\_/\,_| `   )=| |=(
      /\_/  \_|     \-| |-/
      \ )   < )     < / \ >
       \\    \\      \| |/
        \\_   \\_    /| |\_
    mik ),_\   )_\  /_(  )_\

Image of a Giraffe

HTML before the ASCII art:

<a href="#artdesc">skip over ASCII art</a>

HTML after ASCII art:

<a name="artdesc">description of art</a>

note: skip over links can be hidden from the visual user by placing them inside an invisible gif with the alt attribute "skip over ASCII art" example:

<a href="#artdesc"><img src="images/spacer.gif"
width="2" height="2" border="0" alt="skip 
over ASCII art"></a>

Also, if you wanted to avoid writing the description of the ASCII image, you can replace that text with an invisible gif with the "alt" attribute "image of a giraffe"