Accessible Images: The Complete Guide

Why accessible images are a major issue

Images play a wide variety of roles on the web. They can illustrate a point, convey information, guide navigation, or enhance the attractiveness of an interface. For people who use screen readers, such as those who are blind or visually impaired, an image only exists if a text equivalent accompanies it. Without this, the voice assistant will simply announce “image” or read the file URL, which does not convey any useful information.

People who are color blind also encounter difficulties when an image relies solely on colours to deliver a message. Finally, some people with cognitive impairments benefit from clear descriptions, which make it easier for them to understand the role of the image.

Ensuring the accessibility of images enables everyone to receive the same information, and it is also a legal requirement. The WCAG (1.1.1, 1.4.5, 1.4.3) and RGAA (criteria 1.1 to 1.9) standards require that all important non-text content have an understandable alternative.

When and how to describe an image

The first question to ask is: Does the image provide the user with helpful information?

  • If the image is informative (such as a photo, graphic, or icon that conveys an action), it must have a relevant text alternative.
  • If the image is decorative (a purely visual icon, a graphic motif), it should be ignored by assistive technologies.
  • If the image is complex (such as a detailed diagram, infographic, or data chart), a brief summary is necessary, accompanied by a detailed description or equivalent data.
  • Finally, if the image contains text, it must be replaced by real HTML text, except in exceptional cases such as logos.

 

Here is an example of content containing decorative images:

List of ingredients including tomatoes, olive oil and basil

Here, the images next to the words tomatoes, olive oil, and basil do not provide any additional information. They should therefore be ignored by assistive technologies to avoid redundancy in the reading of information for visually impaired users.

Best practices in HTML

1- Provide relevant alternative text

For an informative image, the alt attribute remains the most robust method. This text should be short and precise, describing the essentials.

<img src=”sales-2024.png” alt=”2024 sales increased by 20% over 2023″>

The title attribute does not replace the alt attribute: it is unreliable because screen readers often ignore it.

2- Hide decorative images

A screen reader should not read a decorative image. To do this, use an empty alt attribute (alt=“”). It is also possible to add aria-hidden=“true” to reinforce the hiding.

You will have either:
<img src=”ornament.png” alt=””>
Or:
or <img src=”ornament.png” aria-hidden=“true”>

It is important not to use alt=“” with a space, as this practice is incorrect.

3- Precision for clickable images

If an image is the only content of a link or button, the alternative text must describe the destination or action. However, if the image is accompanied by text in the same link, the image must be hidden to avoid redundancy.

Special case: SVGs

SVGs are being used increasingly to represent icons or graphics. Their accessibility depends on the context.

  • A decorative SVG, such as an arrow next to a button, should be excluded from the accessibility tree:
    <svg aria-hidden=“true” focusable=”false” width=”16″ height=”16″
    <path d=”M…”/>
    </svg>     
  • An informative SVG, such as a diagram or functional pictogram, must have a name accessible via a <title> tag and possibly a <desc> tag.
    <svg role=”img” aria-labelledby=“t1 d1”>
    <title id=”t1″>Sales distribution by region</title>
    <desc id=”d1″>Île-de-France 40%, PACA 30%, AuRA 20%, others 10%.</desc>
    <path d=”M…”/>
    </svg>


The choice between masking and description, therefore, depends on the role of the image.

Complex images

A graph or map cannot be summarized solely in an alt attribute. This attribute must contain a summary of the key message, for example, “Sales are up 20% in 2024.” A more detailed description must then be provided in the page text or in an associated section (such as a <figcaption> or data table).

The special case of maps

Il s'agit d'un exemple d’une carte interactive de la revue française de généalogie, qui ne fournit pas d’alternative accessible aux usagers.

Maps are a prime example of complex images, since they combine geographical, topographical, and sometimes interactive information. A simple text description cannot always convey all of this rich information, but it is necessary to provide at least the essential elements.

  • Informative map: if the map contains useful data (e.g., election results by region or the areas covered by a service), a textual alternative must describe this information. Ideally, the image should be accompanied by a table displaying regional data or a text list enumerating the affected areas.


In the example below, filling in the Alt tag is not enough. For example, a longdesc attribute must be added, providing the URL of a page with a detailed text description. There could also be a link or button next to the image that leads to the detailed description.

infographie seloger sur la situation française du marché de la location.
  • Interactive map (Google Maps, floor plan, route map): the map must be ignored by assistive technologies (attribute aria-hidden=true) and a text alternative must be provided with the same level of information. For an itinerary, this means providing a text version of the directions (“Turn left onto Rue de la République, continue for 300 m, then…”); for a floor plan, a list of locations and corresponding access points must be provided.


In other words, the richer the map, the more detailed the alternative must be. The user must be able to obtain, without seeing the map, either the main message or all the data it contains, depending on the context.

Text images

The WCAG and RGAA standards prohibit the use of images containing text, except when there is no other option (e.g., for a logo). Real text, formatted with CSS, should always be preferred.

Bad practice

<img src=”promo.png” alt=”50% off this weekend”>

Good practice

<h2 class=”promo”>50% off this weekend</h2>

When a text image cannot be replaced, it must at least comply with contrast ratios (4.5:1 for normal text and 3:1 for large text).

Here is a list of exceptions that are not affected by this ban on image text:

  • The text is part of a logo or brand name of an organization or company;
  • The text or text image is purely decorative;
  • The text is part of an image conveying information, but the text itself does not provide any essential information;
  • The text or text image is part of an interface element on which no action is possible (e.g., a button with the disabled attribute).

What to avoid at all costs

  • aria-label=“hidden” is not a valid value. To hide an image, aria-hidden=“true” is the correct method. 
  • Avoid vague alt text, such as “image” or “graphic,” which conveys no useful information.
  • Don’t leave an empty alt text by mistake on an informative image.
  • Assigning a presentation role (role=“presentation”) to an interactive or focusable element will be ignored.

Conclusion

Image accessibility is based on a simple rule: each image must be treated appropriately according to its purpose or role. If it provides information, it must be described. If it is decorative, it must be hidden. If it is complex, it must be accompanied by a detailed description. And if it contains text, this text must be provided in real HTML text.

By applying these best practices, all users, regardless of their disability, can access the same information. This approach enhances the user experience for all users and meets the requirements imposed by the RGAA and WCAG.

Book
a discovery call

Assess the extent of your digital accessibility, development, or branding needs

Get concrete ideas for areas of improvement

Benefit from our expert advice, in-depth experience, and strategic vision in the field

Book a discovery call

Free • 45 minutes • Online