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, also insbesondere stark sehbehinderten und blinden Menschen, ein viel besseres Bild der Website geben und oft ansonsten nicht zugängliche Informationen anbieten.
Dann ist der Alternativtext leer. Schauen wir uns an, wie man diese Texte definiert und welchen Inhalt sie haben sollten, damit Bilder barrierefrei eingebunden sind.
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. Daher kommt auch der oft für den Alternativtext verwendete Begriff „alt-Text“. Die meisten CMS bieten inzwischen unkomplizierte Möglichkeiten an, an den hochgeladenen Medien Textalternativen zu hinterlegen, die automatisch in den Quelltext eingefügt werden. 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 mitdisplay: 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 verraten, wohin der Link führt und vermutlich verwirren, zurecht. Die Information „Zum Kontaktformular“ macht dem Hörer jedoch sofort klar, wohin ihn der Link führen wird. Textalternativen von verlinkten Bildern enthalten also meist Informationen über das Ziel des Links.
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 textliche 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.
Schriftgrafiken
Bilder, auf denen Text zu sehen ist, sollten grundsätzlich vermieden werden. Das liegt daran, dass die Schrift auf diesen Bildern sich nicht, wie sonst auf einer barrierefreien Website, an die Einstellungen der Nutzer anpassen kann. Haben Sie trotzdem ein Bild mit Text, beispielsweise ein Plakat oder einen Flyer, dass Sie gern einbinden wollen, dann gilt dasselbe wie bei anderen Bildern: Sie müssen das Bild beschreiben. Wenn es nicht zu umfangreich wird, dann wird in den Alternativtext aufgenommen, was auf dem Bild steht. Häufig sind diese Informationen wichtiger als die eigentliche Grafik oder das Foto. Menschen, die das Bild nicht sehen, erhalten so trotzdem die wichtigsten Daten.
Dekorative Elemente
Grundsätzlich benötigen alle visuellen Inhalte eine textuelle Alternative. Dazu zählen das Logo, aber auch verwendete Icons und natürlich die allgemeinen Inhaltsbilder. Einzige Ausnahme bilden Grafiken, die rein dekorativ sind (beispielsweise meine Farbkleckse hinter den Zeichnungen). Da diese Bilder für Screenreader-Nutzer keine relevanten Informationen liefern, werden Sie mit einem leeren Alternativtext ausgestattet. Per img-Tag eingebundene Grafiken erhalten also ein leeres alt-Attribut, es muss aber trotzdem gesetzt sein! für SVG und Hintergrundgrafiken können die Texte komplett weggelassen werden.
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 sind Alternativtexte 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.
- 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.
- Ort der Aufnahme: falls es nicht für den Bildinhalt ohnehin relevant ist (zum Beispiel bei einem Foto des Eiffelturms), dann ist das alt-Attribut auch kein Ort für Angaben des Ortes oder eventuell sogar der Koordinaten.
Ergänzen Sie zusätzlichen Informationen wie Lizenzen, Ortsangaben oder Namen von dargestellten Personen lieber in einer Bildunterschrift, denn sie sind ja für alle Leser relevant und nicht nur für Menschen mit einer Sehbehinderung.
Wie kann ich barrierefreie Alternativtexte schreiben – Fazit
Ganz nach dem Motto „So ausführlich wie nötig, so kurz wie möglich“ sollten Alternativtexte möglichst knapp gehalten werden. Vermitteln Sie den Zweck des Bildes, den die Darstellung für Sie und Ihre Zielgruppe hat. Bleiben Sie effizient und erwähnen Sie nur die wichtigsten Informationen der Abbildung. Enthält Ihre Website sehr viele Bilder, sind Nutzer sonst schnell frustriert.
Im Übrigen profitieren nicht nur Ihre Nutzer von einem gut geschriebenen Alternativtext. Auch SEO, also die Suchmaschinenoptimierung Ihrer Website wird sich freuen, denn google kann Bilder mit einer Bildbeschreibung besser einordnen und wird sie dann auch besser indizieren und ranken. Erfahren Sie mehr darüber, wie alt-Text und title-Attribut im SEO genutzt werden.
Ein automatisch generierter Alternativtext durch KI ist dagegen nur eine Notlösung. Sie beschreiben zwar einigermaßen akkurat, was auf dem Bild abgebildet ist, haben aber keine Idee von der Funktion des Bildes. Gute Alternativtexte für Grafiken sind Handarbeit.