The most accessible format for any content on the web is plain text. Plain text is incredibly malleable, it can be altered in ways to cater to almost any disability. For users with no visual difficulties, they can simply read the text. If a user has visual impairments, the text can be converted to speech. Even if a user has both visual and auditory difficulties, plain text can be converted to braille.
However, most websites are not made up of pure text. We have other types of content that is not so malleable, like images. To make these alternative forms of content more accessible, we need to provide a text alternative of them.
For images, this is typically provided using the
alt attribute. As a blanket rule, all images should have an
alt attribute. This, however, does not mean that actual alternative text needs to be provided for every image. There are three states we can have for the
alt attribute -
Defined - Where actual descriptive text is provided in the attribute, e.g.
alt="A dog". In this case, a screen reader will read the text provided when the user comes across the image, and usually give the context that it is an image.
Null - Where the attribute is written but left empty, e.g.
alt="". In this case, a screen reader will skip over the image entirely as if it never existed.
Invalid (bad practice) - Where the attribute is skipped entirely. In this case, a screenreader will read the value of the
srcattribute instead. Having this happen is never useful to the user, so it is advised that no images remain in this state.
In this article, we will go over when each of the first two states is suitable, and how different types of alternative text should be used.
Alternative Text for Different Image Types
Broadly, there are 7 types of images. The way we handle alternative text is different for each.
1. Images of Text
As a general rule, images of text should be avoided, the only exception to this being for logos. Due to the flexibility of CSS, we can now recreate pretty much any visual styling to plain text. So, using an image of text may only be needed in the rarest of circumstances.
In these rare cases, the best practice is to repeat the text of the image in the
alt attribute. This will give screen reader users essentially the exact same experience as visual users.
<img src="example.jpg" alt="The quick brown fox jumped over the lazy dog">
2. Informative Images
Informative images are images that, as you would guess, provide some information. This information can be anything from a label, to supplementary information, to just an impression.
For informative images, the alternative text should convey the same information that the image does. This might be as simple as one word saying what the image is. For example, in the image below, images are used to label each section.
<section> <h2><img src="location.png" alt="Location"></h2> <p>26 Eletu Ogabi...</p> </section> <section> <h2><img src="cutlery.png" alt="Cuisine"></h2> <p>Continental</p> </section> <section> <h2><img src="clock.png" alt="Opening Hours"></h2> <p>Monday 12:00 - 22:00 ...</p> </section>
If the information that the image is conveying is more of an impression, then a physical description of the contents of the image may not be appropriate. Instead, we can provide the feeling that the image is trying to convey in the alternative text instead.
For example, on a website for dog sitters, the image below might be on the about page.
The purpose of this image in that context is to show that the dogs have fun while they are there, so the alternative text should convey this feeling.
<img src="example.png" alt="Your dogs will have the best time!">
3. Functional Images
Functional images are those that represent an action to be taken. Unlike informative images, which purely provide information for the user, functional images are used convey something actionable. These images are also typically tied to interactive elements such as links or buttons. For functional images, the alternative text should clearly communicate the action that is to be taken.
In the example below, the button used to filter the restaurants is represented by an image, so the alternative text displays the function of the button.
<img src="example.png" alt="Filter Restaurants">
4. Decorative Images
Decorative images are images that don’t convey any actual/actionable information to the viewer. Their purpose is purely styling. For example, a background pattern on an element does not provide any informative value to the user.
In these cases, an empty
alt attribute should be provided. This allows the image to be simply skipped by the screenreader since it is of no use to a user with visual impairments.
<img src="background.png" alt="">
5. Complex Images
Complex images, a type of informative image, are those that contain a very detailed and substantial amount of information. For example bar charts or graphs. For these images, it is suggested that we provide both short and long descriptions.
The short description should be provided via the
alt attribute. The long description can be defined in some other element, and simply referenced using the
aria-labelledby attributes, or by using the
Here are the short and long descriptions for this image using the
<figcaption> elements -
<figure role="group"> <img src="customers.png" alt="Line chart showing the number of customers over a period of 12 weeks"> <figcaption> In the first week, there were 13,000 customers. This slowly rose over the next few weeks, then rose drastically in week 4 to 37,000 customers. This was maintained until week 7, where there were less than 10,00 customers. In week 8, the number of customers rose again to 35,000, but this dropped back down in week 9. Since then, the number of customers has risen, and in week 12 there were 50,000 customers. </figcaption> </figure>
Alternatively, we can use the
<img src="customers.png" alt="Line chart showing the number of customers over a period of 12 weeks" longdesc="#customers-chart-desc"> <p id="customers-chart-desc"> In the first week, there were 13,000 customers. This slowly rose over the next few weeks, then rose drastically in week 4 to 37,000 customers. This was maintained until week 7, where there were less than 10,00 customers. In week 8, the number of customers rose again to 35,000, but this dropped back down in week 9. Since then, the number of customers has risen, and in week 12 there were 50,000 customers. </p>
We can also achieve the same thing using the
aria-labelledby attribute in place of
longdesc, which works in the same way.
6. Groups of Images
There are cases where more than one image is used together to convey a single piece of information. For example, a 5-star rating can be represented by a group of individual star images.
In these cases, the information conveyed by the group of images together should be added to the
alt text of just one of the images, and the rest should be left as null.
<img src="star.png" alt="4 out of 5 stars"> <img src="star.png" alt=""> <img src="star.png" alt=""> <img src="star.png" alt="">
7. Image Maps
Finally, image maps are images that are divided into multiple sections each with their own interactive area. They are created by combining the
For these types of images, it is advised that a defined
alt attribute be provided for the
<img> element, as well as each individual
<img src="orgchart.png" alt="Board of directors and related staff: " usemap="#Map"> <map id="Map" name="Map"> <area shape="rect" coords="176,14,323,58" href="[…]" alt="Davy Jones: Chairman"> […] <area shape="rect" coords="6,138,155,182" href="[…]" alt="Harry H Brown: Marketing Director (reports to chairman)"> [ </map>
Example from W3C WAI Tutorials
When and How should you use
As with everything, when and what
alt to use is also dependent on the context, not just the type of image. When deciding what to use, we should ask the following questions -