Corriger « Image sans alternative textuelle » en React

Pourquoi c'est un problème

Un lecteur d'écran annonce le nom du fichier ou rien du tout : l'information portée par l'image est perdue pour les personnes aveugles ou malvoyantes.

Comment corriger — React

Ajoutez un attribut alt décrivant la fonction de l'image. Si l'image est purement décorative, laissez alt vide (alt="") pour qu'elle soit ignorée.

À éviter

<img src={produit} />

Correct

// informative
<img src={produit} alt="Chaise en chêne, vue de trois quarts" />

// décorative
<img src={separateur} alt="" />

Critère RGAA 1.1 — Images

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

Comment vérifier : tests officiels

Test 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 ?
Test 1.1.2
Chaque zone d’une image réactive (balise <area>) porteuse d’information a-t-elle une alternative textuelle ?
Test 1.1.3
Chaque bouton de type image (balise <input> avec l’attribut type="image") a-t-il une alternative textuelle ?
Test 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 ?
Test 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.
Test 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.
Test 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.
Test 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.