Bilder
Boot mit Spiegelung im Wasser

Technische Realisierung von Textalternativen

(Materialsammlung)

Bilder müssen für blinde Menschen technisch mit einer textuellen Beschreibung als informative Alternative versehen werden. Je nach Umfang der erforderlichen Bildbeschreibung stehen einzeln und in Kombination mehrere Techniken zur Verfügung.

Eine Textalternative für Bilder ist aber auch erforderlich, wenn die Darstellung von Bildern im Browser deaktiviert ist. Darüber hinaus nehmen auch Suchmaschinen textuelle Alternativen wahr ( SEO ).

HTML-Attribut alt

Code

In HTML wird ein Bild durch einem img-Element (image) eingebettet. Die Bilddatei wird durch das src-Attribut (source) referenziert. Der Alternativtext wird im Wert des alt-Attributs formuliert.

Der Code für ein Bild mit dem Goldenen Dachl von Innsbruck könnte etwa folgendermaßen aussehen: 

<img
  alt="Goldenes Dachl"
  src="images/goldenes-dachl.png" >

Darstellung durch assistierenden Technologien

Ein Screen Reader kann den Elementtyp img technisch erkennen und gibt ihn beim Vorlesen beispielsweise als Grafik an. Ergänzend wird der Alternativtext dargestellt. Der Alternativtext wird je nach Screen Reader und Konfiguration vor oder nach dem Elementtyp angegeben.

Dies könnte sich beim obigen Codebeispiel etwa folgendermaßen anhören:

Goldenes Dachl Grafik

Verbergen eines Bilds für Screen Reader

Grafiken, die rein dekorativen Charakter aufweisen, werden für Screen Reader gänzlich verborgen. Dies wird durch ein leeres alt-Attribut bewerkstelligt. Der Code für eine illustrierte Trennlinie könnte etwa folgendermaßen aussehen: 

<img
  alt=""
  src="images/flower-line" >

Fehlendes alt-Attribut

Ein Bild muss unbedingt über ein alt-Attribut verfügen. Fehlt das Attribut, versuchen Screen Reader je nach Konfiguration aus einem vorhandenen Titelattribut, Bilderkennung mittels künstlicher Intelligenz oder letztlich dem Dateinamen eine Information zu generieren. Dies führt vielfach zu einer frustrierenden Information, beispielsweise:

DSC123456 Grafik

Darstellung durch Browser

Ein Alternativtext ist gewöhnlich am Bildschirm nicht wahrnehmbar. Der Alternativtext wird jedoch im Browser angezeigt, wenn die Darstellung von Bildern deaktiviert ist oder die Grafikdatei nicht existiert. Was beim Überstreichen mit der Maus angezeigt wird, ist nicht der Alternativtext, sondern der Wert des title-Attributs .

Länge von Alternativtexten

Der Alternativtext reicht nicht in jedem Fall für ein Textäquivalent aus. Er sollte nur eine unmittelbare und kurze Bildinformation liefern. Lange und detailreiche Bildbeschreibungen sollten außerhalb eines alt-Attributs realisiert werden.

CSS-Eigenschaft content

Mit der CSS -Anweisung content darf aus der Perspektive der Barrierefreiheit Inhalt zu HTML hinzugefügt werden. Wenn es sich dabei um grafischen Inhalt handelt, muss eine textuelle Alternative bereitgestellt werden.

Code

Die textuelle Alternative wird in der content-Anweisung nach einem Schrägstrich realisiert: 

content: url([Bildpfad]) / [Alternativtext] ;

Verwendung

Typischerweise wird eine content-Anweisung eingesetzt, um einen visuellen Indikator für einen speziellen Linktyp als Hintergrundgrafik zu ergänzen.

Externe Links # CSS-Icon mit Textalternative
Links zu externen Webauftritten mit einem visuellen Indikator und einer Textalternative versehen.

Detailbeschreibung als Ergänzung

Eine detaillierte Beschreibung kann ergänzend zu einem img-Element erforderlich sein. Dieses Angebot sollte sich unmittelbar unter dem Bild befinden.

Zur technischen Realisierung von detaillierten Informationen stehen mehrere Optionen zur Verfügung:

Unmittelbare Darstellung

Ausklappmechanismus mit Beschreibungen

Gruppieren von Bild und Detailbeschreibung

Details nur für Screen Reader

Durch technische Maßnahmen können Detailinformationen zu einem Bild lediglich für Screen Reader vorgesehen werden. Eine genauere Beschreibung von Bildinhalten ist vielfach auch für Sehende hilfreich. Diese Maßnahme sollte jedoch gründlich überlegt werden.