Web Access Centre

ASCII text - Web Access Centre

Summary: ASCII text can be confusing for screen reader users if it is used for visual effect.


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:

Back to: Homepage > Good Design > Web Access Centre

This lets a screen reader user know that the Homepage is greater than the Good Design page which is in turn, greater than the Web Access Centre 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.

Website Accessibility Initiative compliance

  • 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.

Other pages about text

Back to Design & Build

For Web Access Centre updates email webaccess@rnib.org.uk

Content author: webaccess@rnib.org.uk

Last updated: 19/12/2008 13:18

More info

In your area

Quiz

UVA and UVB rays in sunlight do not contribute to eye diseases.




Your stories

JK Rowling's story - when JK Rowling had her website redesigned she asked design agency Lightmaker to push the boundaries of accessible Flash. The original site offered the user an intensely visual experience. The new site needed to keep the explorative and creative elements but present them in a universally accessible way. Find out about the key features of the site and how it was designed. JK Rowling's accessible Flash website - full story