Erstellt am

Ein Bild sagt mehr als tausend Worte – außer du bist blind!

Visuelle Inhalte sind großartig! Bilder vermitteln Emotionen, beflügeln unsere Fantasie und machen eine Website ästhetisch ansprechend. Allerdings können viele Menschen Web-Inhalte nicht visuell wahrnehmen. Blinde und sehbeeinträchtigte Nutzer:innen sind darauf angewiesen, dass Web-Entwickler:innen und Content-Editor:innen einen Alternativtext bereitstellen.

Leider gibt es immer noch sehr viele Websites mit Bildern, für die kein Alternativtext gesetzt ist oder deren Alternativtext irreführend ist. Stellt euch vor, ihr besucht eine Website und statt Fotos und Grafiken seht ihr nur leere Flächen und verschwommene Bilder. Nervig, oder?

Ein dunkler Raum mit Neonlicht-Schrift an der Wand. Der Text lautet: 'Nichts zu sehen hier'. Foto: © Aleksandar Pasaric / pexels.com

In diesem Artikel werde ich einige Beispiele für schlechten Alternativtext teilen, auf die ich regelmäßig bei Barrierefreiheits-Prüfungen stoße. Doch als erstes sehen wir uns die Grundlagen an.

Die Grundlagen barrierefreier Bilder

Meistens verwenden wir das HTML-Element img um Bilder auf einer Website anzuzeigen. Mit dem Attribut alt können wir einen Alternativtext für das Bild definieren. Die HTML-Spezifikation beschreibt das Attribut so:

alt — Replacement text for use when images are not available

Das bedeutet, dass der Alternativtext auf der Seite angezeigt wird, wenn das Bild z.B. wegen Netzwerkfehlern nicht geladen werden kann. Natürlich ist der Text noch wichtiger für die Barrierefreiheit. Screenreader lesen den Alternativtext ihren Nutzer:innen vor, so dass sie wissen, was auf dem Bild zu sehen ist.

Es gibt noch andere Wege, um Bilder in einer Webseite einzubinden: Etwa mit dem HTML-Element svg oder den CSS-Pseudo-Elementen :before und :after. Um mehr über die barrierefreie Aufbereitung dieser Elemente zu erfahren, folgt den Links im Abschnitt „Nützliche Links“ unten.

Den passenden Alternativtext formulieren

Bei allen Bild-Elementen stellt sich dieselbe Frage: Welcher Alternativtext ist für das Bild angemessen? Das hängt vom Typ des Bildes ab:

  • Informative Bilder: Bilder, die relevante Informationen vermitteln. Die Textalternative sollte die Bedeutung bzw. die relevanten Details des visuell wahrnehmbaren Inhalts vermitteln.
    • Es gibt verschiedene Meinungen darüber, ob der Alternativtext aus einem kurzen, prägnanten Satz oder einer detaillierten Beschreibung in mehreren Sätzen bestehen soll.
    • Bei komplexen Bildinhalten (z.B. Diagramme) sollte der Alternativtext kurz gehalten werden und auf eine lange Beschreibung verweisen, die auf das Bild folgt.
  • Dekorative Bilder: Bilder, die dem Inhalt einer Seite keine relevanten Informationen hinzufügen. Dies ist etwa bei Bildern der Fall, die eine Seite nur optisch attraktiver machen sollen. Oder wenn der Informationsgehalt eines Bildes bereits durch nebenstehenden Text vermittelt wird. Diese Bilder solltet ihr vor assistiven Technologien verbergen, z.B. indem ihr einen leeren Alternativtext setzt (alt="").
  • Funktionale Bilder: Bilder, die in Schaltflächen, Links und anderen interaktiven Elementen verwendet werden. In diesem Fall sollte der Alternativtext den Zweck des interaktiven Elements vermitteln und nicht das Bild selbst beschreiben.

Meine persönlichen Top 5 schlechter Alternativtexte

Bei Barrierefreiheits-Prüfungen von Websites stoße ich regelmäßig auf die immer gleichen Fehler. Hier ist meine persönliche Liste an Beispielen für miserablen Alternativtext:

  1. Titel in Dauerschleife: Eine Artikelvorschau (z.B. im Nachrichten-Karussell) beinhaltet meistens ein Vorschau-Bild, um den Artikel zu illustrieren. Sehr oft finde ich Alternativtext vor, der nicht den Inhalt des Bildes beschreibt, sondern den Titel des Artikels wiederholt. Das ist völlig redundant und eine Zeitverschwendung für Screenreader-Nutzer:innen. Bitte nehmt euch die Zeit, den tatsächlichen Inhalt des Bildes zu beschreiben!
  2. Hat der Fotograf ein Selfie gemacht? Oft treffe ich auf Fotos, deren Alternativtext die Copyright-Information beinhaltet. Hat die Fotografin ein Selfie gemacht und ist auf dem Foto zu sehen? Nein? Dann schmeiß den Namen aus dem Alternativtext raus! Du kannst das Copyright in die sichtbare Bildbeschreibung geben.
  3. Was tut das Ding? Ein weiterer häufiger Fehler ist deskriptiver Alternativtext für funktionale Bilder. Stellt euch eine Icon-Schaltfläche vor, die visuell als nach unten zeigender Pfeil dargestellt wird. Die Schaltfläche ermöglicht das Herunterladen eines Dokuments, aber der Alternativtext lautet „Pfeil nach unten“. Nicht der beste Weg, um den Zweck der Schaltfläche zu vermitteln.
  4. Ich bin gar nicht da: Man nehme ein div Element und packe ein Bild darauf mithilfe der CSS-Eigenschaft background-image. Et voilà! Ihr könnt das Bild sehen. Aber es gibt keine Informationen für assistive Technologien. Screenreader-Nutzer:innen werden gar nicht bemerken, dass ein Bild zu sehen ist. Oder noch schlimmer: Sie navigieren zu einem Bildlink oder einer Icon-Schaltfläche und erhalten keine Info über deren Zweck. Danke für nichts!
  5. Reine Faulheit: Traurig, aber wahr. Ich treffe immer wieder auf img Tags, für die gar kein alt Attribut definiert ist. Es gibt einfach keine Beschreibung des Bildes. In diesem Fall lesen Screenreader häufig den Dateinamen des Bildes vor. Nicht gerade hilfreich, wenn das Bild als „wdkmm12xpY5.png“ beschrieben wird.

Fazit

Wenn ihr visuelle Inhalte in eine Webseite einbaut, dann stellt euch folgende Fragen: Welchen Zweck erfüllt das Bild? Ist es rein dekorativ? Falls nicht, definiert einen sinnvollen Alternativtext, der das Bild beschreibt oder den Zweck des Links oder der Schaltfläche vermittelt.

Nützliche Links

Erstellt am

Impressum: Inhalte von Alexander Lehner, Wien/Österreich.