Textalternativen für Bilder

Textalternativen für Bilder mit dem ALT-Attribut angeben

Alice Boxhall

Dave Gash

Meggin Kearney

Bilder sind ein wichtiger Bestandteil der meisten Webseiten und stellen natürlich ein besonderes Problem für Nutzer mit Sehbehinderung dar. Wir müssen die Rolle eines Bildes auf einer Seite berücksichtigen, um herauszufinden, welche Art von Textalternative es haben sollte. Werfen Sie einen Blick auf dieses Bild.

<article>
    <h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
    <img src="imgs/160204193356-01-cat-500.jpg">
</article>

Studie zeigt: 9 von 10 Katzen bewerten ihre Besitzer im Schlaf

Auf der Seite sehen wir ein Bild einer Katze, das einen Artikel über das bekannte verurteilende Verhalten von Katzen illustriert. Ein Screenreader liest dieses Bild mit seinem wörtlichen Namen vor, "/160204193356-01-cat-500.jpg". Das ist richtig, aber überhaupt nicht hilfreich.

Mit dem Attribut alt kannst du eine nützliche Textalternative zu diesem Bild angeben, z. B. „Eine Katze, die bedrohlich ins Weltall blickt“.

<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">

Der Screenreader kann dann eine kurze Beschreibung des Bildes ansagen (in der schwarzen VoiceOver-Leiste zu sehen) und der Nutzer kann entscheiden, ob er zum Artikel weitergeht.

Einige Anmerkungen zu alt:

• Mit alt können Sie einen einfachen String angeben, der verwendet werden soll, wenn das Bild nicht verfügbar ist, z. B. wenn das Bild nicht geladen werden kann, wenn ein Web-Crawling-Bot darauf zugreift oder wenn es von einem Screenreader gefunden wird.
• alt unterscheidet sich von title oder anderen Arten von Untertiteln dadurch, dass es nur verwendet wird, wenn das Bild nicht verfügbar ist.

Das Erstellen nützlicher Alt-Texte ist eine kleine Kunst. Damit ein String als Textalternative verwendet werden kann, muss er im selben Kontext dasselbe Konzept wie das Bild vermitteln.

Ein Beispiel für ein verknüpftes Logobild im Masthead einer Seite ist oben zu sehen. Wir können das Bild ziemlich genau als „Das Funion-Logo“ beschreiben.

<img class="logo" src="logo.jpg" alt="The Funion logo">

Es kann verlockend sein, eine einfachere Textalternative wie „Startseite“ oder „Hauptseite“ zu verwenden, aber das ist sowohl für sehbehinderte als auch für sehende Nutzer ein Nachteil.

Stellen Sie sich jedoch einen Screenreader-Nutzer vor, der das Masthead-Logo auf der Seite finden möchte. Wenn Sie ihm den Alt-Wert „Startseite“ geben, wird die Suche noch schwieriger. Und sehende Nutzer stehen als Screenreader-Nutzer vor der gleichen Herausforderung: Herauszufinden, was der Klick auf das Logo der Website bewirkt.

Andererseits ist es nicht immer sinnvoll, ein Bild zu beschreiben. Angenommen, Sie haben ein Lupenbild in einer Suchschaltfläche mit dem Text „Suchen“. Wenn der Text nicht vorhanden wäre, würden Sie diesem Bild definitiv den alt-Wert „search“ geben. Da wir jedoch den sichtbaren Text haben, nimmt der Screenreader das Wort „Suche“ auf und liest es vor. Daher ist ein identischer alt-Wert im Bild redundant.

Wenn wir den Text alt jedoch weglassen, hören wir wahrscheinlich stattdessen den Namen der Bilddatei, was sowohl nutzlos als auch potenziell verwirrend ist. In diesem Fall können Sie einfach ein leeres alt-Attribut verwenden. Der Screenreader überspringt das Bild dann komplett.

<img src="magnifying-glass.jpg" alt="">

Alle Bilder sollten also das Attribut alt haben. Es müssen aber nicht alle Bilder Text enthalten. Wichtige Bilder sollten einen beschreibenden Alt-Text haben, der das Bild kurz und prägnant beschreibt. Dekorative Bilder sollten leere Alt-Attribute haben, also alt="".