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.
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
- Equivalent to the information/content that the image is intended to convey
- Included in all IMG and AREA elements
Note that if an image is not intended to convey any information to the user, the most concise description is simply: alt=''.
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 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.
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).
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): D
alt="Rembrandt's painting of Supper at Emmaus"
title="Long Description of Rembrandt's 'Supper at Emmaus'">D</a>