Barrierefreiheit von Bildern

Bilder sind eine großartige Möglichkeit, Aufmerksamkeit zu wecken. Wir sollten unsere Seiten aber so bauen, dass alle sie nutzen können, auch Menschen, die die Bilder nicht sehen können. Viele blinde und sehbehinderte Menschen verwenden einen Screenreader: ein Programm, das die Seite laut vorliest. In dieser Übung machen wir unser Bild für sie zugänglich.

Das ist das Bild, das wir in der vorigen Übung erstellt haben:

<img src="/learn/html/cats.webp">

Ein Screenreader kann nicht sehen, was auf einem Bild zu sehen ist. Bei einem Bild ohne Beschreibung liest er meist stattdessen den Dateinamen vor, etwa „cats Punkt webp“, was nicht viel hilft. Deshalb fügen wir das Attribut alt (Alternativtext) mit einer Beschreibung des Bildes hinzu:

<img src="/learn/html/cats.webp" alt="Sechs Fotos von Hauskatzen">

Der Screenreader liest dann die Beschreibung vor. Eine gute Beschreibung sagt kurz, was auf dem Bild wichtig ist.

Manche Bilder sind rein dekorativ, zum Beispiel ein Ornament oder ein Hintergrundmuster, und sagen nichts aus. Sie bekommen ein leeres alt-Attribut, und Screenreader überspringen sie dann:

<img src="/learn/html/ornament.webp" alt="">

Der Alternativtext hat noch einen weiteren Nutzen: Der Browser zeigt ihn an, wenn das Bild nicht geladen werden kann. Du kannst es ausprobieren, sobald du die Beschreibung geschrieben hast: Schreibe den Dateinamen in src falsch, klicke auf Ausführen, und du siehst statt des Fotos deine Beschreibung. Korrigiere den Namen danach wieder.