The following advice is part of a larger set on writing accessible content, to help people who write and edit content for the web produce excellent and compliant content.
This piece specifically covers image alt text, and unpacks when to use it and how to write it.
If you want to find out more about web accessibility there are some more resources at the end of this article.
Alt (alternative) text attribute
Alt text (alternative text) is an attribute on an HTML element such as an image, which displays as an alternative when the image itself isn’t available. You may have come across it when an image link is broken or while you’re waiting for the image to download.
Any user who can’t see or understand the original image relies on the alt text to convey the information in the image. Screen readers can’t currently read images and rely on the text alternatives to tell the user what they are missing.
It is not valid HTML5 to have an image without an alt attribute, though it is occasionally possible to leave this tag empty (see ‘When is it ok not to use alt text?’ below).
To write effective alt text you need to be aware of both the function (if it has one) and the content of the image. The alt text should describe both.
Describing content
The alt text entirely depends on the context and what you are trying to describe through the image. The following image, from Sally’s profile on our website, could have a number of different descriptions.
“Sally and her cat Abebe go for a walk through the village” or “A woman dressed in jeans, red top and jacket walks down a street in the sunshine” are both acceptable as alt text, depending on what aspect of the image is being used to illustrate the text.
Functional images
If the image is wrapped in a link, you should usually use the alt text to tell the user where the link points to.
In this case the images are links to the staff profiles, so we might use an alt text to explain this: “Read Paul's profile”.
Using images to display text
If the image is of some text, you should usually use the same text in the alt text. In the example below the alt text of the image repeats the words in the image “Drupal for Developers”.
The image contains the words Drupal for Developers, and the alt text reads alt="Drupal for Developers" .
When is it ok not to use alt text?
Rarely.
Ok, it is a bit more complicated than that.
If an image is purely decorative or for layout and adds no additional instruction or information you can consider leaving the alt tag empty. The presence of an empty alt tag tells the screen reader to ignore it.
WebAim has an excellent article, giving many examples and exploring the subtleties of good alt text.
Summary
Describe as best as possible the purpose of the images in as few words as possible. Because of the markup, it is obvious to users that the alt text is describing an image, so the words “image of” or “graphic of” are repetitious. Equally, there is no need to repeat content in the adjacent text (captions, paragraphs immediately before or afterwards).
Complex images
If you are presenting complex information as images, such as graphs, you should present the same content in non-image form. You could provide this in the caption, as opposed to alt text, making it accessible to all users.
If the information is too complex for a caption you might want to add a link to a full description of the image adjacent to the text.
Adding descriptive alt text (and also naming your image files with clear descriptive titles) also has a small SEO benefit, as it makes it clearer to search crawlers what the page content is about.
Using target keywords in alt text and file names is good practice, but this should be considered alongside how it reads to real humans.
