Text alternatives for images: accessibility for web writers, part 2

Comments Off Written on November 29th, 2010 by
Categories: Accessibility
Tags: , ,

Whenever you use an image on a web page, you need to provide a text alternative—a text version of the information or function provided by the image—except when the image is purely decorative. Text alternatives are one of the most basic requirements for accessibility, but also one of the most misunderstood. Many websites have poor text alternatives.

Benefits of text alternatives

Text alternatives help people who:

  • Use a screen reader to read the page aloud because they have little or no sight. Screen readers usually announce that there is an image on the page, and then read the text alternative provided
  • Read web pages with a Braille device because they are deaf/blind or blind and prefer not to listen to a screen reader. Braille is read with the fingertips, a line at a time
  • Cannot see images clearly because of low vision (caused by macular degeneration, diabetic retinopathy and other conditions), even though they may be using screen magnification software to enlarge the content in their web browser. At high levels of magnification, images become blurry and text in images may be impossible to read
  • Use a talking browser to read web pages because they have a learning disability that makes it hard to read text. The talking browser will read the text alternative
  • Struggle to understand the meaning of an image or its relevance to the content because they may have trouble ‘processing’ some types of visual information.

They are also useful for:

  • People who use a text-only browser to surf the web because they have a slow internet connection, or prefer not to look at images
  • Search engines. They cannot ‘see’ the content in images but can read text alternatives.

Confusion over the role of text alternatives

Some web writers think text alternatives are tool tips—text that is displayed when a user holds their mouse pointer over an image. Internet Explorer treats text alternatives this way, so it is not surprising that this belief is common.

Others think text alternatives are descriptions of images, rather than substitutes for them. Many content management systems prompt writers for a ‘description’ when they use an image on a page.  Consequently we sometimes see text alternatives like ‘photo of two students sitting on the lawn in front of the library’.

Designers sometimes write text alternatives that describe the design function of an image. ‘Logo’, ‘header’ and ‘bullet’ are common mistakes.

Three types of text alternatives

Web writers need to know when to use one of three types of text alternative: blank, short and long.

Blank text alternatives

I’ve already mentioned that purely decorative images do not need a text alternative. If you’re using a photo or an image to make a page look more attractive, do not write a description of the image. Instead, when your editing tool prompts you, leave the ‘description’ field blank. The HTML mark-up on the page will look something like this:

<img  src=”bullet.gif”alt=”">

The alt attribute is where the text alternative is included. It is commonly called the ‘alt tag’.

If you are regularly using an image as a design element, the best approach is to get your designer or developer to create a style instead. Then you can use the style rather than a series of images (for a bulleted list, for instance).

You will also need to use a blank text alternative when you use an image to complement or provide an alternative version of content already on the page. For instance, you may have a set of sponsors’ logos at the bottom of the page with their names listed above. There is no need to repeat the sponsors’ names as text alternatives for the logos. Doing so is like writing something twice. However, if the logos link to the sponsors’ sites, you will need their name as the text alternative otherwise you’ll have a empty link.

Short text alternatives

Short text alternatives will probably be the most common type you need to use. They appear within the alt attribute of the image tag.

If you use a logo at the top of your web page to identify your company, write your company name as the text alternative. The HTML mark-up might look like this:

<img  src=”logo.gif” alt=”XYZ Company”>

If there is a tagline in the logo image, add that as well. For example:

<img  src=”logo.gif” alt=”XYZ Company: the best bolts in Baltimore”>

There is no technical limit to the length of a short text alternative. However, you cannot use any formatting within the alt attribute. This may help you decide when a short text alternative is not the right approach. As with any writing, be concise while still communicating the necessary information.

Long text alternatives

Some images contain a lot of information. Consider an image of the organisational structure of a company. All the senior positions, portfolios and reporting lines are shown in a tree diagram. It is not enough to include a short text alternative saying ‘organisational chart’—the detail communicated in the image is missing. Although you could write a longer version of the alt tag, the information needs some structure to reflect the organisational hierarchy.

Long text alternatives can be provided in three ways:

  1. Link to the text version of the image (a good option for the organisational chart; add a link beneath the image saying ‘text version of organisational chart’)
  2. Text version provided on the same page as the image (often used for instructions; text instructions are shown alongside screens from a software program)
  3. Using the longdesc attribute of the image element which allows you to make a link to a page containing the text version.  It looks like this: <img src=”org-chart.gif” longdesc=”http://www.xyzcompany.com/organisational-chart-text-version.html”>

I prefer to use options 1 or 2. Longdesc is not displayed in regular web browsers, so may not be accessible to people who need it. A screen magnifier user may not be able to read the small text labels on an organisational chart, but they won’t know if there is a longdesc option as it is hidden in the underlying HTML mark-up.

Tips for writing text alternatives

The key to writing text alternatives for images is to remember that you are writing for people who cannot see or make use of the image. You need to consider the role the image plays on the page, what you want it to communicate and how it relates to the surrounding content. Then ask yourself:

  • Is a blank text alternative appropriate?
    • If you write one, will users hear words that are not relevant to the content (such as “pink bullet point” for a decorative image)?
    • Will a text alternative just repeat information already provided in the text on the page?
  • Should you use a short or long text alternative?
    • Can you replace the image with just a few words?
    • Does your text alternative need structure or formatting?
  • What should you write to ensure users get all the relevant information from the image?
  • Will the text alternative make sense given the surrounding content on the page?

More on text alternatives for images

Web Content Accessibility Guidelines references

To read more about text alternatives for images, see:

 

You can subscribe to any comments to this entry via RSS 2.0. Both comments and pings are currently closed.