Accessible Images

Most people know that you need to provide alternative text for images. There is much more to the accessibility of an image than just its alt text. There are many additional accessibility principles and techniques regarding images.

Important

Also see our article on alternative text for additional information about image alternatives and long descriptions.

Images Can Enhance Comprehension

Some people wrongly assume that images are bad for accessibility, since alt text essentially replaces the image with a text-only version of that image. The logical extension of that thought is that text-only sites are ideal for accessibility. The problem with this logic, though, is that it is based upon the needs of people with only one type of disability: blindness. Those with other disabilities, or with no disabilities at all, can benefit from images while screen reader users are presented with alternative text.

Illustrations, Maps, etc.

Many concepts are communicated more effectively with the addition of illustrations, maps, charts, etc. Imagine trying to learn human anatomy from a book (or web site) with no illustrations. How effective would it be? Here is an example of an illustration of the muscles in the hand.

Medical illustration of the muscles in the hand

You will probably find it hard to imagine that a text description alone could be as understandable as text supplemented by illustrations. In this case, a picture is worth 10,000 words, at least. Illustrations, maps, charts, etc. can enhance comprehension, especially for those with learning disabilities or reading disorders.

Animations

Animations are rarely used to enhance the accessibility of web content. Most of the time they are simply annoying and distracting. Banner ads often animate to distract us from the main purpose of a web page.

Well designed animations can, however, be used to enhance content by presenting media content or by focusing attention on important content. An animated graphic may present a sequence of images that convey content that cannot adequately be presented to one static image. Highlighting or other animations can focus the user on important informations, such as error messages or required inputs. If you activate one of the "Article Contents" links at the top of this page, you'll note that an animation helps provide visual focus onto the target content area.

Note

Animation should almost always be user controlled or very short in duration. Images that continually animate can cause the rest of the page to be more difficult, or for users with very high levels of distractibility, totally inaccessible.

WCAG 2.0 Success Criterion 2.2.2 (Level A) requires that automatically moving, blinking, or scrolling content that lasts longer than 5 seconds can be paused, stopped, or hidden by the user.

Icons

icons for 'back', 'forward', 'stop loading page', 'refresh page', and 'home' in Internet ExplorerMany web pages and, particularly, web applications use icons to supplement or replace the text. Complex content and functions, such as clicking the home icon in a browser to go to your home page, can easily be conveyed through a very small icon. Icons need to be simple, and they need to be easily understood. Icons almost always require familiarity in order to be useful. Across cultures and languages, icons can be misinterpreted quite easily.

If you use icons, take care to ensure that the icons are well designed, easy-to-understand, and used consistently. In many cases, text may be necessary instead of or in addition to unclear or potentially ambiguous icons.

Color and Contrast

As with text, color must not be used as the sole means of conveying meaning or content. What does it mean to convey meaning with color alone within images? Let's take a look at this map of the London Underground:

Map of color-coded underground subway routes.

A person who can see colors will have no trouble distinguishing between the red line, the dark blue line, the light blue line, and so on. A person who cannot see color well, due to color-blindness or low vision, will probably not be able to distinguish the different routes as easily. Remember, some users may override your page colors to a high contrast color combination they require. Someone who is blind will not be able to see them at all. Let's take the colors away from this image:

Black and white version of a color-coded map of underground routes

When color is removed, the map becomes almost unusable. Test your web pages to ensure that none of the meaning is lost when you remove the colors, even within images. You can do this by printing out the page on a black and white printer, making sure that your printing preferences are set to print background colors. There are also tools, such as Vischeck, which will remove all page color or that will simulate color-blindness.

In addition to color reliance, images that convey text must present that text with sufficient contrast. Text contrast within images is particularly important if the image is of low quality or when the image is enlarged.

Note

WCAG 2.0 sets minimal contrast thresholds for text and images of text. Testing of contrast values within images can be more difficult (there is typically not a defined RGB color value to easily access), but common sense can usually tell you if an image has insufficient contrast.

Pixelation of Enlarged Images

Some users with low vision use programs that enlarge the elements on their screen so that they can more easily see them. When images are enlarged, they can become pixelated and more difficult to read. Let's look at an example:

pixelated image that says 'University' but is difficult to read

The graphic was enlarged to 500% its normal size. You can see that the text is difficult to read. If real text had been used, it would have been much easier to read, as in the example below:

University

So does this mean you shouldn't use text in your graphics? Not necessarily, though true text should be used when practicable.

Note

WCAG 2.0 Success Criterion 1.4.5 (Level AA) requires that if the same visual presentation can be made using text alone, an image is not used to present that text. There are many benefits to using true text instead of images (lower bandwidth, translation, easier authoring, etc.), but the primary reason is that true text can easily be enlarged without any pixelization or degradation of the image quality. Of note, is that logos are exempted from the WCAG requirement.

Fortunately, modern browsers do a much better job of enlarging graphical content than in years past. And with CSS (and especially CSS3), it is easier to style true text to achieve the desired visual presentation. Consider the readability of text within image, and if practical to do so, use true text instead.

Graphics That Cause Seizures

Important

Bright, strobing images or media can cause photoepileptic seizures. Seizures can be dangerous, even life-threatening. Don't be responsible for causing them.

In order to potentially cause a seizure by users with photosensitive epilepsy, a flashing image or multimedia must:

  1. Flash more than 3 times per second (note that Section 508 specifies 2 times per second).
  2. Be sufficiently large. A very small flashing image, such as a cursor, will not cause a seizure.
  3. Bright. There must be significant contrast between the flashes

Additionally, the color red is also more likely to cause a seizure. While large, flashing images are not commonplace on the web. Seizure-inducing media is, however, becoming more common in web video, especially HD-quality video that includes strobing special effects. Such media must be avoided!

Note

WCAG 2.0 Success Criterion 2.3.1 (Level A) provides thresholds for frequency, size, contrast, and color of strobing images.