Requirement • Explanation • Tutorial
Section 508 Requirement
A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
Always provide a text equivalent for any information you present with photos or graphics. This alternative text is identified in ALT tags in the HTML of Web pages. ALT tags assist with accessibility and usability of a Web site because they can be...
- Read by visitors who roll their mouse over the graphic
- Read aloud by screen readers for the visually impaired visitor
- Displayed for users of handheld devices and text-only browsers
When writing ALT tags, write them as though you are a sighted user describing the image to a blind person. What would you say? Be sure to use text that describes the content and/or function of the image rather than text that simply describes the image itself. For example, if an image serves a graphical and navigational purpose (ex. an icon that links the visitor to another page), state that in the ALT tag. See the examples below.
- Use short and clear alternative text for every image that carries information.
- Use ALT="" for images that do not convey important information or are redundant.
- For images that carry more information than is appropriate for ALT text, use the longdesc attribute.
A good rule of thumb to remember is that if the ALT tag is 125 characters or more in length, use the long description attribute for your image. "The 'longdesc' attribute allows authors to link to a separate page in which the image is described in detail. This is particularly useful for complex images such as graphs and charts".
Examples: To view the ALT tags for the images below, place your mouse pointer on each graphic.
|Image clicked to perform an action
||Image used as a graphic only
Sample HTML code for an image with the alternative text bolded:
<img src="../images/winthropedu.gif" width="505" height="68"
alt="Winthrop University logo link to home page">
To add an ALT attribute to an image using FrontPage:
1. Right-click on the picture.
2. Select the "Picture Properties" menu option.
3. Type a description of the image into the text field on the "Picture Properties" dialog box.
4. Select the OK button.
For your convenience, you may also wish to download a printer-friendly Section 508 checklist (pdf).
For additional assistance with this requirement, send an email to firstname.lastname@example.org.