Aller au contenu principal
Logo RGAA CheckerRGAA Checker
Critère 1.1

Images porteuses d'information

Chaque image porteuse d'information doit avoir une alternative textuelle pertinente.

En Bref : L'essentiel à retenir

  • Pour rendre les images accessibles aux utilisateurs de technologies d'assistance, il est essentiel d'ajouter des alternatives textuelles.
  • Pour les images HTML (<img>), l'attribut 'alt' est obligatoire et doit décrire l'image.
  • Les images SVG doivent avoir un rôle et une description accessible via 'aria-label' ou 'title'.
  • Les images via CSS (background-image) nécessitent un rôle et une alternative ARIA sur le conteneur, et les éléments <canvas> doivent inclure un contenu de repli.

Objectif

Permettre aux utilisateurs de technologies d'assistance (lecteurs d'écran, plages braille) d'accéder à l'information véhiculée par les images. Une image sans alternative est invisible pour ces utilisateurs.

Solution Technique

1. Images HTML (<img>)

L'attribut alt est obligatoire pour toutes les images <img>.

<!-- ✅ Correct : Image porteuse d'information -->
<img src="logo-acme.png" alt="Logo Acme Corp" />

<!-- ✅ Correct : Image fonctionnelle (lien) -->
<a href="/">
  <img src="home.png" alt="Accueil" />
</a>

2. Images SVG (<svg>)

Les SVG doivent avoir un rôle et une description accessible.

<!-- ✅ Correct : SVG avec aria-label -->
<svg role="img" aria-label="Graphique des ventes 2023" viewBox="...">
  <!-- chemins... -->
</svg>

<!-- ✅ Correct : SVG avec title -->
<svg role="img" viewBox="...">
  <title>Icône de recherche</title>
  <path d="..." />
</svg>

3. Images via CSS (background-image)

Les images porteuses d'information ne devraient pas être insérées via CSS. Si c'est le cas, ajoutez un rôle et une alternative via ARIA sur le conteneur.

<!-- ✅ Correct : Image CSS avec sémantique -->
<div role="img" aria-label="Bannière promotionnelle : -50% sur tout le site" class="hero-banner"></div>

4. Éléments <canvas>

Les éléments canvas doivent avoir un contenu de repli (fallback).

<canvas>
  <!-- Contenu de repli pour lecteurs d'écran -->
  <p>Graphique montrant l'évolution du CA : +20% en 2023.</p>
</canvas>

Ressources