CIF Best practice Guide - Alternative Text for Images

• CIF Requirement - 5.3 Still images
• Writing good Alt text
• alt="Map"
• alt="Map from my house to where I work."
• alt="Go east on Elm Street. Turn north at Booth Street. Cross the bridge and continue to 25 Eddy Street."
• Alt text for presentational images
• Do not repeat page text in Alt attributes
• Alt text is not a tooltip
 

CIF Requirement - 5.3 Still images

The Alt attribute
The (X)HTML alt attribute is used to define the "alternate text" for an image. It tells the reader what he is missing on a page if he cannot, for whatever reasons, view the images. The browser will then display the alt attribute's content instead of the image. For those using assistive technologies such as a screen reader, the alt text will be read to the user. Including alt attributes has the added benefit of allowing the images to be indexed by search engines, thus enabling their retrieval.

Alt attributes should not be longer than 100 characters, spaces included.

[ http://www.fourdirectionsteachings.com/transcripts/mikmaq.html]

The alt attribute for the image above contains the following content:

"Mikmak - Glooscap and Nephew looking at each other across the diagram of the Earth"

In the XHTML code, the image element has the following form:

<img width="545" height="300" alt="Mikmak - Glooscap and Nephew looking at each other across the diagram of the Earth" src="digitize/mikmak_6.jpg" />

Every (X)HTML <img> element must include an appropriate alt attribute, though what counts as appropriate depends on the image and its use or function on the page, from a user's perspective.

Writing good Alt text

The alt attribute of an image, like any text-equivalent for video or audio, should be understood as a text replacement for the image. The generic rule is to write text that fulfills the same function or conveys the same information as the image on the page. Additionally, as the alt text replaces the image in the page, it becomes part of the text of the page, and should thus fit and flow naturally with the surrounding text.

When determining the alt attribute content for an image, ask yourself how you would describe that image, in its specific context, over the telephone or in an email to someone who cannot see it. What would you say upon encountering this image to make the page comprehensible to the listener?

For instance, the alt attribute for an image of a sculpture should describe the image in a way that captures the intended meaning of the image as it is used in the page, perhaps as an example of a particular sculpting technique. If an image contains text, reproduce the image text in the alt attribute. If the image presents a graph or chart, summarize the trend or information that the chart or graph is presenting. An image of a map showing directions from one location to another should have an alt attribute that textually reproduces the directions indicated visually in the image.

[http://www.mapquest.com/]

A poor alt attribute for the map image above is the following:

alt="Map"

The word "Map" does not help a user other than letting him know that there is an image of a map, but not what kind of map, nor what the map represents.

A better alt attribute would be:

alt="Map from my house to where I work."

While this alt attribute is a bit more descriptive, and tells the user what the image is about, it does not convey the information that the user is supposed to acquire after having viewed the image. If the image is meant to convey information, that information needs to appear in the alt attribute. The phrase, "Map from my house to where I work," is a description of the image, but not a replacement for the meaning of the image as it is used.

The best alt attribute for the map above would be something like:

alt="Go east on Elm Street. Turn north at Booth Street. Cross the bridge and continue to 25 Eddy Street."

This last alt attribute is the best of the three examples because it succinctly takes the important information from the image and provides it to the user. It contains all relevant information without making it necessary to view the map.

(The examples above using the image of a map were adapted from the example found on http://www.uwosh.edu/accessibility/alttags.html.)

Alt text for presentational images

Many images used in a Web page are purely presentational, such as stock photos in a corporate banner, or custom images for list item bullets. In most cases, these images provide no meaningful content or information to users, and are simply there for presentational effect.

Such presentational images, as they do not form part of the content of the page, should be added using Cascading Style Sheets (CSS) in an appropriate separation of presentation from content. However, should presentational images be nonetheless embedded in the (X)HTML content, they do require alt attributes, and these alt attributes should be empty or null, i.e., alt="". This way, those who cannot view the images are not asked to pay them any notice, since there is no alt attribute content to direct their attention.

Similarly, while blank images, such as "spacer gifs" or layout images, used in (X)HTML content to help position elements should also be replaced by CSS, such images should equally take an empty alt attribute as they do not impart any meaningful content or information.

Do not repeat page text in Alt attributes

Sometimes, a content image will be accompanied by (X)HTML text that serves as a description of the image. If this text, through both its position in the source code as well as on the page, is clearly associated with the image and could serve as a replacement for the image, there is usually no need to repeat it in the alt attribute of the image. Unless there is meaningful information about the image that is not found in its description, the alt attribute should remain empty, since the description will act as the image's text-equivalent. Often, though, developers, in a best effort to provide alt attributes, will reuse the image's textual description for this purpose. Unfortunately, this causes needless repetition for those users who, relying on alt attributes, will see and/or hear the same text twice, once from the <img> element's alt attribute, and once from the image's regular text description on the page.

Alt text is not a tooltip

Microsoft Internet Explorer displays alt text as a tooltip when an image is hovered over with the mouse, as shown in the example below.

 

[ http://www.fourdirectionsteachings.com/transcripts/mikmaq.html]

This is an incorrect browser implementation of the alt attribute: as a text replacement for images, alt text should only be displayed if images are turned off or if the user cannot view them. No other graphical browsers display alt attributes as tooltips. Instead, should a tooltip be desired for when a user hovers the mouse over an image, the title attribute should be used in addition to the required alt attribute.

Most graphical browsers, including Internet Explorer, display the title attribute in the form of a tooltip. In the case of Internet Explorer, should an image have both an alt and a title attribute, the title attribute will be used for the tooltip. If only an alt attribute is supplied, this will be presented as a tooltip.

The title attribute can be added to almost any element and should be used to offer advisory or additional information about the element to which it is applied. The title attribute should not be used to provide a text-equivalent or replacement for the element.

For example, if a Web page on a site dedicated to sports included a link to "News," the anchor element might include a title attribute offering more information about the link, such as "Read the latest sports headlines." Such a title attribute would be added to the anchor in the following way:

<a href="news.html" title="Read the latest sports headlines.">News</a>

In most graphical browsers, hovering over such a link would appear with the title attribute content appearing as a tooltip: