Managing images and media for accessibility

Last updated June 16, 2012. Created by Jeff Burnz on May 16, 2009.
Edited by aparkening, LeeHunter, Tor Arne Thune, ronald_istos. Log in to edit this page.

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.

1. Images
2. Audio, Video, and Interactive Media

Images

The following points will improve the accessibility of your images:

Provide alt attributes for every image.

Every image placed in HTML must have an alt attribute which contains a concise, appropriate alternative. WebAIM's Appropriate Use of Alternative Text explains how to use the alt attribute in a variety of contexts.

• For linked images, the alt text should describe the destination of the link.
• For decorative images, the alt text 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 alt text 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 alt text should duplicate the text within the image.

Include links to longer descriptions

Descriptions that are more than 125 characters should include a link, rather than the longdesc attribute. longdesc is 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-image to display that data to sighted users. If you cannot include an appropriate description as part of the content, use the img element with appropriate alt attribute.

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 alt null 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 autoplay

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.