Web Accessibility Best Practices

Campus Information Technologies and Educational Services (CITES) and Disability Resources and Educational Services (DRES)

University of Illinois at Urbana/Champaign

Text Equivalent Markup Techniques

HTML was initially designed with some support for accessibility but the markup was not always well specified nor understood. Today, with better browser support and experience in practical web accessibility issues, developers can use markup that consistently improves every user's browsing experience. What follows is a description of the markup and how it should be used to provide text descriptions.

Cascading Style Sheets

Images that are used for styling purposes pose difficulties for many disabled users. CSS solves most of these difficulties by seperating styling graphics from the content of the web resource. Instead of providing text equivalents, styling images and their particular functions with respect to the web resource are made accessible by the information implicit in CSS markup.

Short Descriptions

ALT attribute

The ALT attribute is used to provide a short description of information the web author intends to convey with an image. ALT text is often recognized as the way to provide text equivalents by developers. This may be misleading because, while ALT text is a powerful tool, it is often inadiquate to describe rich visual information. Also, it is not always obvious what ALT text is appropriate.

In general, ALT text should be

Note that if an image is not intended to convey any information to the user, the most concise description is simply: alt=''.

The ALT attribute is required by the HTML 4.01 standard for IMG and AREA elements. It is optional for INPUT and APPLET elements.

TITLE attribute

The TITLE attribute may be added to most any element that might need a title. It is useful to include this for certain IMG elements because most modern graphical browsers will display this as a "tooltip" when the user hovers the mouse over the image. Just as ALT text may serve to identify the target content of a link to improve a user's non-graphical browsing efficiency, TITLE text may improve a user's graphical experience. It is important to note that TITLE is also required for accessible HTML lists.

Long Descriptions

Long descriptions are needed for accessible resources when there is visual or audio content that cannot be conveyed in short description markup. While there is some specialized markup that is intended to separate the long descriptions from the main body of content, there are issues with its support and use in the real world. In fact, it is better to include long descriptions in the main body of content. The information is then accessible independent of user technologies. Redundant information in different forms is helpful to those with different styles of learning.

LONGDESC attribute

The LONGDESC attribute provides a link to a long text description for IMG and FRAME/IFRAME. This is required when image content cannot be described by short ALT text, e.g. a graph of yearly sales. LONGDESC should only be used to provide information from the image that is obvious. Other, non-obvious information should be included in the source document (e.g. names of unknown people in a photograph).

D-Link (deprecated)

The D-Link is a deprecated workaround that provides access to a LONGDESC resource when the browser does not natively support it. It is implemented as the letter "D" at the bottom-right corner of an image, linked to the LONGDESC resource. The link should set the TITLE attribute to indicate the link is a long description of some image. Instead of a D-Link, include the relevant information in the source document.

Example of a D-Link (deprecated): Rembrandt's painting of Supper at Emmaus D

<img src="images/image-longdesc-001.jpg" width="105" height="100"

  alt="Rembrandt's painting of Supper at Emmaus"

  longdesc="images/image-longdesc-001.html">



<a href="images/image-longdesc-001.html"

  title="Long Description of Rembrandt's 'Supper at Emmaus'">D</a>