For most of us it would be hard to understand the web without images, audio, video and new interactive media. However, much of that information needs to be conveyed in an alternate format.
The following points will improve the accessibility of your images:
- Provide alt attributes for every image.
- Every image placed in HTML must have an
altattribute which contains a concise, appropriate alternative. WebAIM's Appropriate Use of Alternative Text explains how to use the
altattribute in a variety of contexts.
- For linked images, the
alttext should describe the destination of the link.
- For decorative images, the
alttext should be null (alt=””) or empty (alt=” “), which lets assistive technology know that the image can safely be ignored. Alternatively, these images can be presented as CSS background images.
- To determine whether the image is important enough to contain a description, imagine reading the page to someone over the telephone. If the image is important enough to include in the telephone conversation, it needs a description. To create a useful description, imagine what you would need to say during the telephone conversation.
- If the image is a graph or diagram, the
alttext should be a concise description of the content (e.g., “Sales figures for June 2009”), accompanied by a longer description or alternative displayed adjacent to the image or provided on a separate but clearly linked page.
- For images of text, the
alttext should duplicate the text within the image.
- For linked images, the
- Include links to longer descriptions
- Descriptions that are more than 125 characters should include a link, rather than the
longdescis poorly interpreted in many browsers and is deprecated in HTML5. Learn more about longer description techniques on WebAIM's Longdesc article.
- Avoid using CSS to display images that contain content information
- Instead, include an appropriate description as part of the content, and set
background-imageto display that data to sighted users. If you cannot include an appropriate description as part of the content, use the
imgelement with appropriate
- Ensure text contrast is maintained if a background image is not displayed
- Specify a background colour in addition to the background image to avoid text becoming unreadable if the background image is not displayed for any reason.
- Use images to enhance understanding
- Helpful for those who may have difficulty understanding text by itself, including users whose main language is not the same as the site language. A question mark icon, for example, could be added next to the word “Help”.
- Combine adjacent image and text links
- Reduce the link repetition for for screen reader users.
- Ensure the image alt and link text make sense when read together
- A good test is reading them out loud. Leave the image
altnull if the alt text would otherwise duplicate the adjacent link text. A link to a downloadable document could be written as
<a href="url">Annual Report 2009 (<img src="pdf.jpg" alt="PDF" /> 400kB)</a>or an e-mail link could be written as
<a href="mailto:address"><img src="email.jpg" alt="" />email us</a>.
Audio, Video, and Interactive Media
Keep in mind that your media will be accessed by keyboard-only users, mouse-only users, screenreading users, and many others. The following points will improve the accessibility of your media:
- Don't set media to
- Content that automatically plays will likely interfere with screenreading users hearing the rest of the site. Additionally, impaired users may be performing another task on your site -- don't assume they're always ready to experience your audio, video, and interactive media
- Include content-specific controls
- Accessible methods to adjust volume, pause/stop, and start content are helpful for everyone. While HTML5 does have included audio and video controls, many assistive technologies don't currently interpret these controls, so when possible, include controls outside of the actual media content.
- Provide a textual transcript or description near the media
- As with images, imagine describing this media to someone on the telephone. A transcript is best, and a description is helpful. Display a textual description and/or other media alternative of live content, and provide a full description once the event is complete.
- Clearly identify media and alternatives
- When displaying a textual or other media alternative, make sure the alternative is clearly associated with the media.
- Display captions on video content
- Captions may be open (always-on) or closed.
- Include relevant links and descriptions to required software
- Ensure that visitors can experience your media by saying, for example, "You need to install Adobe Flash to experience this audio slideshow."
- Special Considerations for Flash
- For Flash accessibility issues, assistive support, and screen reading techniques, read WebAIM's Flash article.