The Standards
Section 508 Standards:
- Standard 1194.22, a “A text equivalent for every non-text element shall be provided (e.g., via “
alt”, “longdesc”, or in element content).” (Section508.gov)
WCAG 2.0 Guidelines:
- Guideline 1.1: “Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.” (W3C)
What do the Standards Mean?
Note: the terms alternative text, alt attribute, alt tag and alt text are used interchangeably when referring to adding a text equivalent to non-text content.
For content to be compliant, a text equivalent must be provided for all non-text content. Non-text content includes, but is not limited to, images, charts, maps, graphs, symbols, etc. Providing a text equivalent allows for the non-text content to be presented via auditory and tactile means, based on the needs of the user, in addition to also being rendered visually.
The overall principles for adding alternative text to images can also be applied other non-text content such as applets, embedded media, and plug-ins. When creating alternative text it is important to convey not only the content of the image but also the function, if applicable (e.g. image buttons, image maps, or image links).
When determining the appropriate alternative text, it is important to consider the content and function of an image. The alternative text for images can vary based on the context of the image itself. For images within a link, or functional images, the alternative text should describe the content and function of the image.
Alternative text can be conveyed through the use of an alt attribute associated with the img element or within the context of the image. Alt attributes should succinctly describe the content conveyed by the element, without being too verbose (for simple objects) or too vague (for detailed objects).
Some best practices for alt attributes are:
- Be accurate
- Be succinct when describing the content and function, if applicable, of the image
- Avoid redundancy between the alt attribute and the context of the image
- Avoid the use of phrase like “picture of…” or “image of…” when describing the image unless it is relevant content
To be accessible, all images must have an alt attribute even if that alt attribute is empty or null (e.g., alt=” ”). Decorative graphics are an example of images with null/empty alt attributes. These images do not convey information relevant to the content of the web page and are not links.
There are times when description may not be succinct enough to use an alt attribute AND a description does not appear in the content of the page. This is common for complex images such as charts, maps, and graphs. If adding a long description to the content of the page is not feasible then it is best to use the longdesc attribute. This attribute can be used in a couple of ways:
- The image can be a link to the long description page. Note: Alternative text should be provided for the image.
- A link can be added to the content of the page next to the image
As of September 2015, there is no visual indicator that a longdesc has been provided with an image. Until longdesc is better supported, the recommended best practice is to provide a standard link to a longer description along with the longdesc.
Although providing alternative text for images sounds simple, it is one of the most difficult standards to implement. Perhaps that’s why there are some many images on the web with missing, poor, or incorrect alternative text.
WebAIM provides some good examples on how to determine appropriate alternative text for images on their Alternative Text web page.