Rationale
ASCII text (American Standard Code for Information Interchange) is the use of punctuation and other text characters purely on the basis of their visual appearance. While this is useful for sighted users it can cause problems for some screen reader users as text will be read out as its literal meaning.
Common examples of this include linked "greater than" characters (>) instead of "Next" buttons or text links, and "less than" characters (<) for previous buttons or text links. While visually it is clear the meaning is "Next" or "Previous", audibly, i.e. to a screen reader user, it is not as "greater than" or "less than" is read out which does not make sense. As such we recommend avoiding the use of ASCII text for these types of links.
However, some use of these symbols can be beneficial by adding structure or separating information. For example, a "greater than" (>) symbol is frequently used to separate items in a breadcrumb trail, where a screen reader will (correctly) read it as "greater" or "greater than".
Using the breadcrumb trail at the top of this page as an example, it reads:
You are here:
Home >
Professionals >
Web accessibility >
Design and build >
Text
This lets a screen reader user know that the Home is greater than the Professionals page which is greater than the Web accessibility page which, in turn, is greater than the design and build page and gives the user additional information about the structure of the site, and where they are in relation to that structure.
A final, increasingly less common use or ASCII text is to create art on pages ie a picture made up of carefully arranged text characters. As all the components of the image is ASCII text each one would be read out by a screen reader which could take forever! Skip links should be provided.
Techniques
-
Link text should not rely on ASCII art to convey the meaning ie ">" for next. This includes using it as the only text in an ALT attribute.
-
Minimise use of ASCII text in links and in text for example a text link of "Next >>" can be read out as "Next greater than, greater than". It is a less cluttered experience for a screen reader user to hear "Next" rather than "Next greater than, greater than".
-
Avoid ASCII art as images; use an image with appropriate ALT text.
-
Provide a "skip" link before ASCII art and anchor it to a point on a page after the art. Screen reader users can then bypass the ASCII art and avoid listening to streams of meaningless characters.
Testing tips
Check links, content and ALT text for appropriate or inappropriate use of ASCII text.
-
Browser - manually scan the page for ASCII text.
-
Screen reader - Listen to pages to check for any unnecessary or confusing ASCII text.
Compliance with WCAG 1.0
-
1.1 Provide a text equivalent for every non-text element (eg via "alt", "longdesc", or in element content).
-
3.1 When an appropriate markup language exists, use markup rather than images to convey information.
-
13.1 Provide a means to skip over multi-line ASCII art.
For more information on techniques visit the
Web Accessibility Initiative techniques page.