Begin site navigation:
End site navigation.
Large, expanded keyboard. Accessible pages do not mean that your pages can't have any images or rich media. On the contrary, informative and illustrative images can greatly enhance the accessibility of your pages for most users, and especially for those who have learning, reading or cognitive disabilities.
Images can be used to enhance the aesthetic design of a Web site, as illustrative aids, as photographs of people and events, as helpful icons, as charts and graphs, as maps, and for a variety of other uses. However, for a number of reasons, it is important to put some thought into what images you display, and how you decide to use them on your pages.
Images cannot be viewed by users of screen readers, those who use screen magnification tools, foreign language translation applications, and some hand-held devices. Some users also prefer to disable image loading, especially those who have slower Internet connections.
The proper use of the ALT attribute can help make the content of your images accessible to viewers who can't see your graphics. The alternative text is spoken by a screen reader and displayed by browsers when image loading is disabled. It is also displayed briefly when a mouse or other pointing device is placed on the graphic, which can be helpful to users with cognitive, reading or learning disabilities.
When displaying complex or intricate images as maps, charts and graphs, it is a good practice to also present an equivalent textual representation of the image. It is also necessary to ensure that the text and meaning of the image is discernable in different contrast and color settings, including monochrome displays. Color should never be used as the only means for conveying information.
Animated images or rich media should always be used carefully since some visual effects that flicker or produce a strobe-like effect may cause seizures in certain individuals.
A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content) [Section 508, Part 1194.22, Paragraph (a)]
Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. [Section 508, Part 1194.22, Paragraph (c)]
Redundant text links shall be provided for each active region of a server-side image map. [Section 508, Part 1194.22, Paragraph (e)]
Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. [Section 508, Part 1194.22, Paragraph (f)]
Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. [Section 508, Part 1194.22, Paragraph (j)]
Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. [W3C WCAG 1.0, Checkpoint 1.1 Priority 1]
When an appropriate markup language exists, use markup rather than images to convey information. [W3C WCAG 1.0, Checkpoint 3.1, Priority 2]
Include alternative text for all images. The most appropriate ALT text communicates the purpose of the image, not its appearance. Alternative text should be succinct, and generally no more than a few words or short sentences. Provide a longer summary or description for complex or intricate graphics, preferably within the body of the page.
See the techniques below for specific types of images:
All <IMG> tags must include an ALT attribute that contains a brief, interpretive text description.
Technique:
<img src="contact.gif" alt="Contact Us">
Include an ALT attribute that descriptively represents the image, depending on its use within the context of the page.
Technique:
<img src="photo.jpg" alt="Photo: As the sun sets over Waikiki beach, the Royal Hawaiian Hotel
glows a deep pink. Lit torches and beachcombers can be seen as darkened silhouettes in the forefront
of the scene.">
<img src="photo.jpg" alt="Photo: Patches of snow cover Mount Gilpan and ridges of Mount Sneffels
in the San Juan mountain range. Photographer: David Muench.">
<img src="photo.jpg" alt="Photo of David Muench.">
Non-essential page and design elements like graphic spacers should include an empty or null ALT attribute in the <IMG> element. Images used as bullets should include an asterisk, the word "Item:" as the ALT text, or a similar identifier.
Technique:
<img src ="spacer.gif" alt=" ">
<img src ="bullet.gif" alt="Item:">
<img src ="bullet.gif" alt="*">
<img src ="bullet.gif" alt="-">
<img src ="bullet3.gif" alt="3">
If you have an animated image on your Web page, provide a description of the actions and appearance of the animation to give users with images not displaying the same experience. For usability reasons, animations should not be used if they are strictly for graphic embellishment and do not provide any real content.
Technique:
<img src="fish.gif" alt="A green animated cartoon fish swimming up and down the right side of the image boundary.">
The World Wide Web Consortium's guidelines recommend that you provide descriptive titles for all images used as links. The TITLE attribute should be used as part of the <A> element to clearly and accurately describe the target of the link.
Technique:
<a href="feedback.html" title="Send us feedback about our site">
<img src="feedback.gif" alt="Feedback"></a>
In some instances, an image is too complex to describe in a few words. Maps, charts and graphs are primary examples of such images. There are several ways of providing a long description for images, but the following two methods are most universally preferred:
By putting the long description right in the context of the document where the graphic occurs, you
are serving everybody, not just those with disabilities. Everyone will be able to read the long
description and benefit from it.
The LONGDESC attribute is not well supported in most browsers, and is not a recommended technique.
Technique:
The above bar graph shows the population of chimps in different Asian countries. The estimated number
of chimps in each country are as follows:
Image maps are graphics on a web page that have hyperlinks embedded within them. The hyperlinks
become "hotspots" or shapes within the graphic that are clickable. They are commonly used for Web
site navigation purposes.
All image maps should include ALT tags for each hotspot. To assist users who have difficulty with
fine motor movements, design image maps that don't require extremely precise mouse positioning.
Provide redundant text hyperlinks for each image map. The text may be appear in small text and is
often placed at the bottom of the page. Redundant text links should be provided on every web page
that contains an image map.
Technique:
<map name="top-banner">
<area shape="rect" ALT="Events" href="events.html" coords="36,59 107,85">
<area shape="rect" ALT="About Us" href="aboutus.html" coords="108,59 185,85">
<area shape="rect" ALT="Contact Us" href="contact.html" coords="186,59 240,86">
</map>
