The Motive Web Design Glossary

alternative (alt) text, [alt tag]

The alternative text (alt) attribute provides a text-only description of an image.

Using the image for the Motive logo as an example:

<img src="/img/logo.gif" alt="Motive logo" /> \_alt text_/ \__alt attribute__/ \_________________image element______________/

If this webpage were viewed without images, then the Motive logo image (top left) would be replaced with the text: Motive logo.

How alt text is used

The alt attribute value (alt text):

• may be used by search engines, for example Google image search will use the alt text in generating search results;
• may be visible (briefly) before an image is downloaded;
• is displayed in place of an image, if a person has turned-off images, for example if they have a slow internet connection;
• is displayed in place of an image if a person is using a text-only web browser, such as Lynx;
• is shown as a tool-tip in the Internet Explorer web browser when the cursor is over an image;
• is ‘spoken’ by screen reader software that is used by the visually impaired.

What ‘problem’ does alt text solve?

Although a person can recognise an image on a webpage as ‘a coffee cup’, ‘my vacation pics’, or ‘a potted palm’; a computer program can only ‘see’ that the webpage is linking to an image file.

For example, let’s say that one of the images mentioned above has the file name: DSC_6400.JPG. The only view that a computer program has of the image is the HTML code, which might look something like this:

<img src="DSC_6400.JPG" />

Based only on the code, the computer program knows that it is dealing with an image <img...>, and might guess that the image is a photo – as JPEG files (using the file extension .JPG), are used in digital cameras – but it can’t tell if this file is the photo of the cup, the West Coast beach, or the plant.

Adding alt text gives a computer program another way of figuring-out what is in the image.

<img src="DSC_6400.JPG" alt="coffee cup" />

Now the computer knows:

• the file is an image;
• the file is probably a photo; and
• the file has been described, by a person, as a ‘coffee cup’.

The more information you provide about an image, the more ways that a computer program is able to help other people find, or use that image. For example:

• a search engine can use the alt text to help a person find your product, service or event;
• a person browsing with images turned-off can choose to load a content image (such as a graph or chart); and
• a screen reader can use the alt text to describe the image to someone with a visual impairment.

Alt text tips

• If an image does not provide content – for example, it is used for decorative, layout or as a bullet – provide an empty alt text:
  <img src="imagename.gif" alt="" />
  If you don’t provide an empty alt text, then a screen reader will typically read out the file name.
• W3C accessibility guidelines recommend a maximum of 100 characters for alt text (in English).
• An interface that relies on an image map should provide an alt attribute for each hyperlinked area (hotspot).
  A more accessible solution is to provide a text-equivalent for links provided by the image map.

New Zealand Government Web Standards and Recommendations links

The New Zealand Government Web Standards and Recommendations sets out the requirements that New Zealand public sector websites must meet to make web-based information and services available to the widest possible audience. …

• Standard 1.1: Alternative text for every non-text element
• Recommendation 5.1.3: The alt text ends with a full point and a space

Related terms: accessibility, element, tag, image map, markup, metadata, search engine.

References and further reading

• Creating accessible images: Part 5: Effective alternative text (WebAim.org)
• The Image Problem (Joe Clark)
  Sample chapter from the book Building Accessible Websites.
• Using alt attributes smartly (Google)
  Dec 2007: A video introduction to how Google uses alt text.
• Use of ALT texts in IMGs (A. J. Flavell)
  A thorough discussion of approaches to creating meaningful alternative text.
  • Alt text recommendations (summary)

Motive Web Design Glossary Trivia