Bilder barrierefrei einbinden und Alt-Texte richtig einsetzen
- Alt-Texte sind wichtig, um Bilder barrierefrei einzubinden. Sie werden von Screenreadern vorgelesen und helfen Menschen mit visuellen Einschränkungen, den Inhalt zu verstehen.
- Dekorative Bilder benötigen keinen Alt-Text, informative Bilder hingegen schon. Funktionale Bilder sollten die Aktion beschreiben, die ausgeführt wird.
- Komplexe Grafiken sollten mit einem kurzen Alt-Text und einer ausführlichen Beschreibung im Text versehen werden.
Bilder können die Inhalte einer Website nicht nur optisch aufwerten, sondern auch verständlicher machen und zusätzlichen Kontext liefern. Insbesondere für Menschen mit Leseschwierigkeiten oder kognitiven Einschränkungen können sie Anhaltspunkte zur Orientierung im Inhalt bieten.
Warum ist das alt-Attribut im img-Tag wichtig?
Nicht barrierefrei eingebundene Bilder können für Personen mit eingeschränktem Sehvermögen, die die Inhalte einer Website mit Assistenzsoftware bspw. Screenreadern konsumieren, sehr frustrierend sein.
Wird kein alt-Attribut im img-Tag gesetzt, so lesen die meisten Screenreader einfach den Dateinamen des Bildes vor, was natürlich zu Unterbrechungen im Lesefluss führt und keinen Mehrwert bietet. Daher ist es wichtig, das alt-Attribut zu nutzen, um eine alternative Beschreibung des Bildes bereitzustellen.
Ein schöner Nebeneffekt ist, dass der Alt-Text von Suchmaschinen indexiert wird und somit zur Auffindbarkeit der Seite beiträgt. Lädt ein Bild nicht, bspw. aufgrund einer schlechten Internetverbindung, wird der Alt-Text stattdessen angezeigt und hilft Besucher:innen beim konsumieren der Inhalte.
Grundregeln für den Einsatz von alternativen Texten
- Screenreader kommunizieren automatisch, dass es sich bei dem gelesenen Element um ein Bild handelt. Einleitungen wie “Ein Bild von…” oder “Auf dem Bild sieht man…” sind also nicht nötig. Es kann jedoch nützlich sein zu erwähnen, um welche Art von Bild es sich handelt: ein Foto, eine Illustration, ein Diagramm usw., wenn dies für den Kontext wichtig ist.
- Es gilt: So kurz wie möglich, so lang wie nötig. Als Orientierung kann man mit maximal 125 Zeichen, also 2-3 Sätzen rechnen.
- Der Inhalt sollte kurz und prägnant sein, aber alle Informationen enthalten, die für den Kontext und den Zweck des Bildes wichtig sind.
- Die wichtigsten Informationen sollten zuerst genannt werden.
- Der Text sollte möglichst sachlich, verständlich und neutral verfasst sein.
- Es sollte darauf geachtet werden, dass die Rechtschreibung und Grammatik korrekt ist, damit die Informationen richtig interpretiert und verständlich vorgetragen werden können.
- Beende den Alt-Text mit einem Punkt.
- Soll das alt-Attribut leer bleiben, sollte darauf geachtet werden, dass auch kein Leerzeichen zwischen den Anführungszeichen gesetzt ist. Andernfalls wird das Bild ggf. nicht wie gewünscht übersprungen.
- Text, der als Bild eingebettet ist, ist nach den Grundsätzen der Barrierefreiheit nicht erlaubt. Wenn es nicht anders möglich ist, sollte der Text Teil des Alt-Textes sein.
Wann benötigt mein Bild keinen Alt-Text?
- Wenn das Bild rein dekorativ ist und keinen zusätzlichen Inhalt oder Kontext transportiert, kann das alt-Attribut leer bleiben. Es wird damit vom Screenreader übersprungen und stört den Lesefluss der Besucher:innen nicht.
- Wenn der Inhalt des Bildes bereits ausreichend im Text kommuniziert wird.
- Das Wordwide Web Consortium (W3C) stellt hier eine Entscheidungshilfe bereit, anhand dessen man prüfen kann, ob ein Alt-Text benötigt wird: Entscheidungshilfe des W3C
Was ist der Unterschied zwischen informativen, dekorativen und funktionalen Bildern?
Dekorative Bilder bieten keine zusätzliche Information oder Kontext zum Inhalt der Seite. Sie dienen lediglich der optischen Aufwertung des Inhalts bzw. alle transportierten Informationen sind bereits in gleicher Weise im Text enthalten. Dekorative Bilder sollten mit einem leeren Alt-Text versehen werden, damit Screenreader das Bild überspringen können.
Beispiele des W3C
Informative Bilder sind alle Bilder, die zum Kontext einer Seite beitragen. Wenn der Seite ohne das Bild Informationen fehlen würden, handelt es sich um ein informatives Bild, das mit einem Alt-Text beschrieben werden muss.
Beispiele des W3C
Funktionale Bilder sind Bilder, die eine Interaktion auslösen und nicht nur Inhalte transportieren. Beispiele hierfür sind “Drucker”-Symbole, die den Druckvorgang starten, das verlinkte Logo im Header einer Website usw. In diesem Fall sollte der Alt-Text die Aktion beschreiben, die ausgeführt wird und nicht nur den Inhalt des Bildes.
Beispiele des W3C
Umgang mit komplexen Grafiken und Diagrammen
Komplexe Grafiken, wie bspw. Diagramme, Karten, Illustrationen usw. können oft nicht mit 2-3 Sätzen ausreichend beschrieben werden. Dennoch ist eine barrierefreie Einbindung nötig, da oft speziell diese Grafiken viele Informationen transportieren. In diesen Fällen sollte der Alt-Text eine kurze Beschreibung der Grafik beinhalten. Zudem sollte es eine ausführliche Beschreibung des Inhalts in Textform geben, auf die im Alt-Text oder unmittelbar danach hingewiesen wird. Beispiele hierfür finden sich auf der Seite des W3C.
<img src="###.jpg"
alt="Descriptive text about the image. For more information, see the description below."
aria-describedby="description" />
[…]
<p id="description">
This is a complex diagram showing the relationship between […].
</p>
Umgang mit SVG-Grafiken
- Ist die SVG-Grafik über einen img-Tag eingebunden, so kann ein alt-Attribut wie oben beschrieben verwendet werden.
- Ist die SVG-Grafik direkt im Code eingebunden, kann ein <title>-Element verwendet werden, um die Grafik zu beschreiben. In diesem Fall sollte am <svg>-Tag ein aria-labelledby Attribut mit der ID des title-Tags als Wert gesetzt werden.
<svg aria-labelledby="svgid1">
<title id="svgid1">Print this page</title>
[...]
</svg>
Dieser Artikel dient ausschließlich zu Informationszwecken und stellt keine Rechtsberatung dar. Er erhebt keinen Anspruch auf Vollständigkeit oder Richtigkeit und spiegelt die persönliche Meinung des Autors wider.