Accessibility Tutorial

Text Equivalents

Text Alternatives for Images (alt-text)

The single most important thing you can do to make a web page accessible is to include alternative text for images. When you make the decision to add alternative text, you include the many people who use talking browsers, screen readers, text browsers or browsers on small devices.

Use the alt attribute on every img element in the HTML code for your page. Also use the alt attribute on every input control with type="image" (see Accessible Forms lesson) and on every area element (see Accessible Image Maps lesson).

The idea of alternative text is to provide a textual replacement for images that conveys the same thing as is communicated to a sighted user seeing the image. Screen readers and talking browsers can't do anything with an image itself; instead, they will announce the alternative text. If an image is active, i.e., if the image is inside an anchor element (<a>), then the alternative text should convey the purpose or function of the link. If the image is not active, but conveys information, then the alternative text must convey the same information. If an image conveys no information, or is redundant, specify that with null alt-text, alt="", that's quote, quote, with no space between.

The Section 508 standard for text alternatives states:

A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

If you don't provide this information when you have an image on your web page, you will be losing customers, you will not be doing your best for search engine optimization, and you will not be compliant with either the Section 508 Web Standards or with the Web Content Accessibility Guidelines, Version 1.0 or 2.0.

Choosing Text Equivalents for Images And Image Links

The following image is from a Gateway home page some time back. The code that illustrates the inclusion of alternative text, "the Gateway box", follows.

<img src="box.gif" ... alt="The Gateway box" />

If the Gateway box were an active image, a link to the Gateway home page for example, then the alt-text should give the function of that link, either alt="Home" or alt="Gateway". If the web designer considered the image to be "eye candy", i.e., visually setting a mood, then alt="" might be appropriate since interjecting "The Gateway box" in the flow of a screen reader's speaking of the page might not have an appreciable positive effect.

In the following example from IBM a few years back, the image contains the words "shop IBM" and an abstract shopping cart. The text equivalent should repeat that text.

<img src="images/shop.gif" alt="Shop IBM" />

It might be tempting to write alternative text like this:

alt="abstract shopping cart to the left of the words shop IBM"

That is the description of the image, not its function. If you used that alt-text then each time a blind person visited the site he or she would have to listen to "abstract shopping cart to the left of the words shop IBM." That image and that message would be at the top of every page. Such a description meets the technical standard (§1194.22 (a)) for providing a text equivalent, but it fails usability criteria. Instead, use alternative text, as IBM does, that exactly coincides with the text on the image or the function of the link, alt="Shop IBM".

Often, the navigation links at the top of a web page, like the Shop IBM link above, are pictures of the words "Home," "Products," "Customer Service," etc. In these cases as well, the alternative text should be identical to text in the images.

You do not have to include a reference to the fact that something is a link, for example, alt="link to shop IBM page". Text browsers and screen readers inform their users when they encounter a link. So just use alt="shop IBM" and that will do it. It is redundant and questionable to add verbs to the alt-text for links.

For example, Google's typical logo (see above) often (but not always) uses alt="Go to Google Home". When you listen, it sounds like a command; instead, it should just be alt="Google" and a screen reader will announce, "link graphic Google".

The requirement for alternative text also applies to images that carry no information, such as spacer images sometimes used in table-based layout. Use empty or null alt-text, written alt="" (no spaces between the quotes) for the alternative text to say that an image contains no relevant information and is to be ignored.

<img src="images/spacer.gif" alt="" />

This tells an assistive technology, "don't bother me with any information about this image," and the screen reader or text browser will completely ignore the image.

Sometimes you need to make a judgment call about whether or not to use the empty alt-text (alt=""). While blind users may disagree about the correct detail of alternative text, they all agree that the alt attribute must be included on every image.

Another case where you should use empty alt-text is when the information is redundant. In a list of navigation links, for example, you might have an icon next to the text for a link, like a picture of a question mark and the word "Help." In this case, if the image is not a link, it should have empty alt text, alt="".

If that image (question mark) is a link, then alt="" is not appropriate because assistive technology will still include the image link in the tab order and announce the URL (href) of the anchor or other information associated with the anchor like the value of the src attribute of the image. In this situation (and many similar to it) it is best to include the image in the anchor with the text and then you can use alt="" on the image.

Sometimes the information that a screen reader finds because you forgot to include alt text can be downright disastrous. Here is an image from a major internet shopping company that does not, at this time, have alt-text.

This is what a blind user hears:

