Alternate Text for Images

Published: | No Comments

Reading Time: 7 minutes

So what is appropriate alternate text?

Alternate text should convey the meaning, contents and function of an image – but it’s not always that easy. Sometimes actually describing the contents of an image is not the most useful approach. A picture of an arrow on a page may actually be a trigger to some functionality – so alt="Picture of arrow" is perhaps not the best option. On some sites images may be there purely to provide decoration or even just to make a bit of space. Does a blind person need to know that?

Clearly some thought needs to go into the allocation of the alternate text. Here are our suggested guides for various different types of images.

Company logos

Coolfields Consulting logoThis image is our own Coolfields Consulting logo. It’s origin was a lucky photograph of a child’s toy in a darkened room.

But is that what’s important? More important is that it represents our company. So the alternate text should be ‘Coolfields Consulting logo’. But see the next section if the logo links back to a home page.

Images that are links

On some sites images are used as links to other pages. These might appear in a navigation list, or a logo perhaps which links to the site’s home page (like our logo at the top of this page).

For these images the obvious candidate for the alternate text is the link destination. If required, you can tell users it’s a logo too. For example:

<a href="/"><img src="logo.gif"
alt="Coolfields Consulting Logo - link to Home Page" /></a>

Where the link also contains text that describes the destination the alternate text for the image becomes superfluous and should be blanked out. Eg:

<a href="/">Home Page<img src="/images/img0067.gif" alt="" /></a>

Note: The alt attribute should not be removed completely as screen readers will typically then read out the image name and path – not useful.

Images in Forms

A next buttonIt is possible to have images included in forms as a submit button. Advances in CSS styling of regular submit buttons is making this technique less common now, but it is still used on a number of sites.

The alternate text for these images should describe the function that will be triggered by the image – maybe ‘Submit’, ‘Next’ or ‘Search’. Example:

<input type="image" src="next.gif" alt="Next" />

Images that contain text

Where images contain text (for example in logos) the alternate text should match the text contained within the image itself. If the image is a link though then the destination is the most important thing to put in the alternate text.

Having text in images can cause other problems with accessibility as the text in these images cannot always be resized for users with poor eyesight. It’s of course a lot harder to change the test if required.

Decorative and spacer images

Pictures like this of a smiling woman using a laptop are some of the commonest images to turn up on commercial websites. I guess the site owners are hoping to convey that using their site is a pleasurable experience.

If images like this are present purely for decoration then the alternate text should be blank – ie alt="". Alternatively if the image is present to illustrate uncomfortable positions for using your laptop then the alternate text should reflect that – ie alt="Using a laptop on the floor can be uncomfortable".

Bullet points

Many years ago there was a view that bullet list images should be given an alternate text of ‘*’ or even ‘bullet’. Fortunately this practice is seldom used now and screen reader users will thank you for not doing it.

Correct use of lists in your pages solve the problem anyway since any image displayed as a bullet will typically be a background image which screen readers will ignore. Screen reader users know they are being read a list which is much more useful.

If you really can’t use an HTML list the any image used as a bullet point should have blank alternate text – ie alt="".

Image Maps

Image maps are images that contain active areas – each one containing a link to another page or some functionality. An example would be a map of the solar system containing links to the different planets.

Providing alternate text here is a two stage process. Firstly the image itself needs appropriate alternate text. Example:

<img src="system.gif" alt="Solar system" usemap="#solarsystem" />

Then, each of the active areas needs its own alternate text. This can be provided by using the alt attribute in the map area of the HTML. Example:

<map name="solarsystem">
<area shape="rect" coords="0,0,82,126" href="sun.htm"
alt="Sun" />
<area shape="circle" coords="90,58,3" href="mercury.htm"
alt="Mercury" />
<area shape="circle" coords="124,58,8" href="venus.htm"
alt="Venus" />
...
</map>

Images as Backgrounds

Where background images are displayed on pages using CSS properties it is not possible to give the images alternate text and these images are ignored by screen readers and other assistive technology.

For this reason images that contain text or convey meaning should not be used as background images.

Graphs and charts

Pie chart showing sales of WidgetsGraphs and charts are difficult items to write alternate text for as they can show multiple data values and trends. It is unrealistic to write extended alternate text – 10 to 15 words is a sensible maximum. Where a description of a graph or chart is important an alternate page should be provided with a link to it. This alternate page can describe the data presented or alternatively could present the data in table format with an explanation below.

Theoretically a different HTML attribute (longdesc) is provided for this purpose. This is supposed to work by providing a link from the image to an alternate accessible presentation of the data.

<img src="widget-chart.gif" longdesc="chart-description.html">

Unfortunately the longdesc attribute is seldom used properly and indeed it is not supported by all major browsers. For this reason it is best to also provide a plain text alongside the image. Example:

<img src="widget-chart.gif" longdesc="chart-description.html">
<a href="chart-description.html">Description for pie chart.</a>

Other Considerations

Tooltips and the title attribute

There is sometimes confusion between the alt attribute and the title attribute. In this article we have been discussing just the alt attribute which is specifically provided for accessibility reasons. It is an attribute that is only for images or parts of an image. The title attribute can also hold text descriptions of elements and typically this text description will appear as a ‘tool tip’ to sighted users when a mouse pointer hovers over the element. However, the title attribute is not a replacement for the alt attribute and it should be used with care.

A future blog post will cover the best practices to follow when using the title attribute.

To Summarise

It is important to think carefully about appropriate alternate text for the images on web pages. Without sensible alternate text users who rely on screen readers and other assistive technology will be misled and may not be able to use the website.

General rules – alternate text should:

  • Describe content of image and what it represents but only if it is relevant.
  • Describe destination of link, or functionality triggered by image.
  • Be blank for images that do not convey meaning or trigger something.
  • Be concise – if more than 10 to 15 words needed then provide link to another explanatory page.

Got a view on this? Please leave a comment.

Related Posts

Recent posts in the Accessibility category:

Share this page (Links open new windows/tabs)

  • Share this page on LinkedIn (opens new window)
  • Share this page on Delicious (opens new window)
  • Share this page on Digg (opens new window)
  • Share this page on Posterous (opens new window)
  • Share this page on Reddit (opens new window)

There are no comments yet - would you like to leave one?

Like to leave a comment?

Please note: All comments are moderated before they will appear on this site.





Previous post:

Next post: