5 schnelle Accessibility-Verbesserungen für Bilder
auf deiner Webseite

Immer wieder geraten Webentwickler in die Situation, bestehende Webseiten nachträglich barrierefrei gestalten zu müssen. Dies kann sich als trivial bis sehr aufwendig erweisen. Im Folgenden zeige ich euch ein paar Tricks rund um Bilder, die die Zugänglichkeit eurer Seite verbessern werden.

1. Fehlendes alt-Attribut im <img>-Tag

Insbesondere bei Seiten, die mit JavaScript-Frameworks (wie React oder Angular) erstellt wurden, wird oft das alt-Attribut bei <img>-Tags vergessen. Oft werden einzelne Web-Komponenten manuell erstellt, wobei die Barrierefreiheit (Accessibility) auf der Strecke bleibt. Entwickler denken vielleicht: Ein Bild sagt mehr als tausend Worte und ist doch selbsterklärend! Wer denkt schon daran, dass es Menschen gibt, die das Bild nicht wahrnehmen können?

Genau dafür ist das alt-Attribut (oft auch Alt-Text genannt) da. Es soll textuell beschreiben, was auf dem Bild zu sehen ist bzw. welche Funktion es hat. Assistive Technologien wie Screenreader greifen diesen Text auf und lesen ihn vor. Ohne alt-Attribut lesen Screenreader oft den Dateinamen vor, was selten hilfreich ist, oder sie geben nur an, dass es sich um ein Bild handelt.

2. Ungenauer oder zu detaillierter alt-Text

Nehmen wir als Beispiel die Webseite eines Reisebüros. Um auf den Abschnitt „Abreise“ zu verlinken, wird ein Bild von Reisenden verwendet, die mit Rollkoffern zu einer Glastür eines Flughafenterminals eilen. Die Intention des Bildes ist es, als Link zu fungieren.

Ein schlechter alt-Text würde sich in Details verlieren: „Ein sonniger Tag. Eine Menschenmenge ist auf einem Platz zu sehen. In der Mitte befindet sich eine Glastür mit der Aufschrift ‚Terminal 2‘. In ihre Richtung laufen drei Personen mit Reisekoffern.“ Dieser Text beschreibt zwar das Bild, aber nicht seine Funktion im Kontext.

Ein besserer alt-Text wäre hier: „Link zum Abschnitt Abreise“ oder „Reisende am Flughafenterminal, Link zur Abreise“.

Auch Zeilenumbrüche im alt-Text können bei Screenreadern zu unerwarteten Pausen führen. Daher sind kurze und prägnante Texte, die den Zweck oder den wesentlichen Inhalt des Bildes wiedergeben, zu bevorzugen.

3. Leerer alt-Text für dekorative Bilder

Die meisten Programme zur Prüfung der Barrierefreiheit (Accessibility Checker) durchsuchen die Seite nach <img>-Tags und melden einen Fehler, wenn das alt-Attribut komplett fehlt.

Es ist jedoch erlaubt und oft sogar sinnvoll, das Attribut leer zu lassen (alt=""), wenn das Bild rein dekorativen Zwecken dient und keine semantische Bedeutung für den Inhalt der Seite hat. Ein Beispiel hierfür wäre die Landingpage einer IT-Firma, die ein rein schmückendes Hintergrundbild mit Nullen und Einsen in den Firmenfarben verwendet.

In solch einem Fall wird das alt-Attribut bewusst leer gelassen: alt="". Dadurch signalisiert man assistiven Technologien, dass das Bild ignoriert werden kann. Ein alt-Attribut ganz wegzulassen ist hingegen nicht konform und wird von Checkern (und Screenreadern oft als Fehler) bemängelt.

4. SVG-Icons

Vergessen wir nicht eine andere, im Netz weit verbreitete Art von Grafiken: Icons. Diese liegen oft als SVG-Dateien vor und dienen häufig als interaktive Elemente, zum Beispiel als Buttons. Ein Praxisbeispiel wäre eine Flugstatusseite, auf der Abflüge und Landungen durch Flugzeug-Piktogramme symbolisiert werden.

Ein Screenreader kann mit dem reinen Piktogramm (also dem <svg>-Code ohne Beschreibung) nichts anfangen und würde eventuell nur unzusammenhängende Pfad-Informationen oder gar nichts vorlesen. <svg>-Tags haben im Gegensatz zu <img>-Tags kein alt-Attribut.

Hierfür gibt es mehrere Möglichkeiten, eine textuelle Beschreibung bereitzustellen:

• Das aria-label-Attribut direkt am <svg>-Tag:
<svg aria-label="Abflug">...</svg>
• Ein <title>-Element innerhalb des SVGs:
  <svg><title>Abflug</title>...</svg>
  (Wird oft auch als Tooltip im Browser angezeigt)
• Das aria-labelledby-Attribut, das auf ein separates Element (z. B. einen versteckten <span> oder ein <title>-Element mit ID) verweist.

Wichtig ist, dass die Funktion oder Bedeutung des Icons klar wird.

5. Redundanzen vermeiden

Auch zu viel Text kann die Barrierefreiheit beeinträchtigen. Daher sollte auf Wiederholungen und andere Redundanzen geachtet werden.

Steht beispielsweise ein Firmenlogo (als <img>) direkt neben dem ausgeschriebenen Firmennamen im Text, sollte das alt-Attribut des Logos leer (alt="") sein, da der Name bereits im Text steht. Andernfalls würde ein Screenreader den Namen doppelt vorlesen: einmal aus dem alt-Text des Logos und einmal aus dem danebenstehenden Fließtext.

Fazit

Die Erfahrung zeigt, dass viele Content-Management-Systeme (CMS) automatisch den Dateinamen des Bildes in das alt-Attribut schreiben, wenn kein Text manuell eingegeben wird. Dadurch melden automatisierte Accessibility-Scanner zwar keinen formalen Fehler (da das Attribut vorhanden ist), der Inhalt ist aber oft unbrauchbar oder nicht aussagekräftig.

Es lohnt sich also, die obebgenannten Daumenregeln zu beherzigen, um die Bilder auf eurer Webseite im Hinblick auf Barrierefreiheit (‚Accessibility‘) wirklich zu verbessern und nicht nur Prüfprogramme zufriedenzustellen.