Alternative text is essential for conveying non-text information. You should describe the purpose of the images in as few words as possible.
While it is essential that we provide a text version of any non-text content, there are a number of techniques to do so. You can communicate the meaning in the surrounding (preferably adjacent) text, or you can use the HTML attribute known as alt text.
Alt text 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 rely on the text alternatives to tell the user what is there - if there is no alt text a screen reader will read out the file name, which is often nonsense.
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.
Context is key
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.
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.
Images of 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”.
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.
For more examples see W3's guidance on complex images
When is it ok not to use alt text?
Imagine you are reading the web page to someone who needs to understand the content. If you would skip the image entirely because it gives no meaning, it's probably safe to treat it as decorative.
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.
Alt text and Search Engine Optimisation (SEO)
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.
Tips
- The alt text needs to serve an equivalent purpose
- Be concise and use punctuation
- Don't use the words "image", "icon" or "graphic"
Testing tools
Automatic tools can tell you when there is no discernable text, but can't tell you how accurate the text is. However the Sa11y bookmarklet scans the page and gives helpful feedback.