How to Create Accessible Graphics

| page 1 | page 2 | page 3 | page 4 | page 5 | page 6 | page 7 | page 8 |

Images used for visual enhancements

The Web has become a graphical environment and often developers will add images to their pages simply to enhance the visual appeal of the site.  For example, this image is used to form part of a rounded border on a page. 

Images in this category do not provide any content to the user; they are simply used for decorative purposes.  These images have no value to someone who cannot see the page.  The proper HTML markup for this type of image is to add what is often referred to as an "empty" or "null" alt attribute, written as alt="".  That is alt equals quote quote, with no space in the middle.  The source for the image in this example would look like this:

<img src="graphics/cvcw_r01_c21.gif" width="84" height="90" alt=""> 

When a screen reader comes to the image it would look for an alt tag, find one and then read it. But in this case the alt attribute contains no content so it would read nothing and move on essentially skipping the graphic, which is exactly what we want. If the alt tag was not there, the screen reader might read a file name or some other text that could confuse the user.

Unfortunately, most HTML editors do not allow for the addition of empty alt attributes using the graphical interface so you must edit your HTML source code directly.  To do this, locate the image in the code and add alt="" to the image tag.

Transparent Images

Developers often use transparent images to create space between elements on a page. Although users with sight do not see these transparent images, they are still "visible" individuals using text browsers. You should add an empty alt attribute (alt="") to all transparent images.

| page 1 | page 2 | page 3 | page 4 | page 5 | page 6 | page 7 | page 8 |

Top of Page || Return to Tutorials List