Creating Accessible Images

This tutorial is based on a much longer article Creating Accessible Images by the folks at WebAIM (Web Accessibility in Mind.)

Most people know that you need to provide alternative text for images to make your site accessible.  It is one of the easiest elements of a web page to check for (e.g. does the image have alt text or not?). If you try and validate your web page and you have NOT added alternative text for the image, your page will not validate.

Fig 1 -Screenshot of validation errors

If your images do not make use of the alt tag, then a blind person cannot access them.

Images that Enhance Comprehension

Graphics are NOT bad for accessibility. Graphics can benefit the accessibility of a web page by providing illustrations, icons, animations, or other visual cues that aid comprehension for sighted individuals. When designing your site, you need to think about making it accessible to folks with disabilities of ALL TYPES not just the blind. Graphics can be especially useful to individuals with certain reading disabilities, learning disabilities, attention deficit disorders, or cognitive disabilities.

Illustrations

The addition of illustrations will make some concepts more easily understood. A book on human anatomy would be a good example. Imagine trying to learn the muscles and bones of the human hand or foot without an illustration to go along with the text description. Example

Animations

Animations are rarely used to enhance the accessibility of web content. The majority of them are both annoying and distracting. One that seems to be very popular is the opening and closing mailbox as a link for sending email. Imagine an entire page full of these animated objects.

Some content may work better and be more understandable with both the text description and an animation of the description. An example of this might be a dance step.

Icons

Many computer programs use icons that either supplement or replace the text in the menu bars. How helpful these icons are will depend on the following:

• how well it is drawn
• how well it conveys the concept
• how well the target audience will understand the concept, and
• how well the icon focuses in on the idea that it is trying to convey.

If you are going to use icons, they need to be simple and easily understood and not everyone will view the icon with the same understanding. Icons can be useful BUT they are not absolutely necessary.

Video and Multimedia

Video and multimedia can also be used to enhance comprehension. You should provide text transcript (for the blind) and captions (for the deaf) if you are going to use videos on your site.

Color and Contrast

To keep your images accessible, do not use color alone to covey the meaning. This would no necessary be true of photos but may apply to maps and such. If they person viewing the site is color blind or has low vision, is the lack of color still going to make the image useable. Test your web pages to ensure that none of the meaning is lost when you remove the colors. 

Be careful when you choose background colors that they will not decrease the contrast level to the point of making text unreadable. This is especially true if you are using a patterned background. If you use a light background, use dark text. If the background is dark, use a light text.

There are tools that allow you to check both the color and contrast of your site.

Pixelation of Enlarged Images

Some graphics contain text as part of the image. Some users with low vision use programs that enlarge the elements on their screen so that they can more easily see them. The text can become pixelated so that it is difficult to read.  If you decide you must use graphical text rather than just plain text, you should try and follow these guidelines:

• make your font sizes as large as possible
• use simple block fonts when possible
• use good color contrast between the text and background

Creating Effective Alternative (alt)Text

Most folks are familiar with the alt text for the simple reason that when they try and validate their pages, they receive an error if no alt text is provided. Rather than a tag, alt is actually an attribute of the img tag.

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). ~ w3schools ~

Note: Internet Explorer (prior version 9) displays the value of the alt attribute as a tooltip, when mousing over the image. This is NOT the correct behavior, according to the HTML specification.

Guidelines for the alt text:

• The text should describe the image if the image contains information
• The text should explain where the link goes if the image is inside an  <a>element
• Use alt="" if the image is only for decoration  

The lack of alternative text for graphics and images is one of the biggest accessibility problems on the Web today.

Individuals who are blind often use screen readers or refreshable Braille devices that read the text on the page to them. When these assistive technologies come across images without alt text, they are unable to communicate their meaning.

Adding alt text to an image is easy.

If you are using Microsoft's Expression Web you double click on the image to bring up the Picture Properties dialog box. You then add the text alternative to the Alternate Text field under Accessibility.

 

NOTE: If you wish to use the title attribute which acts like a tool tip, you cannot do it from the Picture Properties dialog box in either Expression Web. You will need to add it in Code View. If the image is also a hyperlink, you can add the title attribute using the Edit Hyperlink dialog box and clicking the ScreenTip button.

How Images Are Used

The three main ways in which images are used on a web site are:

1. to convey important content (an example would be the screenshots used in this tutorial.)
2. to provide visual enhancements which offer no real content (an example of this would the the site logo at the top of the page.)
3. to link to other areas of the site (an example would be the images in the left sidebar.)

The most appropriate alt text communicates the purpose of the graphic, not its appearance.

 Alternative text for images should be as accurate but succinct. Your alt text should contain all of the important information regarding the purpose of your image but NOT be overly long. Decorative images should contain Null or empty alt text.

An empty alt attribute would look like this:

<img src="file-name.jpg" width="84" height="90" alt="">

Transparent and spacer images should also use an empty alt attribute.Transparent and spacer images should also use an empty alt attribute.

It is impossible to add alt text to background images, so you should put images in the background only if they do not convey any important content. An example of this type of image would be the spider web background at the top of this page.

When to Provide Long Descriptions

It may be difficult to describe complex images using short alternative text. In that case provide a brief description of the image in the alt attribute and then provide a longer description elsewhere. However, the longdesc attribute is so poorly supported that it should not be used. To offer a long description of an image, simply create a link (that is visible to anyone) to a page with the description.

 I would encourage each of you to read the longer more detailed article Creating Accessible Images by the folks at WebAIM (Web Accessibility in Mind.)