Accessible images

The internet is full of images, with millions added every day. We share holiday photos, send each other funny pictures and summarise information in infographics. But what if a visitor cannot see them? How do you make images accessible?

This article covers:

• Text alternatives
• Decorative images
• Functional images
• Complex images
• Images of text
• Colour in images
• Animations and GIFs

Text alternatives

If an image communicates information, make that information available in a form assistive technology can use. This is called alternative text, or alt text.

The alt attribute

HTML uses the img element for images. The term alt text comes from its required alt attribute, which provides a brief description of the image’s purpose.

What belongs in alt text?

The text depends on why you use the image.

Most images support existing text. In these cases, describe the intended meaning rather than just the image’s appearance.

If you share a photo of your cat watching a butterfly, a description of the photo is enough. The code could look like this:

<img
	src="./kat.jpg"
	alt="Een zwart-witte kat staart naar een vlinder op z'n neus." 
/>

If you use a photo to demonstrate a technique, the alternative could look like this:

<img
	src="./tegenlicht.jpg"
	alt="Deze silhouette opname van twee mensen
		 tegen de oranje avondlucht ontstaat door de 
		 belichting af te stellen op de fellere
		 achtergrond." 
/>

How long should alt text be?

As short as possible, but as long as necessary.

Many screen readers announce an alternative in one go, and not all let people navigate it sentence by sentence. Keeping it brief is advisable.

If a longer explanation is needed:

• Put the description in the page text so everyone can use it.
• Use a figure element with a caption.
• Use aria-describedby="" to refer to more information elsewhere.

Writing alt text

Screen readers often announce alt text in one go, even if it contains several sentences. Use correct sentences, grammar and punctuation to make it understandable.

The screen reader already identifies an image. Phrases such as “image of” are usually unnecessary.

Decorative images

When is an image decorative?

Decorative images add no information, for example because the surrounding text already provides it. Images used purely for visual design are decorative too.

People with visual disabilities have different preferences. Some appreciate descriptions of photos even when they add no new information, because they provide a more complete impression of the page. Others prefer a strict distinction.

Editors make the final choice. Be consistent so visitors know what to expect.

Marking img elements as decorative

Mark decorative img elements with an empty alt attribute. They will then be ignored by assistive technology.

<img
	src="./decoratief.png"
	alt="" 
/>

<a href="circus.html">
	<img
		src="./circustent.jpg"
		alt="" 
	/>
	Jaarlijkse circus op het marktplein
</a>

Functional images

Functional images appear in buttons and links. Their alternatives matter particularly when there is no visible text.

Without an alternative, screen reader users may not know what a button does. Describe its action or destination rather than its appearance.

Examples:

• A logo often links to the homepage. Use “Company X, homepage” rather than “Company X logo”.
• A magnifying glass may represent search. Use “Search”, not “Magnifying glass”.

SVG images

SVG images are often used for functional purposes. They use less data than ordinary raster images and scale without losing sharpness.

An SVG can be displayed through an img element or embedded directly as svg. An inline SVG does not use an alt attribute.

Give an inline SVG role="img" and an aria-label containing its text alternative.

<svg role="img" aria-label="alt-tekst"> ... </svg>

An SVG’s title element can also provide a name, although support is not always reliable. Give the title an id and reference it from the SVG with aria-labelledby.

<svg role="img" aria-labelledby="titleId">
  <title id="titleId"> alt-tekst </title>
  ...
</svg>

Complex images

An image can contain enough information to need several paragraphs of explanation.

Complex images include:

• Charts
• Diagrams
• Organisation charts
• Flowcharts
• Maps and navigation materials

Provide a more detailed description for these images.

There are several ways to provide a detailed description and make it available to screen readers.

In the alt attribute

Keep the alt attribute brief. It is not suited to a full paragraph, but it can tell people where to find the longer description. For example:

<img
	src="./grafiek.jpg"
	alt="Lijngrafiek toont het verloop van het
		 aantal leden over het seizoen 2020-2021.
		 Een volledige beschrijving staat onder
		 de kop Ledenverloop 2020-2021 " 
/>

As a link beside the image

You can place a link next to the image that leads to its detailed description.

<img
	src="./grafiek.jpg"
	alt="Lijngrafiek toont het verloop van het
		 aantal leden over het seizoen 2020-2021." 
/><br/>
<a href="ledenverloop.html">Beschrijving ledenverloop 2020-2021</a>

Using the figure element

HTML5 provides figure with its associated figcaption element to connect an image and a description.

<figure>
  <img
	src="./grafiek.jpg"
	alt="Lijngrafiek toont het verloop van het
		 aantal leden over het seizoen 2020-2021." 
	/>
  <figcaption>
	<a href="ledenverloop.html">Beschrijving ledenverloop 2020-2021</a>
  </figcaption>
</figure>

A figcaption can contain ordinary HTML markup. You could use it for an expandable description, for example.

<figure>
  <img
	src="./grafiek.jpg"
	alt="Lijngrafiek toont het verloop van het
		 aantal leden over het seizoen 2020-2021." 
	/>
  <figcaption>
	<h3>Beschrijving ledenverloop 2020-2021</h3>
	<p>...</p>
  </figcaption>
</figure>

Using aria-describedby

The aria-describedby attribute references the id of another page element containing the longer description.

Screen readers announce the referenced content as plain text. They do not expose its headings, lists or other structure through this description.

<img
	src="./grafiek.jpg"
	alt="Lijngrafiek toont het verloop van het
		 aantal leden over het seizoen 2020-2021."
	 aria-describedby="idWaarde"
/>
<p id="idWaarde">Beschrijving ledenverloop 2020-2021 ...</p>

Images of text

Some images contain text intended to be read, such as an event flyer.

Make sure that information is available on the page or through alternative text.

For text used as part of a design, use CSS where possible. Real text can be read aloud, customised and enlarged cleanly.

If an image is used to present text, its alternative needs to contain the same text.

Colour in images

Communicating through colour

Do not rely on colour alone to communicate information. People with low vision or colour blindness may not distinguish it. Custom colour schemes or high-contrast settings can also change the colours.

Use different patterns for chart lines or bars so they remain distinguishable without colour.

Contrast in images

Images that communicate information or actions need enough contrast. WCAG generally requires at least 3:1 against the background.

If accompanying text conveys the meaning and meets its contrast requirement, 4.5:1 for normal text, the image’s contrast requirement no longer applies.

Animations and GIFs

Short animated images, often called GIFs, have become increasingly popular.

Alt text for animations

The same principles apply as for other images: communicate the meaning. Depending on the context, describe what happens or summarise your reaction if the animation is used that way.

Other considerations for animations

Besides alternative text:

• Avoid automatically playing long animations and respect the visitor’s motion preferences using prefers-reduced-motion.
• Avoid rapid bright flashes that could trigger seizures. WCAG sets requirements, including a maximum of three flashes per second.