Accessibility for images and illustrations

Content or subject matter in images and illustrations must be accessible to all users. In practice, this means that all images and illustrations must also have a text alternative that describes the image’s subject. In documents this is called alternative text, and on HTML pages the abbreviation alt-text is used.

To “describe the image’s subject” you can imagine how you would describe the image to a friend you are talking to on the phone.

The exception is if the image or illustration is purely decorative or used only as part of graphic design. Then it has no relevant meaningful content and is considered decorative. Decorative images should not have alt-text.

Complex images — that is, images with a lot of meaningful content, diagrams, charts, maps and similar — must have both a short text alternative that describes the image’s subject and a detailed text alternative that provides the same information as the image.

How to meet the universal design requirements for images

Alt-text in HTML

In an HTML editor an image tag (<img>) will always have an alt attribute created automatically. Before you add the actual alt-text this attribute will either be empty or inherit the file name. An empty alt-text looks like this:

With alt-text it looks like this:

Now a screen reader or other assistive technology can convey the image’s subject to all users.

In Canvas you can easily add alt-text using the image options in the editor, or you can use Ally.

See also module 4.

Decorative images

Decorative images — that is, images without relevant meaningful content — should also have an alt attribute, but it should be empty, like this:

This causes assistive technologies to ignore the image. Mark an image as decorative in the same dialog where you add alternative text (alt-text). Typical decorative images are illustrations used only as decoration, icons, logos, or lines and boxes used to build graphic design.

Images used as links

If you use the image as a link, the link’s destination should be described first in the alt-text, then optionally the image’s subject.

Here the example shows that the link target is another HTML page about Exphil in Bali. (The link itself has a separate html tag (<a href>) and is not shown in the example). The rest of the alt-text describes the image’s subject.

A good rule is always to place a link with a descriptive link text and the link target under the image. If the link text is fully descriptive, as it should be, a linked image should have an empty alt attribute. This avoids creating confusion for users of assistive technologies. In other words, mark the image as decorative in that case.

Images of text

Images of text must have alt-text that matches the text in the image. But text as an image should be avoided whenever possible.

An exception is text that is more practical to include in an image, for example in visualized datasets (charts and similar). Then place the text directly on the image as a supplement to the graphics. In addition, use an alt-text that describes the subject, purpose or main information of the image. At the same time you must present the detailed information as a detailed text alternative, preferably in a table.

Complex images

Complex images are images that contain too much information to be described in a single sentence. For example:

Images with a lot of meaningful content
Diagrams
Charts and statistics
Maps, timelines and similar

Such images must have a short alt-text to describe the image’s subject. In addition the image must have a detailed text alternative, meaning a detailed textual representation of the image’s main content. Add this as text, a bullet list or a table in connection with the image.

Pie chart showing the most used web browsers 2021

^{Illustration taken from The Authority for Universal Design of ICT's solution proposal for images and graphics}

Here the alt-text in the code is: alt="Pie chart showing the most used web browsers 2021"

The detailed text alternative is created as a bullet list:

Firefox 45.0%
Internet Explorer 26.8%
Chrome 12.8%
Safari 8.5%
Opera 6.2%
Other 0.7%

In short

Images must have a text alternative. On websites and in documents the text alternative is called alternative text or alt-text. The text alternative should briefly describe the image’s subject and thereby give the user the same information the image provides visually.

Complex images should have both a short text alternative that describes the image’s subject and a detailed text alternative that provides the same, expanded information as the image.

Images that are purely decorative should be marked as decorative.

Why is it important to provide users with a text alternative?

With alternative text, and possibly a detailed text alternative, assistive technology can present non-text content in a way that suits the user’s needs. This is therefore useful for all users, not only those who depend on assistive technologies.

The difference between caption, alternative text and detailed alternative text

You can add a caption under the image, but this is not the same as an alternative text (or alt-text). Alternative text is added in the HTML or document code and becomes visible on the screen if users turn off image display. Alternative text is also read by a screen reader. Alternative text should describe the image’s subject. A caption may also convey the purpose of the image, context, associations, source or other information.

Exphil in Bali. View of beach and sea with a blue, cloudless sky

^{Exchange program in Bali. Photo: Wikimedia commons}

Here the caption is what you see under the image: "Exchange program in Bali. Photo: Wikimedia commons". The alt-text is entered as "The image shows a beach with azure blue sea and a blue sky."

For complex images a detailed text alternative can be created as body text or a table in connection with the image. A detailed text alternative is a detailed textual representation of the image’s main content.

Recommendations beyond the requirements

It can be useful for users to know whether an image is a photo, an illustration or a graphic. You should add this information consistently at the end of the description, since the subject (or link target) should come first.

Relevant links

UiO guidance for use of images (uio.no) (Norwegian)

Requirement

Meaningful images must have a short text alternative that describes the image’s subject, for example an alt-text.

Complex images must have both a short text alternative that describes the image’s subject and a detailed text alternative that provides the same information as the image.

Linked images must include information about the link destination.

Decorative images must have an empty alt attribute (be marked as decorative).

WCAG standard: 1.1.1 Non-text content (uutilsynet.no)

WCAG standard: 1.4.5 Images of text (uutilsynet.no)