Accessibility tip #2 – getting alternative text right

This is the second in a series of short articles providing web accessibility tips, helping you to meet the prinicples set out in the University’s Web Accessibility Definition of Best Practice.

Providing a text alternative for an image on a web page is one of the most fundamental and well-known web accessibility principles. It’s the very first thing you’ll be asked to do when you follow the University’s Web Accessibility Definition of Best Practice, and the first topic covered by the W3C Web Content Accessibility Guidelines.

Why? Appropriate alternative text for images is vital to allow people who can’t see images – whether because of a visual impairment or due to browser limitations – to understand page content, and to avoid being presented with unnecessary or confusing information.

How? By providing a value for HTML’s alt attribute, you can specify text that will be displayed or spoken in place of the image. In a content management system like the one used by the University, you can do this when you upload an image or select an existing image from an image library. Or it can be manually added to the HTML, using the alt attribute of the <img> element.

The value of the alt attribute should provide the equivalent meaning to that provided by the image. Providing a text alternative that is equivalent and appropriate to the meaning of the image can sometimes be a challenge, and the best solution depends on the role and context of the image.

Here are some key principles:

  • Provide alternative text that is succinct, informative and makes sense in the context of the page text surrounding the image.
  • If the image contains text, then make sure that text is also present in the alternative text.
  • If the image is decorative, then specifying an empty (null) alt attribute is OK. Don’t miss out the alternative text.
  • If the image is a link to another page, make sure the alternative text indicates the destination page, rather than describing the image.
  • If the image is an icon that is used more than once on your page or site to mean the same thing, then give it the same alternative text each time.
  • Don’t assume that alternative text is the text you see as a tool-tip when you move your mouse over the image. If you want a tool-tip that people can see as well as the image, use the title attribute in addition to the alt attribute.

More reading

Here are some useful resources providing more insight into effective provision of alternative text:

  • Examples of use of alternative text: Dey Alexander – a useful table showing how different image types demand different alternative text; the same author has also produced a helpful decision tree to help in the choosing of appropriate alternative text.
  • Text descriptions and emotion rich images: Léonie Watson – a fascinating view from a web accessibility advocate and screen reader user, on providing descriptive alternative text for images in a way that conveys a similar subjective reaction to the image.
  • Alternative text and SEO: Malcolm Coles – a discussion on the overlap and potential conflict in using alternative text for search engine optimisation and to improve accessibility for visually impaired people. It includes the opinions of Robin Christopherson, accessibility advocate and screen reader user, who says that duplication and detail is better than no information at all.
  • Use of Alt text in images: Alan Flavell. An oldie but still a goodie – some very effective (and humorous) examples of good and not so good alternative text for images
  • How to Meet WCAG Success Criterion 1.1.1: The official advice from the W3C Web Accessibility Initiative on providing text alternatives for non text content.
This entry was posted in Accessibility Tips and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Skip to top