link graphic /b/ref=amb_link_5174632_1/102-8341830-0338507?ie=UTF8&node=465600&pf_rd_m=ATVPDKIKX0DER&pf_rd_s=center-2&pf_rd_r=083ACQP8E5WJNP9G6MW9&pf_rd_t=101&pf_rd_p=299488501&pf_rd_i=507846

Another common use of images on commercial web sites is for web designers to create their own bulleted lists using graphics that they choose for the bullets.

Look at the list of global navigation links in the left navigation panel and the News items at the bottom of the IBM page.

The arrows are all images with alt="". This is appropriate and the choice made by IBM.

<img src="... arrow.gif" alt="" />

These arrows used to be separate image links. They are not links anymore. When they were separate links, alt="" was not appropriate because the links would be in the tab order and an announcement is needed when screen readers land on a link. When you want to have clickable arrows like this, next to text, then include both the arrow image and the text within the <a> element, with alt="" for the image.

<a href="http://www.ibm.com ...">
 <img src= "... arrow.gif" alt="" />
 <strong>Home / home office</strong>
</a>

Similarly, the arrows bulleting the News items on the Compaq site should use alt="" but unfortunately alt-text is not specified.

The Center for Applied Special Technology site used to use ">" as alternative text (alt=">") for some "bullets", but screen readers speak "greater than", which is not good! Other sites use alt="bullet".

In trying to decide whether to use empty alt-text or a short text equivalent, you can listen to your page and decide which sounds better. If the list items are short or if the items are links, alt="" is probably better. If the items are long and they are not links, the alternative text "bullet" might be better.

However, in all of these cases of alt-text for bullets, it would be much better to code the lists as HTML lists (<ol>, <ul>, <dl>) and then there is no issue of alt-text for bullets, and screen reader users will be able to navigate to the list and through the list items. If you use list markup for your lists, then your page will comply with the level one Success Criterion, 1.3.1, of WCAG 2.0 which, in effect, requires the use of structural markup for structures (like lists) on the page. And your lists can look exactly the same as the ones with images included in the text.

For example, again using IBM, here is a screen shot of a list on a business services page.

The code for the list looks something like this:

<ul class="ibm-link-list">
 <li><a href="http://www.ibm.com/ ..." .. >Small business</a></li>
 <li><a href="http://www.ibm.com/..."...>Medium business</a></li>
</ul>

Then the "bullet" is specified with the CSS style statement like this:

list-style-image: url(images/arrow.gif);

Sometimes images are used purely for visual effect. These should have empty alt-text (alt=""). The disabilities community and disabilities advocates debate this issue. The image on the right-hand side of a page of the National Library service for the Blind and Visually Impaired (from around 2002) is, in my opinion, decorative only. I would use alt="" but the web authors on this site chose alt="Images of NLS Users." Either is OK.

Choosing Text Equivalents for Client-Side Image Map Areas

A client-side image map consists of an image with the usemap attribute set to the name of a map. The image map and each area in the map must have alternative text. The properly marked up HTML code for a client-side image map is illustrated here:

<img src="map.gif" alt="" usemap="#navigation" />
<map name="navigation">
<area coords=1,1,40,100 alt="home" />
<area coords=1,100,40,180 alt="products" />
</map>

We are going to talk about image maps again in Section 5. For now, however, we want to stress how important it is to include a text equivalent for each area of the image map, a text equivalent that gives the purpose of the corresponding hot spot.

The Yahoo! site is notoriously sparse of pictures. They have updated their site since the initial writing of this course, but the first image used to be the Yahoo! banner across the top of the page. (split here for formatting purposes!)

The banner is not a collection of links as it appears. It is one image that is coded as a client-side image map. The links (blue underlined text) in the banner are part of the image. They are not text. The words for the "links" seem to be there, "Calendar," "Messenger," "Check Email," "What's New," "Personalize," and "Help." Here is what Home Page Reader, a talking web browser, tells its users:

[Map: r/a1]
[Map: r/p1]
[Map: r/m1]
[Map: r/wn]
[Map: r/i1]
[Map: r/hw]

The entire banner, including the icons and the simulated-link text, is all one image used as an image map. The map areas are rectangles including each icon and the corresponding text.

None of the map areas have alt-text, as illustrated in this HTML code fragment for the first map area:

<area coords="0,0,52,52" href="r/a1" />

Surprisingly, the portion of the image map offering help was, at the time of the first writing of this course, the only way to find help on the main Yahoo! page. Thus the user who is blind, wanting help, would have to know to follow the link, "r/hw."

You could code the image map hot spots correctly by setting the alt-text to the text that actually appears in the image.

<area coords="..." alt="Calendar" href="r/a1" />
<area coords="..." alt="Messenger" href="r/p1" />
<area coords="..." alt="Check Email" href="r/m1" />
<area coords="..." alt="What's new" href="r/wn" />
<area coords="..." alt="Personalize" href="r/i1" />
<area coords="..." alt="Help" href="r/hw" />

The Yahoo! site that premiered early in 2002 fixed this problem. Their image map hot spots were appropriately marked up with alt-text. Also their form control fields had proper label elements (see the section on forms). Adherence to these basic requirements of Section 508 is all too rare amongst major commercial sites.

The Yahoo! banner has an interesting evolution, starting with a completely inaccessible server-side image map back in 1996, shown below.

In the beginning of 2006 the appearance of the top of the Yahoo! page was banner-like as shown below.

Each of the six images are placed immediately above real text, as opposed to pictures of text in the first Yahoo! banner above. The image and the text are included in the same anchor and the image is given null alt-text, alt="", a recommendation we talked about above for reducing repetition, while including the ease of visually clicking on the image or the text. Here is the (elided) code for one of those links.

<a href=r/25><img src=" ...125.gif" width=36 height=36 border=0 alt="" /><br />... Finance ... </a>

Creating Quality Text Alternatives

It is just as important to have high quality alternative text, as it is to have high quality normal text on the page. The alternative text should be consistent, clear and, most important, useful.

When an image is not a link and carries no information or is redundant, use null alt-text (alt="").

For example, there were many images named c.gif on the IBM web site that are there for adjusting the visual layout. These carry no information and have been assigned empty alt-text, alt="". Similarly, on the left-side navigation area, there is a list of text links, and each is preceded by a graphical image of an arrow. The alternative text on the image arrow should be and is empty, alt="".

If you do not include the alt attribute with empty text (alt="") for these formatting images, screen readers with the default screen reader settings will ignore the image. However there are screen reader settings that would result in the assistive technology announcing meaningless code to the user. Hearing chatter that carries no useful information can be frustrating and even annoying to a blind user.

When the navigation buttons are images with text, you probably chose that text very carefully. Use the same text in the alt attribute.

Using Long Descriptions for Text Equivalents

Alternative text should be short and simple, but sometimes you may need to provide more explanation or content than is suitable for alt-text. In these cases, you can use the long description (longdesc) attribute for the img element. The longdesc attribute points to the URL of a separate description file that contains information conveyed by the image.

<img src="picnic.gif" ... alt="picnic photo" longdesc="picnic.htm" />

The clearest example of the need for a long description of an image is when the image is a graph or a chart as shown below.

<img src="traffic.jpg" ... longdesc="traffic.htm" alt="traffic density graph">

The longdesc attribute points to the file traffic.htm that includes the following simple content:

<p>Traffic Density Graph</p>
<p>This graph shows traffic density on Main and Center streets measured in cars per minute between 8:20 AM and 12 noon
on Center and between 9:00 and 12:20 on Main Street. Density ranges from a high of 70 down to 50 cars per minute on Center.
On Main street the density drops from 55 down to 35 at 11 AM and then back up to 55 at 12:20 PM.</p>

At first writing of this course the longdesc attribute was not supported by assistive technologies. Because of that, accessibility advocates recommended also using a "d-link" or description link that would open the description file referenced in the longdesc attribute. Now that the technology supports the longdesc attribute there is no need for the "d-link", which is welcome news because even the accommodation itself violates an accessibility principle of having clear link text!

Pictures in news stories or images in shopping sites are also candidates for long descriptions.

There are good alternatives to the longdesc attribute for providing detailed information about images. For example, Reuters news stories displayed on Yahoo.com have photos (as links) with the alternative text "Reuters Photo." That link leads to an enlarged photograph with a detailed description.

When a user opens the "Reuters Photo" link, the following page is displayed. The long description is a caption on the larger image.

This tutorial is based on Jim Thatcher's tutorial. It was revised by Debbie Fierst of Logical Imagination for use in Webucator's web accessibility courses. It is provided here at no charge.

All material in this Accessibility Tutorial is copyright © 2008 Webucator. The purpose of this website is to help you learn Accessibility on your own and use of the website implies your agreement to our Accessibility Tutorial Terms of Service.