§1194.22(a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

Checkpoint
Does the page contain graphics or images?

Explanation
This checkpoint is concerned with graphical images and photos that are placed on a web page with the <img> tag.

Checkpoint
Do the <img> tags contain the proper alt attribute values that reflect their purposes?

Explanation
Every image positioned on a site is done so with the <img> tag that requires an alt attribute.

Guidelines
For each <img> tag, add an alt attribute that describes the image or photo.

If the images are decorative only, or if the graphic or image is used only for layout (e.g. a border within a table cell), the <img> tag may contain an empty alt attribute to reduce the amount of needless narrative those who require assistive technology will hear. NOTE: some User Agents and assistive technologies prefer that empty alt attributes contain a blank space (e.g. <img src="movingborder.gif" alt=" ">), while others prefer that it contain no space whatsoever (e.g. <img src="movingborder.gif" alt="">). However, technical trends seem to indicate that the latter example will be the accepted standard.

If the image is used as a link, the alt attribute description should, at the very least, list the same destination as displayed on the image button itself. If the button contains a picture or other wordless icon, the alt attribute must tell exactly where the link goes. The alt attribute also provides the developer an opportunity to give more detailed information about the link's destination.

Is the image related to nearby content? A photo or graphical image that complements content should be placed as close to that content as possible.

… content …
<img src="photo.gif" align="right" alt="This photo shows…">
… content …

In this example, using the <img> tag's align attribute allows the developer to place a photo to one side of the page so that its related content will be displayed around it. Keep in mind that assistive technology will read aloud the alt attribute based on where the <img> tag is positioned within the source code, regardless of how the page is rendered by the user agent (e.g. web browser), so placing the <img> tag between two sentences of the same paragraph will satisfy this concern.

If the image contains data or content, The <img> tag's alt attribute must describe all the information that is being conveyed in the image. Since most descriptions of data will exceed one sentence, follow the longdesc attribute / 'D' link guidelines in the next checkpoint.

Checkpoint
Is the alt description longer than one sentence?

Explanation
Many images, especially action photos or images that contain data charts or graphs, will require somewhat lengthy description. Not all assistive technologies can read aloud alt attributes longer than a few dozen words. Additionally, not all user agents can accommodate an alt attribute longer than a few dozen words.

Guidelines
The 'D' link method: create a link, using the letter 'D' as the hyperlink, that leads to a detailed description of the information conveyed by the graphic image or photo. Make sure that the 'D' link is positioned next to or directly underneath the image, so that assistive technology will announce it immediately after it announces the image.

<img src="salesgraph.gif" alt="sales chart for the 3rd quarter">
<a href="salesgraph.html" title="Read detailed information about the sales for the 3rd quarter">D</a>

Including the title attribute within the <a href> tag will inform both sighted and assistive technology users of the 'D' link's intent.

The longdesc attribute method: in addition to including a brief description for a graphic image or photo, also include the longdesc attribute and a link to a more detailed description.

<img src="salesgraph.gif" longdesc="salesgraph.html" alt="sales chart for the 3rd quarter">

NOTE: there is not much---if any---support for the longdesc attribute by current user agents and assistive technologies, although that is expected to change. In fact, it is a good idea to incorporating both the longdesc attribute and the 'D' link, and requires minimal work. Of course, be mindful that both the longdesc attribute and the 'D' link point to the same file.

Detailed descriptions of the information conveyed by the graphic image or photo can also be included as regular page content that is positioned in direct relation to the animation image.