Fix "Image without text alternative" in Vue

Why it's a problem

A screen reader announces the file name or nothing at all: the information the image conveys is lost for blind and low-vision users.

How to fix it — Vue

Add an alt attribute describing the image's purpose. If the image is purely decorative, use an empty alt (alt="") so it is ignored.

Avoid

<img :src="produit">

Correct

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

<!-- décorative -->
<img :src="separateur" alt="">

RGAA criterion 1.1 — Images

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

How to check: official tests (in French)

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.