Kaum ein Teilbereich der Barrierefreiheit ist bekannter als Alternativtexte. Und kaum einer ist seltener korrekt umgesetzt. Viele tun sich schwer, einen passenden Alternativtext zu schreiben, setzen ihn falsch ein oder lassen ihn dann aus reiner Verzweiflung gleich ganz weg. Denn gute Textalternativen zu pflegen ist oft ein zusätzlicher Aufwand, der für einen Großteil der Nutzer unsichtbar bleibt. Dabei können gut gewählte Texte Nutzern von Screenreadern ein viel besseres Bild der Website geben und oft ansonsten nicht zugängliche Informationen anbieten.
Grundsätzlich benötigen alle visuellen Inhalte eine textuelle Alternative. Einzige Ausnahme bilden Grafiken, die rein illustrierende Bedeutung haben, so beispielsweise meine Farbkleckse hinter den Zeichnungen. Diese bieten keinen eigentlichen Mehrwert und benötigen deshalb auch keine Beschreibung. In diesem Blogbeitrag möchte ich darüber aufklären, wie diese Texte definiert und welchen Inhalt sie haben sollten.
Das alt-Attribut und seine Verwandten
Das Standardattribut zur Vergabe von Alternativtexten ist „alt“, welches an Grafiken, die mithilfe des <img>-Tags eingebunden sind angegeben werden muss. Wie oben erwähnt, darf es aber bei rein illustrativen Grafiken auch leer sein. Es gibt aber viele weitere Möglichkeiten, Bilder in einer Website einzubinden.
Alternativtexte schreiben für Hintergrundbilder
Werden Bilder mittels CSS beispielsweise als Hintergrundbild eines Elementes eingebunden, so ist es nicht möglich, einen klassischen Alternativtext anzugeben. Ist dies trotzdem notwendig (beispielsweise weil ich sich um ein verlinktes Icon handelt), dann muss die Textalternative mithilfe eines HTML-Elementes bereitgestellt werden, welche nur für für die Audio-Ausgabe „sichtbar“ ist. Wichtig ist, dass dieses Element nicht mit display: none;, sondern mit einer geeigneten anderen Methode unsichtbar gemacht wird, da es sonst auch für Screenreader nicht zugänglich ist. Geeignet ist beispielsweise folgendes CSS:
.sr-only {
position: absolute;
top: -10000em;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}Schreiben von Alternativtexten für Inline-SVG
Direkt ins HTML geschriebene SVG-Dateien haben aus Sicht der Performance viele Vorteile. Leider hat man aber auch hier nicht die Möglichkeit, ein alt-Attribut zu verwenden. Es gibt jedoch eine gute Methode, trotzdem Screenreader-geeignete Alternativen anzugeben Diese wird bei allen Zeichnungen auf stolperfrei.digital verwendet und nutzt im svg definierte <title> und <desc>-Elemente. Damit diese als Alternativtext der Grafik erkannt werden, werden sie mithilfe der ARIA-Attribute aria-labeledby und aria-describedby verknüpft. Mein verrückter Elefant oben zeigt, wie es geht.
<svg aria-labeledby="elephant-title" aria-describedby="elephant-desc" version="1.1" xmlns="http://www.w3.org/2000/svg"
width="1707.000000pt" height="1253.000000pt" viewBox="0 0 1707.000000 1253.000000"
preserveAspectRatio="xMidYMid meet">
<title id="elephant-title">Absurde Illustration: Ein Fahrrad fahrender Elefant, der im Rüssel einen Pinsel hält und damit ein Bild malt.</title>
<desc id="elephant-desc">Bedeutung: Beispiel für ein Bild, welches je nach Kontext einen unterschiedlichen Alternativtext erhält.</desc>
...
</svg>Was muss im Alternativtext stehen?
Das grundsätzliche Ziel alternativer Textbeschreibungen ist es, bei sehbeeinträchtigten Nutzern den gleichen Kenntnisstand herzustellen, den auch ein sehender Nutzer erreicht. Das heißt, nicht immer ist relevant, was auf der Grafik tatsächlich zu sehen ist!
Verlinkte Bilder
Sind Bilder verlinkt und besitzen keine separate Bildunterschrift, so dient der Alternativtext der Grafik auch als Linktext. Häufig ist in diesen Fällen das Linkziel relevanter als der Inhalt selbst. Gut vorstellbar ist ein verlinkter Briefumschlag, welcher zum Kontaktformular führt. Ein Hinweis „Briefumschlag“ wäre zwar inhaltlich richtig, würde beim Vorlesen jedoch nicht den Zweck des Links widerspiegeln und vermutlich für mehr Verwirrung als Klarheit sorgen. Die Information „Zum Kontaktformular“ macht dem Hörer jedoch sofort klar, wohin ihn der Link führen wird.
Diagramme und Infografiken
Barrierefreie Diagramme und Infografiken sind gut geeignet um komplexe Sachverhalte übersichtlich darzustellen und visuell aufzubereiten. Leider hilft diese Aufbereitung Nutzern von Screenreadern nicht. Die Informationen sollten trotzdem nicht in einem Alternativtext verarbeitet werden, denn dieser wird vom Screenreader immer im Ganzen vorgelesen und kann nicht durch Zwischenüberschriften strukturiert werden. Bei solch komplexen Sachverhalten ist es empfehlenswert, neben dem Bild eine vollständige textuelle Alternative oder die Daten in Tabellenform anzubieten. Im alt-Attribut kann dann auf diese verwiesen werden. Zusätzlich kann die Kernaussage des Diagramms erwähnt werden, die einem sehenden Nutzer sofort ins Auge stechen würde.
Andere Bilder – was ist relevant?
Versucht man eine Grafik textuell zu beschreiben, so ist es hilfreich, sich Gedanken darüber zu machen, welche Information ein sehender Nutzer beim Betrachten des Bildes erhält. Je nach Kontext kann dies beim gleichen Bild etwas völlig anderes sein. Nehmen wir das Bild des Elefanten aus diesem Beitrag als Beispiel:
- Auf einer Kunstseite würde die Gestaltung, die Farbe und vielleicht der Zeichenstil beschrieben werden.
- Die Website eines Zirkus‘ würde das beeindruckende Kunststück des Elefanten erwähnen.
- Eine Tierschutzorganisation prangert vermutlich die nicht artgerechte Haltung des Tieres an.
Die Zielgruppe der Internetseiten würde von den dazu passenden Alternativtexten gut abgeholt werden, der Tierschützer interessiert sich nicht für die Pinselführung der Zeichnerin. Achten Sie also beim Schreiben von Alternativtexten auf Ihre Zielgruppe und erwähnen Sie die Dinge, die ein sehender Nutzer der Darstellung entnehmen kann.
Wie ist das mit dem Aussehen von Personen?
Das ist ein schwieriges und viel diskutiertes Thema. Grundsätzlich kann man den Ansatz von oben wählen: es wird das Beschrieben, was für die Aussage des Bildes relevant ist. Gegebenenfalls macht es einen Unterschied, ob auf dem Bild eine junge oder eine ältere Person beim Joggen abgebildet ist. Auch wenn das Ziel der Darstellung ist, Diversität einer Firma durch das Zeigen von Mitarbeitern unterschiedlichen kulturellen Hintergrunds zu zeigen, kann eine Beschreibung der Hautfarbe relevant sein.
Man muss bei solchen Angaben jedoch immer vorsichtig sein, denn es ist kaum möglich, eine Person mit Adjektiven zu beschreiben, ohne dabei wertend zu sein. Eine solche Bewertung oder Interpretation ist aber nicht Aufgabe eines Alternativtextes. Auch ist es schwer eine Beschreibung zu verfassen, wenn die dargestellten Personen nur Models sind und man dem Betrachter eigentlich eine bestimmte Interpretation überlassen möchte. Eine Angabe „Querschnittsgelähmte Person im Rollstuhl“ ist eben nicht korrekt, wenn die Person diese Beeinträchtigung nicht hat.
Deshalb tendiere ich dazu, die Beschreibung von Personen eher zu vermeiden, wo diese nicht zwingend notwendig ist, und sie ansonsten auf das Nötigste zu beschränken.
Wofür ist der Alternativtext nicht gedacht?
Es gibt viele Dinge für die Alternativtexte, insbesondere die alt-Attribute, gern verwendet werden. Hier eine Liste der Dinge, die Sie vermeiden sollten:
- Urheberrechtsangaben oder Lizenzen: Das alt-Attribut ist kein geeigneter Ort für eine Urheberrechtsangabe, denn dieser ist für sehende Nutzer unsichtbar. Nutzen Sie hierfür besser eine Bildunterschrift, auch zum Wohle des Urhebers Ihres Bildes.
- Suchmaschinentexte: Alternativtexte dienen nicht dazu, möglichst viele Keywords zu platzieren. Ohnehin haben diese keinen nennenswerten Einfluss auf ihr Ranking.
- Der Hinweis, dass es sich um ein Bild handelt: Das sagen die Screenreader selbständig an und muss nicht erwähnt werden.
Wie schreibe ich gute Alternativtexte – Fazit
Ganz nach dem Motto „So viel wie nötig, so wenig wie möglich“ sollten Alternativtexte möglichst kurz gehalten werden. Vermitteln Sie den Zweck des Bildes, den die Darstellung für Sie und Ihre Zielgruppe hat.