Images

Understand how to create and test for accessible images.

Note: This is a stub article — it contains a small amount of useful guidance that we hope to expand later. If you would like to contribute to expanding this article, email web.standards@dia.govt.nz.

How to create an image

For guidance on creating, inserting, and using images in web pages, see:

Make an image accessible

Images can make things easier to understand for some users, especially people with learning and reading impairments. But images on their own are also unusable to some people, such as those with vision impairments, and people who have difficulty processing information presented in images.

Text alternatives

Images that convey meaningful information or functionality must have a text alternative — also called alternative text or alt-text — for people who cannot see the image or who need help understanding it. It is a text replacement for the image.

What makes good text alternative depends on the image’s role or purpose in the content.

The Images Tutorial from the W3C’s Web Accessibility Initiative (WAI) explains how to provide text alternatives for different images depending on how they are used.

For more guidance on providing text alternatives, see also:

Meeting the Web Accessibility Standard

When meaningful non-text content, like an image, that is presented to the user has a text alternative that serves the equivalent purpose, it meets WCAG 2 Success Criterion 1.1.1 Non-text content (Level A).

When an interactive element that is made from non-text content, like an image, has a descriptive accessible name, it meets WCAG 2 Success Criterion 1.1.1 Non-text content (Level A).

How long should text alternatives be?

There is no firm limit to the length of alt-text, but as a general rule, it is best to keep it as short and succinct as possible while ensuring that it serves as a replacement for the image, given the image’s purpose or role in the page.

For more, see Just How Long Should Alt Text Be? — CSS Tricks.

Long descriptions

Some images are intended to convey more information than a simple text alternative can provide. Complex images like graphs and diagrams require additional text alternatives — or long descriptions.

Long descriptions need to include all of the meaningful information in the image, but only as far as it relates to the purpose or role that the image plays in the content.

Long descriptions can be implemented in a number of ways. For guidance on how to add long descriptions, see Complex images — WAI Tutorials — W3C.

Alt-text versus caption

Sometimes an image is presented with caption text above or below it. The visible caption text is available to people who can see the image. It is not intended to act as the image’s text alternative. As such, they are not the same thing: An image’s caption and alt-text should be different.

For more on this distinction and how to address it in the context of using the <figure> and <figcaption> elements, see Alt vs Figcaption — thoughtbot.com.

Accessible names and descriptions

Ideally, an image’s text alternative — or text alternatives, should it have a brief alt-text and a long description — will be programmatically associated with it in the HTML. This enables the browser to use those text alternatives as the image’s accessible name and description when it’s exposed in the accessibility tree for assistive technologies (AT).

For instance, the <img> element’s alt attribute value will typically become the image object’s accessible name. A screen reader will identify the object as being an image or graphic, and read out its accessible name.

If the image is complex, like a graph or diagram, and has a programmatically associated long description, this longer text alternative gets exposed in the accessibility tree as the image object’s accessible description.

For more on accessible names and descriptions, and how web pages are made accessible to AT users, see the following Knowledge Areas:

Contrast in images

To be usable by people with low vision or colour blindness:

Meeting the Web Accessibility Standard

When an image of text has sufficient contrast, this meets WCAG 2 Success Criterion 1.4.3 Contrast (Minimum) (Level AA).

When an image’s visual information or meaningful graphical objects have sufficient contrast, this meets WCAG 2 Success Criterion 1.4.11 Non-text Contrast (Level AA).

Use of colour

To support people with colour blindness, make sure that the way an image conveys information visually does not rely on colour alone. That is, in addition to colour, use text, or some other type of mark to visually identify or distinguish meaningful elements in an image.

For more information, see Do not rely on colour alone — Knowledge Area: Colour and contrast.

Meeting the Web Accessibility Standard

When an image uses colour alone to convey information, and that same information is also conveyed in a way that does not use colour, this meets WCAG 2 Success Criterion 1.4.1 Use of Color (Level A).

Other accessibility considerations

Functional images

See the following resources for more information on links and buttons that include icons or images:

Decorative images

For more guidance on text alternatives for decorative or purely presentational images, see:

Animated images

See the following for guidance on animated images:

Images of text

Avoid using images of text where possible. Note that this does not include text in an image that conveys a lot of other important information, such as graphs and photos.

Some people need to modify the presentation of text to make it readable. This is easy to do with actual text, but it’s not usually possible with images of text.

If some text has a particular style or formatting that cannot be delivered by using actual text and CSS, then an image of text can be used. This is often the case with logos and brand names, or where certain uncommon fonts are used.

Meeting the Web Accessibility Standard

When an image of text is used because the text has an essential style or formatting that cannot be recreated using actual text, this meets WCAG 2.1 SC 1.4.5 Images of Text (Level AA).

Text over images

For guidance on putting text over top of an image — as opposed to embedding text in an image — see the following from Smashing Magazine:

SVGs

For guidance on accessible SVGs, visit:

Testing images

Testing text alternatives

  1. Identify what type of image you are testing and refer to the Text alternatives guidance above to understand ideal implementations.
  2. Find the image’s text alternative:
    • Use your web browser’s developer tools to inspect the image
    • Use a browser plugin, such as Chris Pederick’s Web Developer, to view the image's text alternative.
  3. Consider if the image’s text alternative is appropriate:
    • If the image is meaningful, is its text alternative a suitable text replacement?
    • If the image is decorative, confirm that it is hidden from assistive technologies, for example, through the use one of the following attributes:
      • alt=""
      • aria-hidden="true"
      • role="none".

Note: Automated accessibility testing tools can usually detect images that are missing text alternatives. Many of these are available as browser plugins, such as WAVE and axe DevTools.

Testing colour and contrast in images

To check that images of text and graphical objects that are necessary to understand the content have sufficient contrast and do not rely on colour alone, see Testing colour and contrast — Knowledge Area: Colour and contrast.

Testing images of text

To test an image of text, confirm that the visual presentation of the text in the image meets one of the following conditions: