Gute Alternativtexte für Webseitenelemente

Eines der wichtigsten Merkmale einer barrierefreien Webseite sind sogenannte Alternativtexte (alt-Texte) für Bilder, Grafiken und andere visuelle Elemente. Sie ermöglichen es Nutzern mit Sehbehinderungen, den Inhalt und Kontext von Bildern über Screenreader zu erfassen. Doch was macht einen guten Alternativtext aus? In diesem Beitrag wird aufgezeigt, worauf es ankommt und wie man alt-Texte sinnvoll einsetzt.

Warum sind Alternativtexte wichtig?

Ein zentrales Prinzip der digitalen Barrierefreiheit ist, dass Inhalte über mehrere Sinne wahrnehmbar sein sollten. Bilder lassen sich visuell erfassen, können jedoch auch „gehört“ werden. Dafür ist es wichtig, dass sie mit einer aussagekräftigen Beschreibung versehen sind, einem sogenannten Alternativtext. Dieser macht den Bildinhalt auch ohne visuelle Wahrnehmung zugänglich.

Zusätzlich tragen Alternativtexte zur Suchmaschinenoptimierung (SEO) bei. Sie helfen Suchmaschinen, den Inhalt einer Website besser zu verstehen, was wiederum die Auffindbarkeit erhöht. Doch der Hauptnutzen bleibt die digitale Inklusion.

Sollte ein Bild aus technischen Gründen im Browser nicht darstellbar sein, wird anstelle des Bildes der Alternativtext angezeigt.

Was ist der Unterschied zwischen Alt-Text und Bildbeschreibung?

Der Unterschied zwischen Alt-Text (Alternativtext) und Bildbeschreibung liegt vor allem im Zweck und Umfang der jeweiligen Beschreibung:

Alt-Texte sind kürzer und dienen vornehmlich der Barrierefreiheit. Sie werden beispielsweise von Screenreadern verwendet, um Bilder und andere visuelle Elemente – die von blinden Menschen nicht wahrgenommen werden können – in Textform auszugeben.

Bildbeschreibungen können dagegen länger sein, da sie detaillierte Informationen über ein Bild, wie Farben, Emotionen oder Hintergründe enthalten.

Grundregeln für gute Alternativtexte

1. So kurz wie möglich, so lang wie nötig

Ein guter Alternativtext beschreibt das Wesentliche des Bildes, ohne ausschweifend zu sein.

Es gibt zwar keine konkrete Vorgabe für die Länge von Alt-Beschreibungen, aber 100 Zeichen sollten möglichst nicht überschritten werden.

2. Der Kontext ist entscheidend

Der Alternativtext sollte den Kontext des Bildes in der Webseite berücksichtigen. So kann das obige Bild beispielsweise je nach Kontext unterschiedlich beschrieben werden. Handelt es sich um einen allgemeinen Text zu Haustieren, könnte die Beschreibung „Ein Hund der Rasse Beagle sitzt auf einer grünen Wiese“ ausreichen. Handelt es sich jedoch um einen Beitrag zur Fellzeichnung der Hunderasse Beagle, könnte der Text „Ein Beagle mit der Fellzeichnung Schwarz, Braun, Weiß, bei der die Farben klar voneinander abgegrenzt sind“ beschreibender sein.

3. Keine redundanten Informationen

Vermeiden Sie Informationen, die bereits im umgebenden Text stehen oder mit dem Element automatisch ausgegeben werden.

Bei Links oder Bildern wird die Information, um welches Element es sich handelt, bereits automatisch vom Screenreader ausgegeben. Somit kann auf den Zusatz „Bild von …“ oder „Link zu …“ verzichtet werden.

Der Alternativtext für das verlinkte Logo dieser Webseite lautet: „Zur Homepage von BFSG Fit“. Der Screenreader gibt aus: „Link: Zur Homepage von BFSG Fit“.

Die Screenreaderausgabe bei diesem Bild lautet: „Bild: Hund der Rasse Beagle sitzt auf einer grünen Wiese“.

„Bild eines Hundes der Rasse Beagle …“ wäre daher falsch, da es redundante Informationen enthält.

Nur in Ausnahmefällen ist es sinnvoll, den umgebenden Text in der Beschreibung zu wiederholen. Ein Beispiel dafür ist das Bild eines Buchcovers, das mit „Buchcover des Bestsellers …“ beschrieben werden kann, um relevante Informationen zu vermitteln.

4. Funktionsbeschreibung für Interface-Elemente

Bei Buttons oder Icons sollte der Alternativtext die Funktion beschreiben.

Ein gutes Beispiel wäre hier das Bild einer Lupe im Suchfeld. Der Alternativtext sollte dabei nicht nur beschreiben, WAS zu sehen ist, sondern auch welche FUNKTION das Bild hat.

5. Keine Emojis, URLs oder Anführungszeichen verwenden

Alternativtexte sind rein textbasiert, da Screenreader nur einfachen Text interpretieren können. Elemente wie URLs werden dabei Buchstabe für Buchstabe bzw. Zeichen für Zeichen vorgelesen, was die Verständlichkeit erschwert.

Zudem besteht bei der Verwendung von Anführungszeichen die Gefahr, dass der Alt-Tag vorzeitig geschlossen wird, wodurch Teile der Beschreibung verloren gehen könnten.

Wann sollten leere Alternativtexte verwendet werden?

Wenn ein Element ausschließlich der Dekoration, Formatierung oder unsichtbaren Strukturierung dient und keine zusätzlichen Informationen zum Text beiträgt, sollte ein leeres Alt-Attribut verwendet werden.

Aber Achtung: ein leerer Alt-Text bedeutet nicht, dass der Alternativtext ganz weggelassen werden kann!

Bei diesem Beispiel <img src=“Trennlinie1x15.jpeg“ alt=““> würde der Screenreader das Element einfach ignorieren, da es ein leeres Alt-Attribut (kein Text zwischen beiden Anführungszeichen) besitzt.

Wird dagegen das alt-Attribut komplett weggelassen, also <img src=“Trennlinie1x15.jpeg“> würden einige Screenreader anstelle des beschreibenden Textes einfach den Titel des Bildes, als „Trennlinie1x15.jpeg“ ausgeben.

So können Alt-Texte zu Bildern hinzugefügt werden

Der Alternativtext für ein Bild erscheint im Quellcode einer Webseite folgendermaßen:

<img src="Vogel.jpeg" alt="Ein Blaukehlchen sitzt auf einem Ast und singt">

Das Attribut lässt sich manuell im Quellcode hinzufügen. Viele Programme bieten jedoch inzwischen benutzerfreundlichere Methoden, um den beschreibenden Text einzufügen. In WordPress kann der Alt-Text direkt beim Hochladen des Bildes hinterlegt werden. In Microsoft Word und Google Docs lässt sich der alternative Text bequem über einen Rechtsklick auf das Bild hinzufügen.

Im Zeitalter der KI stehen zahlreiche leistungsfähige Alt-Text-Generatoren zur Verfügung. Mein persönlicher Favorit ist der KI-Generator von Ahrefs. Gerade wenn man Alt-Texte in einer anderen Sprache generieren muss, ist dieses Tool sehr hilfreich.

Fazit

Gute Alternativtexte sind ein wichtiger Baustein für inklusive und benutzerfreundliche Webseiten. Sie sollten präzise, kontextbezogen und nicht redundant sein. Indem Sie die hier beschriebenen Best Practices befolgen, können Sie dazu beitragen, das Web für alle zugänglicher zu machen.