Creating Accessible Images
Creating Effective Alternative (
- Page 1: Images Introduction
- Page 2: Images that Enhance Comprehension
- Page 3: Color and Contrast
- Page 4: Text Within Graphics
- Page 5: Graphics That Cause Seizures
- Current page: Page 6: Creating Effective Alternative (
- Page 7: Long Descriptions
Most people are at least somewhat familiar with
By the way, there is no such thing as an
alt tag, though
people often refer to
alt text by this name. To be technically
correct, it is the
alt attribute of the
Its name is not as important as its function, though, so
let's take a look at what it means to have effective
- Ensure that the text alternatives communicate the purpose of the graphic accurately and succinctly.
- Provide empty or null
alttext for graphics which do not convey content.
alttext for both the main image and the hot spots of image maps.
- Do not repeat the
alttext of an image in the adjacent text.
- Do not put important images in the background.
The Importance of Alternative Text
One of the biggest accessibility problems on the Web
today is the lack of alternative text for graphics and
images. 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
alt text, they are unable to communicate
When a screen reader comes across an image with no
there are a couple of things that could happen:
- It could simply skip the image as if it were not even on the page.
- It could find some text that is associated with the image such as the file name and read that instead.
The exact behavior of the screen reader varies between brands of screen readers and the circumstances of the Web page itself, but either way, the end result is undesirable. The user either misses the image content completely or gets some text that is probably meaningless.
Let's listen to a recording of a screen reader (IBM
Home Page Reader 3.0 in this case) when it comes across
an image with no
For the sake of illustration,
unless they are links, in which case it reads the link
Someone using a screen reader would have a difficult
time knowing what the image was for. We need to add
a text alternative to the image. To do this we simply
of the Antarctic logo" in the
img tag. The
HTML source would then look like this:
<img src="map_antarctica.jpg" width="150" height="117" alt="University of the Antarctic logo" />
Let's listen to Home Page Reader 3.0 reading the image—this
alt text—so we can see the difference.
Here is the image that we were listening to:
The addition of alternative text allows screen reader users to get the same information as others who can see the image.
Let's look at another example image:
The HTML code for this image is as follows:
<img src="silvia1-8-web2.jpg" alt="Portrait of Silvia Alvarez" width="311" height="350" />
You can type the code exactly as you see it above into
a text editor, or you can use the interfaces of software
tools such as Dreamweaver, FrontPage, or GoLive to accomplish
the same thing. In Dreamweaver,
is added through the window as pictured below:
In Microsoft's FrontPage, you double click on the image to bring up thedialog box. You then add the text alternative to the field under .
Other editors have similar functions for adding alternative
text. Consult your editor's documentation for instructions
on how to add an
Now that we have a better idea of what an
is and how simple it is to add an
alt attribute to an image,
let's talk about what the
alt attribute should contain.
How Images Are Used
Images on Web sites are used in three main ways:
- to convey important content
- to provide visual enhancements which offer no real content
- to link to other areas of the site
The most appropriate
alt text for an image depends on
the way in which the image is used. In fact, the same image
could be used for different reasons under different circumstances,
and each instance of this image would have different alternative
text. Keep the following rule in mind:
The most appropriate
alt text communicates the purpose of
the graphic, not its appearance.
With that in mind, the most important information to convey in alternative text is that the user can click on this image to go to another area of the site.
Communicating the Purpose of the Graphic
Images that contain important content
If the image or graphic contains information that is
relevant to the content of the site, then the
should also provide that content, in a way that is consistent
with the purpose of the image. Remember that the purpose of
the image is not necessarily the same as the appearance of
For example, the WebAIM Training CD site uses images for its main navigation, such as the one pictured below.
These images look like tabs on file folders. Some of
these tabs are maroon, and others are blue. When the tab
is selected, it turns white. Part of the text is in upper
case; part is in lower case. All of these details are important
to the look and feel of the Web site, but to someone who
cannot see how the site looks, its look and feel are mostly
irrelevant. The important aspect of these graphics is that
they link to other areas of the site. With that in mind,
I would want to provide alternative text that conveys the
fact that the user can click on this image to go to another
area of the site. In this case, the link destination would
be Track 2 of the training event, which is the track for
coordinators. The most appropriate
alt text for this image
is as follows:
"Track 2: Coordinators."
In this case, the
alt text exactly matches the text in
the graphic. In most cases where there is text within images,
this is the best solution. Don't worry about describing
the image. Tell the user about the purpose of
the image, not its appearance.
Take another look at the portrait of Silvia below:
This particular graphic could be used in many different ways, with many different purposes. Here are a few scenarios:
- An elementary school teacher creates a Web site to
explain the difference between paintings, drawings, and
sculpture. She includes several different examples of
each type of art. In the text of the page itself, she
describes the differences between these three media. She
uses the portrait of Silvia as one of 4 examples of paintings.
alttext in this case would be "A painting of a young lady." This is probably sufficient, as long as the teacher has adequately described what a painting is within the document itself.
- A family member is compiling a list of people in her
family, along with portraits of these individuals. Since
all of the images are portraits, an appropriate
alttext would be "Silvia Alvarez."
- An art instructor in a high school creates a Web site
showing different types of paintings. He uses this painting
as an example of a portrait, and explains within the text
of the page what a portrait is. An appropriate
alttext could be "Portrait."
- An art historian is creating a catalogue of different
portrait artists. His purpose is to show portraits by
various artists. The
alttext could include information relevant to art historians, such as the title of the work of art, the name of the artist, the medium, and the date. The
alttext could say "Silvia Alvarez, oil on canvas, by Paul Bohman, 2002."
We could go on with different scenarios, but I think
you get the point. There is no one right
alt text for any
particular image. It all depends upon the context and the
purpose of the image. This is a judgment call that the
page's author must make.
Accuracy and brevity
Alternative text for images should be as accurate and
as succinct as possible. Make sure that your
alt text conveys
all of the important information relevant to its purpose,
but don't burden users with excessively long
Screen readers or refreshable Braille devices always read
alt text, which can make image-heavy pages rather long.
If you need a longer description of the image, you should
longdesc tag to the image.
The Web has become a graphical environment in which developers often add images to their pages simply to enhance the visual appeal of the site. For example, the image below could be 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
what is often referred to as an empty or null
alt="". That is
quote quote, with no space in the middle. The source for
the image in this example would look like this:
<img src="corner.gif" width="84" height="90" alt="" />
Screen readers will ignore graphics with empty
which is exactly what we want in this case. You may be
wondering why it is necessary to specify a null
Wouldn't it make more sense to simply leave the
off entirely? This is a good question, but the answer is
alt text is worse than null
alt text because
some screen readers read the file name of the image, which
can be confusing to listen to. When you add null
screen readers skip over the image without reading anything
Dreamweaver MX allows users to create null
within the dialogue box.
Unfortunately, many other HTML editors
do not allow you to create empty
within the graphical interface so you must edit your HTML
source code directly. To do this, locate the image
in the code and add
Transparent and spacer images
Developers often use transparent and spacer images to
create space between elements on a page. Although users
with sight do not see the transparent images, they may
be visible to individuals using text browsers or screen
readers. You should add an empty
alt="") to all transparent and
Sometimes, Web developers add
alt text to an image that
is exactly the same as the text next to it, or the same
as another graphic next to it, as in the example below:
In cases like this, you should add null
alt text, so
that screen reader users do not have to hear the same information
twice. The JAWS screen reader would say: "image, international
students; image, international students" when reading
this section of Web content, which can be confusing, or
at least annoying. (In this case, both the photograph of
the girl and the adjacent text are images.)
Client-side image maps
Every common Web development tool creates client-side image maps, rather than server-side image maps. As the names suggest, server-side image maps require special scripting on the server, whereas client-side image maps are processed only in the client's browser. Unless you have purposely chosen to create a server-side image maps, you probably will never create one. Client-side image maps can be accessible, whereas server-side image maps cannot.
Client-side image maps require
alt text for both the
image and the hot spots. Take a look at this example (Note: none
of the links lead anywhere):
There is only one image above, but there are 5 hot spots.
Each of these hot spots leads to a different location in
the Web site, so it is necessary to convey the navigational
purposes of each of the links. The
alt text for these hot
spots should be exactly the same as the text in the image.
alt text for the hot spots is HOME, Products, Services, Contact
us, and Index. Now we have the
alt text for
the hot spots, but what about the image itself? Aside from
the hot spots, this image does not convey any meaningful
information. The most appropriate
alt text for the image
is a null
alt text. Here is the code for the image and its hot spots:
<img src="imagemap.jpg" alt="" width="199" height="303" border="0" usemap="#Map"> <map name="Map">
<area shape="rect" coords="7,9,191,54" href="#maps" alt="HOME">
<area shape="rect" coords="7,68,191,114" href="#maps" alt="Products">
<area shape="rect" coords="7,127,190,172" href="#maps" alt="Services">
<area shape="rect" coords="6,186,190,229" href="#maps" alt="Contact us">
<area shape="rect" coords="7,245,189,289" href="#maps" alt="Index">
Not all images used as image maps will have null
alt text. The content author must determine the most appropriate
alt text for the situation.
One thing to keep in mind when creating client-side
image maps is that screen readers read the
literal order of the HTML markup.
Tools such as Dreamweaver often
do not put the
next to the
which contains the
for the hot spots, might end up at some strange
location far away from where the hot spot
is viewed in the browser. This means that
screen readers read the alt text completely
out of context. This can be very confusing
to screen reader users. If you use Dreamweaver or other similar WYSIWIG tools, be sure to
look at the underlying HTML markup. If necessary,
cut and paste the
<area> tags to be right
Server-side image maps
Since there is no way to make server-side image maps accessible, the simplest advice is to not use them. Some people are concerned that client-side image maps cannot create the geometric shapes that they want to create, and so they use server-side image maps. The truth is that client-side image maps can make any shape at all, as long as the developer has the patience to create all of the coordinates. Below is an example of a client-side image map, with unusually-shaped hot spots, just to show that it can be done (Note: none of the links lead anywhere).
In effect, there is no reason to create a server-side image map.
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.
If your background image contains important text or other
visual cues, you should rewrite the HTML so that the image
is in the foreground so that you can apply the proper