Skills for Access

Why this is important

Alternative text for graphics presented in HTML content is essential to ensure understanding of content by anyone using a browsing device that does not show graphics. Most importantly, this includes screen readers and Braille display devices used by blind and visually impaired people, but also includes non-graphic browsers such as Lynx, and for people with low bandwidth internet connections, who may have turned off images to speed up browsing. Appropriate alternative text for graphics is also important for effective indexing of web pages by search engine indexing software.

General Principles

The overall aim is to provide text that is an effective replacement for the information provided by the image. That means it must give the same information that is by the graphic to people who can see the graphic, it has to make sense in the context of the surrounding text, and should not offer meaningless, repetitive or unnecessary information. The aim is not to provide 'tooltip' text for sighted people (i.e. the text that appears in Internet Explorer when the mouse pointer is moved over the image).

Before you continue

The advice on this page helps you avoid introducing a specific accessibility barrier, but it's not a magic formula. To avoid attempting to follow a technical solution that is not appropriate to the resource and its intended purpose, you need to know the context in which the multimedia resource is being used:

1. The purpose or aim of the multimedia resource in question, and whether it is being used to supplement another resource in the learning environment, or whether its use is required by students.
2. The target audience, their knowledge and expectations, and the type of browsing and assistive technology that they may be using.
3. Whether the information and experiences provided by the multimedia technology are already available in an equivalent, alternative form.

For more background on this approach, see our Guide to the use of multimedia in accessible e-learning.

Technique Details

In HTML, the alt attribute is used to provide alternative text for images, and also for imagemaps and other non-textual contents such as applets. Most web authoring tools should prompt you to add alternative text when you add an image to a page - so don't forget to do so.

The content of the alt attribute depends entirely on the object it's replacing and the role it plays in the page. If the image is of a picture, the content of the alternative text is subjective to the page author, and will depend on the role of the picture within the page. The golden rule is to be succinct yet informative. Consistency is also important, particularly for images repeatedly used on the site, such as icons and logos.

If an image exists only for presentational purposes (for example a spacer image) and provides no information, then use a null alt attribute: alt="". Don't assume that if there's no information, there's no need for alternative text. If you don't provide an alt attribute, then a screen reader may speak out the file name of the image, leading to an extremely irritating and frustrating browsing experience.

If the image acts as a navigation feature (a link or button), the alternative text should indicate the destination of the page. The same goes for image maps - every hotspot plus the 'parent' image should have alternative text

If an image consists of text, then the alternative text should repeat that text word for word, unless this would result in a repetition of adjacent text, in which case the alternative text should be null.

The alt attribute is for a succinct and informative text replacement. If you need to provide more detailed alternative text for a complex image, such as a graph, map or Venn diagram, you can use the longdesc attribute to attach a link to a separate HTML page with a textual description. But, given that the longdesc attribute has inconsistent support amongst widely used browsers, you may want to provide, adjacent to the graphic, an additional textual link to the description page.

If you want to provide additional information to all users above and beyond that contained in the alt attribute, use the title attribute. In this way, you can provide extra information about the image - and browsers that behave the way they should will display the content of the title attribute as a 'tool-tip', while screen reader users can adjust verbosity settings to read the title attribute.

Testing

Testing for effective alternative text for graphics requires, without any doubt, manual inspection. An automated tool such as Bobby or the Wave can tell you whether an image is missing an alt attribute, and some tools are clever enough to detect instances where the value of the alt attribute is unlikely to be of any use - for example if it is the same as the file name of the image. But they can't truly tell you that alternative text is equivalent and appropriate for the image concerned.

Don't follow the advice some sources offer of using your mouse pointer to discover whether a 'tool-tip' of text appears for a specific graphic. On the one hand, not all images on a web page are visible to the eye - think of decorative images such as transparent 'spacer' graphics or images that have been 'sliced' to create a specific page appearance, so relying on this as a checking technique is particularly inappropriate. On the other hand, while Internet Explorer shows an image's alternative text as a tool tip, other browsers, such as Mozilla/Firefox, do not. Thus, if a tool-tip does not appear when the mouse pointer is moved over an image, this does not necessarily mean that no alternative text exists. And in fact, any text that does appear may be the content of the image's title attribute, not its alt attribute.

So you need to access your pages in a non-graphic browsing environment. You could turn off graphics in graphical browsers like Internet Explorer, but for image-heavy pages, there may not be enough space to display on-screen all the alternative text for each image. Instead, you could use a tool like the Web Developer Toolbar, available for Firefox, to replace images with alternative text.

Much more effective is to access your pages in a text browser such as Lynx, or a text-to-speech browser like IBM's Home Page Reader. This will allow you to get a better idea of the flow and comprehensibility of information when output in a non-graphic browsing environment.

Finally, get feedback from someone who uses a screen reader and/or Braille display - do your pages make sense to them?