Text alternatives - accessibility for web writers

Text alternatives are one of the most basic requirements for accessibility, but also one of the most misunderstood.

Benefits of providing text alternatives

Text alternatives help when people cannot see or use images. They benefit 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.
Read web pages with a Braille device, because they are blind or deaf/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). They may use screen magnification software to enlarge content, but 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.

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, because they can't '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.

3 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

If you're using a photo or an image just to make a page look more attractive, don't include a text alternative. When your editing tool prompts you, leave the text alternative field blank. The HTML mark-up on the page will look like this:

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

The alt attribute (commonly called the 'alt tag') is where a text alternative is included.

You should also use a blank text alternative for images that just repeat 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 in the content above. There's 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 should include a text alternative. Otherwise you'll have a empty link.

Short text alternatives

Use a short text alternative whenever you use an image to present information or act as a link.

Short text alternatives look like this:

<img src="logo.png" alt="XYZ Bolt Company">

There is no technical limit to the length of a short text alternative. However, you can't use structure or formatting within the alt attribute. So if you need to write more than a paragraph of text, you'll need a long text alternative.

Long text alternatives

Complex or detailed images usually require a long text alternative. Consider a diagram of the organisational structure of a company, with all the senior positions, departments and reporting lines shown as a hierarchy. It is not enough to include a short text alternative saying 'organisational chart'—the detail communicated in the image would be missing. To adequately represent the information in the image, you'd need some structure (headings, sub-headings, lists).

You can include a long text alternative in two ways:

Include the text alternative on a separate page and link to it. This is a good option for the organisational chart example above. Add a link beneath the image saying 'text version of organisational chart'. You should:
- Still provide a short text alternative for the image. It needs to give the image a label and let people know where they can find the long text version. An alt that said 'Organisational chart, text version linked below' would work.
- Include a link back to the image from the page where you've provided the long text alternative. 'Graphical version of organisational chart' would be fine.
Provide the long text version provided on the same page as the image. If the text version would look odd shown immediately below the image (in the case of the organisational chart, it probably would), you could either:
- Include it at the bottom of the page, and use a named anchor (often called a 'jump link') immediately below the image to link to it
- Use an accordion in the closed position, allowing users who don't need the text version to ignore it.

Tips for writing text alternatives

When writing text alternatives for images, remember you are writing for people who cannot see or use the image. You need to consider the role the image plays on the page, what it communicates to a sighted user, and how it relates to the surrounding content. Then ask yourself:

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?
Is a blank text alternative appropriate?