Thématique 1 · Images

Critère RGAA 1.1 : Alternative textuelle des images

Un lecteur d'écran ne peut pas « voir » une image : sans alternative textuelle, une personne aveugle perd l'information qu'elle porte (graphique, bouton, logo cliquable…).

Niveau

A

WCAG 2.2

1.1.1

Thématique

Images

Vérification

Détecté automatiquement

La question posée par le RGAA

Chaque image porteuse d’information a-t-elle une alternative textuelle ?

Comment respecter ce critère

• Donnez à chaque image porteuse d'information un attribut alt qui transmet la même information.
• Pour une image-lien ou un bouton image, décrivez la destination ou l'action, pas l'image elle-même.
• Pour une image SVG porteuse d'information, ajoutez role="img" et une alternative (aria-label ou élément title).

Exemple

Une image porteuse d'information n'a pas d'alternative textuelle : son sens est perdu pour les lecteurs d'écran.

<img src="graphique-ventes.png">

<img src="graphique-ventes.png" alt="Ventes 2025 : +18 % au T4">

Les tests officiels

Pour être conforme, chaque élément concerné de la page doit satisfaire les tests suivants :

1. 1.1.1 — Chaque image (balise <img> ou balise possédant l’attribut WAI-ARIA role="img") porteuse d’information a-t-elle une alternative textuelle ?
2. 1.1.2 — Chaque zone d’une image réactive (balise <area>) porteuse d’information a-t-elle une alternative textuelle ?
3. 1.1.3 — Chaque bouton de type image (balise <input> avec l’attribut type="image") a-t-il une alternative textuelle ?
4. 1.1.4 — Chaque zone cliquable d’une image réactive côté serveur est-elle doublée d’un mécanisme utilisable quel que soit le dispositif de pointage utilisé et permettant d’accéder à la même destination ?
5. 1.1.5 — Chaque image vectorielle (balise <svg>) porteuse d’information, vérifie-t-elle ces conditions ? (La balise <svg> possède un attribut WAI-ARIA role="img" ; La balise <svg> a une alternative textuelle.)
6. 1.1.6 — Chaque image objet (balise <object> avec l’attribut type="image/…") porteuse d’information, vérifie-t-elle une de ces conditions ? (La balise <object> possède une alternative textuelle et un attribut role="img" ; L’élément <object> est immédiatement suivi d’un lien ou bouton adjacent permettant d’accéder à un contenu alternatif ; Un mécanisme permet à l’utilisateur de remplacer l’élément <object> par un contenu alternatif.)
7. 1.1.7 — Chaque image embarquée (balise <embed> avec l’attribut type="image/…") porteuse d’information, vérifie-t-elle une de ces conditions ? (La balise <embed> possède une alternative textuelle et un attribut role="img" ; L’élément <embed> est immédiatement suivi d’un lien ou bouton adjacent permettant d’accéder à un contenu alternatif ; Un mécanisme permet à l’utilisateur de remplacer l’élément <embed> par un contenu alternatif.)
8. 1.1.8 — Chaque image bitmap (balise <canvas>) porteuse d’information, vérifie-t-elle une de ces conditions ? (La balise <canvas> possède une alternative textuelle et un attribut role="img" ; Un contenu alternatif est présent entre les balises <canvas> et </canvas> ; L’élément <canvas> est immédiatement suivi d’un lien ou bouton adjacent permettant d’accéder à un contenu alternatif ; Un mécanisme permet à l’utilisateur de remplacer l’élément <canvas> par un contenu alternatif.)

Source : RGAA 4.1.2, critère 1.1, DINUM (nouvel onglet), sous Licence Ouverte. Le RGAA précise aussi des cas particuliers et un glossaire à consulter pour un audit officiel.

Comment Accessia le vérifie

Accessia détecte automatiquement les manquements à ce critère : l'analyse en ligne et l'extension Chrome localisent chaque élément en cause et proposent le correctif. Un contrôle humain reste utile pour les cas particuliers.