Corregir «Imagen sin alternativa textual» en HTML

Por qué es un problema

Un lector de pantalla anuncia el nombre del archivo o nada: la información de la imagen se pierde para personas ciegas o con baja visión.

Cómo corregirlo — HTML

Añada un atributo alt que describa la función de la imagen. Si es puramente decorativa, use alt vacío (alt="") para que se ignore.

Evitar

<img src="/produit.jpg">

Correcto

<!-- informative -->
<img src="/produit.jpg" alt="Chaise en chêne, vue de trois quarts">

<!-- décorative -->
<img src="/separateur.svg" alt="">

Criterio RGAA 1.1 — Images

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

Cómo verificarlo: pruebas oficiales (en francés)

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.