Accessibility: Image Alt text best practices
Article Overview:
- Siteimprove Tech Talk video: Demystifying accessible names
- Basic rules of alt text
- Alt text for informative images
- Alt text for decorative images
- Image with text
- Additional resources
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. Image alternatives also benefit people who have poor or unstable internet, some cognitive disabilities and it can also improve the SEO of a website.
This article is intended to outline best practice examples of image alt tags to help you implement these tags properly on your website.
Siteimprove Tech Talk video: Demystifying accessible names
Basic rules of alt text
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”.
Using correct grammar can enhance the experience for screen reader users:
- Capitalize the first letter
- End whole sentences with a period
Alt text for informative images
Informative images are any images that add to the context of a page. If the content of a page would suffer if an image was removed, then that image is informative and therefore needs an alt text.
The alt text needs to describe the image as concisely as possible. As a rule of thumb: avoid writing text alternatives longer than 100 characters. Having long alt text will result in a 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 shorter alt text.
Well-written alt text can create a fulfilling and inclusive experience for people using assistive technology.
To write a good alt text consider the context of the image. Which additional content is it supporting? Which details are important in the image? The alt text should match the tone of voice of the accompanying content.
Contrary to popular belief, alt text does not need to be an objective description, it can convey nuances, details, and emotions if they are relevant to the user experience.
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, a decent alt text could simply describe the image as “alt=”King Henry VIII of England.”. To create a more rich experience the alt text could be “King Henry VIII of England looking stern and wearing lavish royal clothing.”.
If this same image was used in a different context: an article focusing on royal fashion in the XX century England an appropriate alt text could be “King Henry VIII of England wearing a fur-trimmed hat and cape, bedazzled shirt and golden jewelry.”
HTML:
<img src="/images/kinghenry.jpg" alt="King Henry VIII of England." />
(Source of King Henry VIII of England Image)
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." />(Source of Aerial view of Central Park in New York image)
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.
HTML:
<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.
HTML:
<a href="https://www.siteimprove.com/">
<img src="siteimprove.png" alt="Siteimprove home">
</a>
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.Siteimprove Home
HTML:
<a href="https://www.siteimprove.com/">
<img src="siteimprove.png" alt="">
Siteimprove Home
</a>
Additional resources
Did you find it helpful? Yes No
Send feedback