Accessibility: Image Alt text best practices
By Gugga HC
Images and graphics make content more pleasant and easier to understand for many people, in particular, those with cognitive and/or learning disabilities. They serve as cues for people with visual impairments, including people with low vision, to orient themselves in the content.
Adding an image or a graphic to your content without using proper or empty alternative attributes (alt tags), can be extremely frustrating for people with visual impairments navigating your site through assistive technologies. Images alternatives add valuable information for low vision or blind screen reader users.
This article is intended to outline best practice examples of image alt tags to help you implement these tags properly on your website.
When using image alt text, it should not include:
- "picture of"
- "image of"
Screen readers automatically announce an image as an image. So an alternative text “Image of an apple” would be read aloud by a screen reader as “image, Image of an apple”.
Alt text for informative images
If the image is a photograph, drawing or painting, the alt text needs to describe the image as concisely as possible. Having long alt text will result in poor user experience for those using screen readers. If the image requires a lengthier description, it is better to describe the image in the content and provide a short alt text.
For example, if the image below of King Henry VIII of England were used in an article about the history of the Royal family of England, the alt text should simply describe the image.
HTML: <img src="/images/kinghenry.jpg" alt="King Henry VIII of England" />
As another example, the alt text below describes an image of a park:
HTML: <img src="/images/NYCpark.png" alt="Aerial view of Central Park in New York" />
Alt text for decorative images
Decorative images are images that serve no specific purpose, meaning that they are not meant to convey any meaning or important information. In this case, it is best practice to use what is called the NULL alt text or empty alt text.
<img alt=""> (two quotation marks after the alt=)
HTML: <img src="/images/background.png" alt="" />
Note that the alt attribute is still present, even though it is empty. When a screen reader comes across null alt text, it will completely skip over the image, without announcing its presence. If no alt attribute is present, the screen reader will read the file name for the image instead, which can be a major distraction to those using screen reading technology.
Image with text
According to WCAG, images of text are not allowed. If you cannot avoid images of text, its best to have the exact same text in the alt attribute.
For example, for the alt text of this non-linked image you could use the words in the image itself:
HTML: <img src="/images/brownfoxlazydogV2.png" alt="The quick brown fox jumps over the lazy dog" />
(Source of the quick brown fox jumps over the lazy dog image)
Functional images (Linked image)
Functional images are used to initiate actions rather than to convey information. They are used in buttons, links, and other interactive elements. The text alternative for the image should convey the action that will be initiated (the purpose of the image) rather than a description of the image.
Missing or empty alt values create significant problems for screen reader users because functional images are essential to the functionality of the content. Screen readers will typically announce the image file name, the image URL, or the URL for the link destination, which is unlikely to help users understand the action that will be initiated by the image.
Example 1: Image used alone as a linked logo
The following image contains a link that leads to Siteimprove's webpage and is shown without any other link text. It has the alternative text "Siteimprove home" to indicate where the link will take the user.
<img src="siteimprove.png" alt="Siteimprove home">
Example 2: Image within link text
In this example, an image is used to supplement text within a link that leads to Siteimprove's website. The image does not represent the full functionality or convey other information than that already provided by in the link text, so a null (empty) value is applied (alt=""), to avoid redundancy and repetition.
<img src="siteimprove.png" alt="">