Alle Nicht-Text-Inhalte, die dem Benutzer präsentiert werden, haben eine Textalternative, die einen gleichwertigen Zweck erfüllt.
alt-Text
<img src="/Bild.jpg" alt="Hier steht der alternative Text zu deinem Bild.">
Der Alternative Text wird angezeigt, wenn das Bild nicht angezeigt werden kann.
Dekorative Bilder
<img src="Bild.png" alt="">
Leere alt-Attribute ignorieren Screenreader. Dies ist dann sinnvoll, wenn es sich bei den Grafiken um reine Dekoration handelt. Ein leeres alt-Attribut wird erzeugt, indem das Eingabefeld leer gelassen wird.
Defektes Bild
Wenn der Link nicht abrufbar ist, wird der alternative Text angezeigt. So weiss doch jeder Besucher deiner Website was dort für ein Bild wäre.
So kannst du auf deiner Website selbst die alternativen Texte überprüfen
Öffne deine Website mit dem Browser Chrome.
Gelang über Rechtsklick –> Untersuchen –> zu den Entwicklertools. Auch oben über –> Ansicht –> Entwickler –> Elemente untersuchen kommst du an denselben Ort. Ebenso mit dem Tastaturkürzel cmd + shift + c.
Eine Spalte mit vielen Quelldaten erscheint auf der rechten Seite.
Nun navigiere mit der Maus zum Bild, das du untersuchen möchtest.
Überprüfe die Zeile <img> mit dem HTML-Tag «alt=», ob der ALT-Text vorhanden ist.
