Textalternativen für Bilder

Verwenden des ALT-Attributs zum Bereitstellen von Textalternativen für Bilder

Alice Boxhall

Dave Gash

Meggin Kearney

Bilder sind ein wichtiger Bestandteil der meisten Webseiten und für Nutzer mit eingeschränktem Sehvermögen natürlich ein besonderes Stolperfeld. Wir müssen die Rolle berücksichtigen, die ein Bild auf einer Seite spielt, um herauszufinden, welche Art von Textalternative es haben sollte. Sehen Sie sich dieses Bild an.

<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>

Eine Studie zeigt, dass 9 von 10 Katzen leise ihre Besitzer beim Schlafen bewerten.

Auf der Seite sehen Sie ein Bild einer Katze, das einen Artikel über das bekannte Urteilsverhalten von Katzen veranschaulicht. Ein Screenreader meldet dieses Bild mit dem literalen Namen "/160204193356-01-cat-500.jpg". Das ist richtig, aber überhaupt nicht nützlich.

Mit dem Attribut alt können Sie eine nützliche Textalternative zu diesem Bild bereitstellen, z. B. „Eine Katze, die gefährlich in den Weltraum blickt“.

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

Anschließend kann der Screenreader eine kurze Beschreibung des Bildes vorlesen (zu sehen auf der schwarzen VoiceOver-Leiste) und der Nutzer kann entscheiden, ob er zum Artikel übergehen möchte.

Einige Kommentare zu alt:

• Mit alt kannst du einen einfachen String angeben, der immer dann verwendet wird, wenn das Bild nicht verfügbar ist, z. B. wenn das Bild nicht geladen werden kann, vom Web-Crawling-Bot aufgerufen wird oder von einem Screenreader erkannt wird.
• alt unterscheidet sich von title oder anderen Bildunterschriften dadurch, dass sie nur verwendet werden, wenn das Bild nicht verfügbar ist.

Das Schreiben nützlicher Alt-Texte ist eine echte Kunst. Damit ein String eine geeignete Textalternative ist, muss er dasselbe Konzept wie das Bild im selben Kontext vermitteln.

Angenommen, Sie haben ein verknüpftes Logobild im Masthead einer Seite, wie oben gezeigt. Das Bild lässt sich mit dem „Funion-Logo“ ziemlich genau beschreiben.

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

Es mag verlockend sein, eine einfachere Textalternative wie "Startseite" oder "Hauptseite" zu verwenden. Dies ist jedoch sowohl für Nutzer mit eingeschränktem Sehvermögen als auch für Nutzer mit Sehschwäche schlecht.

Stellen Sie sich jedoch einen Nutzer eines Screenreaders vor, der das Masthead-Logo auf der Seite finden möchte. Wenn ihm der Alt-Wert „home“ zugewiesen wird, ist das Ergebnis verwirrend. Der sehende Nutzer steht vor der gleichen Herausforderung – herausfinden, was das Klicken auf das Logo tut – als Nutzer eines Screenreaders.

Andererseits ist es nicht immer sinnvoll, ein Bild zu beschreiben. Ein Beispiel wäre ein Bild mit einer Lupe innerhalb einer Suchschaltfläche mit dem Text „Search“. Wenn der Text nicht vorhanden wäre, würden Sie dem Bild definitiv den Alt-Wert „search“ geben. Da wir aber den sichtbaren Text haben, erkennt der Screenreader das Wort „Search“ und liest es laut vor. Daher ist ein identischer alt-Wert im Bild überflüssig.

Wir wissen jedoch, dass wir wahrscheinlich stattdessen den Namen der Bilddatei hören, wenn wir den alt-Text weglassen. Dieser ist sowohl nutzlos als auch potenziell verwirrend. In diesem Fall können Sie einfach ein leeres alt-Attribut verwenden. Der Screenreader überspringt das Bild dann vollständig.

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

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