Bellevue College

Web Publishing Guide

Website Tips

There are lots of bright ideas out there. These will make your website better and your job easier.

light bulb

ASCII Art Accessibility

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.

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"