Barrierefreie Alt-Texte - Sichtbar machen, was nicht jeder sehen kann

Was ist ein ALT-Text?

Ein ALT-Text ist eine Text-Alternative für ein Bild und auf den ersten Blick unsichtbar. Dieser Alternativtext erscheint erst dann auf der Seite, wenn ein Screenreader eingesetzt oder eine Mediendatei aus technischen Gründen von einem Browser nur verzögert oder überhaupt nicht geladen wird.

Texte können von jeder Software ausgelesen werden. So kann beispielsweise ein Screenreader einen ALT-Text vorlesen oder an eine Braillezeile weitergeben, um den Text ertastbar zu machen.

Für jedes Bild/Foto, das auf einer Webseite Infos vermittelt oder zum Verständnis von Inhalten oder Produkten beiträgt, muss für Menschen mit Seheinschränkungen ein ALT-Text bereitgestellt werden, der im HTML-Code eingebettet ist. (Auch “ALT-Tag” genannt.)

Unterschiedliche Bild-Arten und deren Bedeutung/Funktion

Informative Bilder:

Informative Bilder vermitteln Wissen, das man ohne das Bild nicht hätte. Wenn ein Bild Informationen vermittelt, sollte der ALT-Text diese Informationen kurz und präzise wiedergeben.

Beispiel:

Ein Bild von einem Diagramm mit steigenden Verkaufszahlen sollte einen ALT-Text haben wie : "Diagramm zeigt steigende Verkaufszahlen von E-Rollern im letzten Quartal".

< img src="verkaufszahlen.jpg" alt="Diagramm zeigt steigende Verkaufszahlen von E-Rollern im letzten Quartal." >

Tipp: Bilder, die zum Branding einer Marke beitragen, sind informativ und nicht etwa nur dekorativ.

Dekorative Bilder:

Wenn ein Bild nur einem dekorativen Zweck dient und keine wichtige Information vermittelt, sollte der ALT-Text leer sein (alt=""). Bildschirmlesegeräte ignorieren dadurch das betreffende Bild.

Beispiel:

Ein rein ästhetisches Hintergrundbild wie eine Landschaft benötigt keinen ALT-Text.

Tipp: Entscheidungshilfe bei der Beurteilung, ob ein Bild nur dekorativ ist: Ich bekomme keinen Mehrwert durch das Bild.

Im Zweifelsfall ist es jedoch besser, einen ALT-Text zu verfassen, als ihn wegzulassen.

Funktionale Bilder:

Funktionale Bilder sollen anregen, eine bestimmte Aktion durchzuführen. Ein Bild-Button oder ein Icon beschreibt hier den Zweck des Bildes. Das Icon soll dabei nicht beschrieben werden, sondern der Seitenbesucher soll erfahren, was er tun soll.

Beispiel:

Ein Lupensymbol, das zum Suchen verwendet wird, sollte einen ALT-Text haben wie "Suche".

< img src="suchsymbol.jpg" alt="Suche" >

Was muss beachtet werden?

• Länge: 1 bis 2 Sätze, möglichst unter 125 Zeichen (Technologien wie Screenreader lesen meist nur 125 Zeichen vor)

• Anfang/Ende des Textes in Anführungszeichen (alt=“....”)

• ALT-Text beschreibt Kernaussage des Bildes

• ALT-Text enthält keine Emojis, Links oder Anführungszeichen.

• Objektivität (keine eigene Interpretation einbringen)

• Verständlichkeit (unter Beachtung der Zielgruppe)

• Sinnhaftigkeit (Beschreibung muss außerhalb und innerhalb des Kontextes Sinn ergeben)

• Eindeutigkeit und Einhaltung von fachdidaktischem Wissen

• Klar und prägnant: Der ALT-Text sollte die wesentlichen Informationen des Bildes vollständig vermitteln, dabei aber kurz und prägnant bleiben.

ALT-Texte und SEO

ALT-Texte sind nicht nur ein Merkmal der Barrierefreiheit, auch Suchmaschinen greifen darauf zurück.

Suchmaschinen können anhand von ALT-Texten Webseiten untersuchen und die betreffenden Bilder in die Google-Bildersuche einordnen. Google liest dabei ALT-Texte aus, um den Inhalt von Bildern zu analysieren. Allein die Google-Bildsuche macht knapp ein Viertel aller Suchanfragen aus.

Somit erhöhen relevante ALT-Texte auch den SEO-Traffic.

Sie brauchen Unterstützung bei der Erstellung von ALT-Texten oder anderen Barrierefreiheitsthemen?

Dann kontaktieren Sie uns hier!