„Bild ohne Textalternative“ in Angular beheben

Warum das ein Problem ist

Ein Screenreader liest den Dateinamen oder gar nichts vor: Die Bildinformation geht für blinde und sehbehinderte Menschen verloren.

So beheben Sie es — Angular

Fügen Sie ein alt-Attribut hinzu, das den Zweck des Bildes beschreibt. Ist das Bild rein dekorativ, verwenden Sie ein leeres alt (alt="").

Vermeiden

<img [src]="produit">

Korrekt

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

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

RGAA-Kriterium 1.1 — Images

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

So prüfen Sie: offizielle Tests (auf Französisch)

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.