Alternative Text and Images

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 -

1. 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.

2. 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.

3. Invalid (bad practice) - Where the attribute is skipped entirely. In this case, a screenreader will read the value of the src attribute 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.

Image Source

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 longdesc/ aria-labelledby attributes, or by using the <figure> and <figcaption> elements.

Here are the short and long descriptions for this image using the <figure> and <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 longdesc attribute.

<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 <img> and <map> elements.

For these types of images, it is advised that a defined alt attribute be provided for the <img> element, as well as each individual <area>.

<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 alt? #

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 -

1. Is the image of text? If yes, repeat the same text in the image in the alt attribute. For example, alt="Same text as in image".
2. Is the image purely decorative or for styling purposes? If yes, set the alternative text to null, so it will be ignored by screen readers. For example, alt="".
3. Does the image represent an action the user can take? If yes, write out the action that will be taken when the user interacts with the element. For example, alt="Add to Cart".
4. Is the image purely informative? If yes, the alternative text should convey the same information as the image. For example, alt="Location".
5. Finally, does the image convey any information that is not also represented on the page as text? If yes, the alternative text should convey the same information as the image. If no, set the alternative text to null, so it will be ignored by screen readers.