Dieser Leitfaden soll Sie in das Verfassen sinnvoller Alternativtexte einführen. Er geht schrittweise vor. Anlass für diesen Leitfaden ist, dass diese Frage immer wieder gestellt wird.
Generelles zu Alternativtexten
Der Begriff Alternativtext wird häufig synonym mit Bild-Beschreibung verwendet. Tatsächlich gibt es viele Wege, eine Bild-Beschreibung zu vermitteln, der Alternativtext ist der gängigste, aber nicht immer geeignet. Mögliche Alternativen sind ARIA Label, ARIA Labeled by oder das Title-Attribut. Für längere Beschreibungen könnte ein per Tastatur erreichbarer Tooltipp, ein Link auf eine neue Seite mit der Beschreibung oder ein aufklappbares Akkordeon verwendet werden. Eine weitere Möglichkeit ist das Detail-Tag aus HTML: Dieses Tag erlaubt das Anbieten einer ausklappbaren Beschreibung. Das Long Desc-Atribut aus HTML 4 gilt als veraltet und sollte nicht mehr eingesetzt werden.
Alternativtexte werden nur von Screenreadern vorgelesen. Meines Wissens können die Vorlese-Tools von Lese- oder Sehbehinderten keine Alternativtexte vorlesen. Ich lasse mich aber gerne eines Besseren belehren. Wenn Sie ausführliche Beschreibungen bereitstellen, würde ich empfehlen, diese allen Leserinnen anzubieten, also nicht im Alttext unterzubringen. Wenn Sie sich so viel Mühe mit einer Beschreibung machen, sollte sie doch möglichst vielen Interessierten angeboten werden. Wie oben beschrieben kann man sie einfach als Popup oder ausklappbar anbieten, so dass sie in geschlossenen Zustand keinen zusätzlichen Platz wegnimmt.
Die Information, dass es sich um eine Grafik oder um einen Link handelt, muss nicht im Alternativtext stehen. Der Screenreader gibt stets die Information „Grafik“ oder „Grafik Link“ und folgend den hinterlegten Alternativtext aus.
Copyright-Informationen oder der Name des Fotografen bzw. Urheberrechte am Foto haben nichts im Alternativtext zu suchen. Diese Informationen sind für den Blinden irrelevant und ein Zeichen für mangelnde Sorgfalt. Wenn es sich um Pflicht-Infos handelt, wären sie im Alttext ohnehin falsch, da dieser wie erwähnt nur Blinden angezeigt wird – wenn sie das Bild nicht sehen können, dürften Ihnen auch Urheber-Infos recht egal sein.
Eine Doppelung der Informationen im Alternativtext und einer Bild-Unterschrift sind zu vermeiden. Enthält eine Bildunterschrift eine Beschreibung und folgt diese logisch auf das Bild, kann der Alternativtext leer gelassen werden (img alt=““). In diesem Fall muss der Blinde wissen, dass der Text zum Bild gehört. Die Bild-Unterschrift sollte sich also direkt unter dem Bild befinden und einen eigenen Absatz bilden. Technisch kann das über das Attribut „Aria described by“ sichergestellt werden.
Sind alle relevanten Informationen zum Bild im Fließtext enthalten, in der Regel bei Informationsgrafiken oder Kunst-Objekten, kann der Alternativtext kurz gehalten werden. Praktisch kann ein Blinder sich alle Bilder und Alternativtexte eines Dokuments anzeigen lassen. Dies würde aber mit ein paar Ausnahmen auch kein Sehender tun, deshalb sollte das selten vorkommen.
Output-Ökonomie als Prinzip von Alternativtexten
Häufig kommt die Frage, warum Alttexte kurz gehalten werden sollten. Analog der Erzähl-Ökonomie können wir hier von der Ausgaben-Ökonomie sprechen: Blinde Personen müssen vor allem überflüssige Informationen filtern können. Je mehr Informationen ihnen vermittelt werden, die im aktuellen Kontext nicht relevant sind, desto stärker werden sie vom eigentlichen Inhalt abgelenkt.
Mir ist kein Screenreader bekannt, der Alternativtexte sequenz-weise verarbeiten kann. Üblicherweise werden Alternativtexte, unabhängig von ihrer Länge, in einem Stück vorgelesen. Deswegen rate ich von zu langen Alternativtexten ab. Insbesondere das Aufzählen von Einzel-Werten etwa aus Diagrammen ist selten sinnvoll.
Das Argument ist korrekt, dass kein Blinder den Alttext komplett lesen muss. Mit diesem Argument können Sie auch ewig lange Texte ins Web stellen. Unabhängig davon kann ja tatsächlich etwas Wichtiges in einem Alttext enthalten sein und dann wird dem Blinden diese wichtige Information entgehen.
1. Ist die Grafik verlinkt oder hat sie eine Funktion?
Wenn die Grafik verlinkt ist, stellt sich die Frage, wo der Link hinführt. Bei einer verlinkten Grafik ist also das Ziel des Links wichtiger als das, was in der Grafik zu sehen ist. Es gibt mehrere denkbare Fälle:
- Der Link öffnet eine größere Ansicht des Bildes. Dann reicht die Info Bildbeschreibung + „öffnet größere Ansicht“. Die größere Ansicht ist für den Blinden in der Regel irrelevant, aber er muss trotzdem wissen, was der Link tut.
- Der Link startet einen Download, z.B. einer Broschüre. Dann kann die Beschreibung zum Beispiel „Laden Sie die Broschüre XY herunter“ lauten.
- Öffnet der Link einfach nur eine neue Webseite, können Sie vorgehen wie bei jedem anderen Link. Schreiben Sie aber in jedem Fall dazu, wenn der Nutzer durch das Öffnen des Links Ihre Website verlässt, denn das bekommt man als blinde Person nicht immer mit.
Löst die Grafik eine Funktion aus, etwa bei einem grafischen Button, ist die Beschreibung der ausgelösten Funktion relevant. „Nach rechts zeigender Pfeil“ ist also keine gute Beschriftung, „Weiterblättern“ oder „zur nächsten Seite blättern“ schon eher.
Im Alternativtext sollte also das Ziel des Links oder die ausgelöste Aktion stehen. Auf eine Beschreibung der Grafik kann in diesem Fall komplett verzichtet werden.
2. Wie wichtig ist die Grafik?
Der nächste Fall tritt ein, wenn die Grafik nicht verlinkt ist oder keine Funktion hat.
Die Frage ist: Was würde passieren, wenn die Grafik nicht geladen wird? Würden wichtige Informationen für den Nutzer verloren gehen?
Ist das nicht der Fall, reicht eine schlichte Beschreibung der Grafik. Empfohlen werden 80 Zeichen oder weniger, technisch gibt es keine Begrenzung.
Relevanz und Kontext
Die Ausführlichkeit einer Bild-Beschreibung ist stets von der Relevanz der Grafik abhängig. Wie relevant eine Grafik ist, hängt aber immer vom Kontext ab. Bei Symbolen oder Icons, die keine eigene Information enthalten sollte der Alternativtext leer gelassen werden. Was häufig vorkommt sind Grafiken, die selbst Informationen enthalten: Diagramme, Organigramme, Schaubilder und so weiter. Wenn ja, kann der Alternativtext kurz gehalten werden. Dem Alternativtext kann die Information „Detailierte Informationen finden sie im Text“ bzw. „… in der Tabelle“ angehängt werden. Handelt es sich um einen langen Text, ist ein Verweis auf den konkreten Abschnitt sinnvoll, wo diese Information gefunden wird. Wenn nein, empfehlen wir den Einsatz einer einfachen Tabelle für Zahlenwerte. Wurden Grafiken aus einer Tabelle erzeugt, sollte immer auch die Tabelle dazu angeboten werden. Es ist schlichtweg Zeitverschwendung, Linien-, Säulen- oder Balkendiagramme ausführlich zu beschreiben. Beschreiben Sie im Alt-Text kurz die Entwicklung, wie sie einem Sehenden auf den ersten Blick auffallen würde und verweisen Sie ansonsten leicht erkennbar auf die zugehörige Tabelle. Eine spezielle Herausforderung sind Bilder-Galerien. An sich ist eine Beschreibung jedes einzelnen Bildes nicht sinnvoll, weil hier tatsächlich die Bilder an sich wirken, nicht aber die Beschreibung. Hier reicht meines Erachtens ein vorangestellter Satz, der darauf verweist, dass sich hier eine Bilder-Galerie befindet. Das Alt-Attribut kann leer gelassen werden, damit die Bilder als dekorativ erkannt werden. Icons, die im Fließtext verwendet werden, benötigen grundsätzlich keinen Alternativtext. Ein Beispiel sind spezielle Icons, die anstelle von Listensymbolen verwendet werden. Hier sollte einfach das HTML-Markup für Listen verwendet werden, die Listensymbole werden dann mit CSS erzeugt und werden Blinden korrekterweise nicht vorgelesen. In den letzten Monaten und Jahren kam bei mir häufig die Frage an, ob man Personen in Alt-Texten beschreiben sollte. Auch hier ist die Frage immer abhängig vom Kontext, ich tendiere aber eher zum Nein, die Gründe habe ich anderswo beschrieben. Ein weiterer Grund ist die oben erwähnte Ausgaben-Ökonomie. Ja und nein: Theoretisch lässt sich jedes auch noch so komplexe Bild beschreiben. In der Praxis sind aber viele Grafiken so komplex, dass sie nicht sinnvoll beschrieben werden können. Beispiel sind umfangreiche Landkarten, elektronische Schaltpläne, Bauzeichnungen und vieles mehr. Aus meiner Sicht ist es die Aufgabe des Content-Erstellenden, Bild-Beschreibungen zu erstellen. Die vor- oder nachgelagerten Personen wie Desktop Publisherinnen oder Designerinnen verfügen in der Regel nicht über das nötige Know How bzw. wissen nicht, was die Aussage des Bildes sein soll. In jedem Fall sollten Sie vorher klären, wer diese Aufgabe übernimmt, damit die zuständige Person die Aufwände vernünftig kalkulieren kann und die Qualität ausreichend ist. Gerade bei PDF-Broschüren ist das Erstellen von Beschreibungen ein teils enormer Mehr-Aufwand. Bei Website-Templates muss man sauber zwischen Rahmen unterscheiden – also Logos, Banner-Grafiken und ähnliches – und Content. Bei Ersterem ist die Konzeption, bei Letzterem die Redaktion zuständig. Generell gilt die Anforderung für Bildbeschreibungen auch für automatisch generierte Grafiken wie bei Frameworks für Infografiken wie HighCharts. Hier muss – wie oben beschrieben – die Beschreibung durch das Angebot einer Tabelle ergänzt werden.
Die folgenden Beispiele sollen das veranschaulichen. Bitte denken Sie aber stets daran: Informationen, die im Fließtext enthalten sind, brauchen in der Bild-Beschreibung nicht vorzukommen.
Beispiel I: Ein Artikel der Deutschen Bahn mit einem Bild von einem Zug
Beispiel II: Segelboot auf offenem Meer
Ein Segelboot dient häufig als Aufhänger in einem Urlaubs-Katalog. In diesem Fall würden Sie das Bild kurz beschreiben, denn es dient dekorativen Zwecken.
Wäre das Bild in einem Segel-Magazin enthalten, wären natürlich mehr Infos interessant: Was ist es für ein Boot, aus welcher Epoche stammt es, wie viele Segel hat es und so weiter.
Beispiel III: Ein Elefant wirft einen Basketball in einen Korb
Auch das wäre ein typisches Motiv in einem Urlaubs-Katalog. Ein Tierschutz-Verband würde aber ganz andere Informationen kommunizieren und entsprechend auch die Bild-Beschreibung anders fassen.
Zum Beispiel werden in Linklisten gerne Icons vorangestellt. Dazu gehört die nach rechts zeigende Hand oder ein Pfeil. Diese Icons haben für Blinde keinen Mehrwert und hier sollte der Alternativtext leer gelassen werden. Eine kurze Beschreibung würde den Lesefluss stören. Technisch gesehen wird das Alt-Attribut gesetzt, aber nicht befühlt. Sind die Grafiken wie heute üblich als SVG (also nicht mit dem Image-Tag) eingebunden, können sie für den Screenreader ausgeblendet werden, etwa mit ARIA hidden.
Für diesen Zweck werden häufig auch CSS-generierte Icons verwendet. Diese werden ohnehin vom Screenreader ignoriert und bedürfen keiner weiteren Behandlung. 3. Die Grafik enthält eigene Informationen
3.1. Kommen die enthaltenen Informationen im Text oder in einer Tabelle vor?
3.2. Die Informationen kommen nicht im Content vor
Für komplexe Grafiken, etwa Organigramme, sportliche Übungen oder Kunstwerke empfiehlt sich eine längere, systematische Beschreibung. Sie kann auf der selben Seite oder per Link auf eine Extra-Seite bereit gestellt werden. Eine technisch einfach umsetzbare Möglichkeit ist auch, die Beschreibung als Tooltipp oder in einem Akkordeon unter dem Bild bereitzustellen. Ein Akkordeon hat den Vorteil, dass es technisch einfach barrierefrei umsetzbar ist. Der Vorteil dieser Maßnahmen besteht darin, dass die Beschreibung per Akkordeon, Tooltipp oder über andere Wege auch Personen zur Verfügung stehen, die keinen Screenreader benutzen und die Grafik nicht oder nicht gut erkennen können.
Ausführliche Infos gibt es im Artikel Wie beschreibe ich etwas für Blinde.3.3 Aus Tabellen erzeugte Grafiken
Technisch kann so etwas platzsparend etwa über Tabs bereitgestellt werden: Der linke Tab zeigt die Grafik, der rechte die Tabelle oder ähnlich. Die heute verwendeten Bibliotheken zur dynamischen Grafik-Erzeugung bzw. Darstellung sollten solche Möglichkeit bieten. Bildergalerien
Es sind Fälle denkbar, in denen die Beschreibung einzelner Bilder aus einer Galerie sinnvoll ist. Das sind zum Beispiel Artikel-Galerien, bei denen das Bild der einzige Hinweis auf das Angebot/Produkt ist. Hier gilt das, was für anklickbare/verlinkte Grafiken immer gilt: Entweder wird das Ziel oder der Zweck des Links beschrieben. Icons und Emoticons
Werden Icons verwendet, um Textstellen hervorzuheben, benötigen diese ebenfalls keine Beschreibung. Ein Beispiel wäre ein vorangestelltes Ausrufezeichen. Die Hervorhebung als solche sollte semantisch korrekt, etwa über die HTML-Elemente em oder strong kommuniziert werden.
Ein Sonderfall sind grafische Emoticons, die für das Verständnis des Textes relevant sind, zum Beispiel ein Smiley, um zu zeigen, das eine Aussage ironisch gemeint war. Solche Grafiken müssen eine Beschreibung haben, da hier klar Informationen grafisch kommuniziert werden. Emojis aus dem Unicode-Standard werden Blinden standardmäßig mit Text-Beschreibung vorgelesen und benötigen keinen Alternativtext. Sollte man in Alt-Texten das Aussehen von Personen beschreiben??
Ein Pro-Argument kann sein, dass Diversität dargestellt werden soll. Das gilt etwa, wenn man Personen unterschiedlicher Hintergründe auf den Bildern zeigt.
Es kann natürlich auch immer sein, dass die Eigenschaften einer Person auch eine Person beschreiben sollen: Ein älterer Mann, der Sport macht sagt etwas anderes aus als eine junge Frau, die Sport macht. Tauschen wir jung und alt mit schlank und übergewichtig, wird das noch ein wenig klarer.
Allerdings sieht man hier das Problem: Sobald man mit Adjektiven arbeitet, bewertet man. Bewertungen bzw. Interpretationen sollen aber in der Regel vermieden werden.
Ein Problem sind auch unsichtbare Behinderungen bzw. Models. Bei unsichtbaren Behinderungen sind die Behinderungen nicht zu sehen, gehören also nicht in die Bild-Beschreibung. Wenn die Personen auf den Fotos „nicht echt“ sind, also irgendwelche Models, die Diversität der Belegschaft nur vortäuschen, wird es endgültig schwierig.
Zu diesem Thema gibt eskeine abschließende Einschätzung. Wenn Sie meinen, dass das Aussehen, Alter, der Hintergrund oder eine andere Eigenschaft der Person für den Sehenden/Blinden relevant ist, halten Sie sich auf jeden Fall kurz, interpretieren Sie nicht zu viel und gehen Sie sparsam mit Adjektiven um. Begriffe wie attraktiv, offensichtlich,, weiß/schwarz (bezogen auf Hautfarbe) sollten nach meiner Einschätzung komplett vermieden werden. Gibt es unbeschreibbare Bilder?
Viele dieser Grafiken werden in erster Linie in sehr speziellen Kontexten eingesetzt. Natürlich ist Inklusion immer anzustreben. Allerdings ist für mich kaum vorstellbar, warum man z.B. einen elektronischen Schaltplan oder eine Bauzeichnung für Blinde beschreiben machen sollte. Sie richten sich an Fachleute, das heißt, auch Sehende ohne diese Qualifikation wären überfordert.
Es gibt grundsätzlich mehrere Möglichkeiten, sie dennoch zu beschreiben. Eine Möglichkeit ist, Ebenen herauszunehmen und nur Grundrisse zu beschreiben.
Eine weitere Möglichkeit wäre, tatsächlich die Grafik systematisch zu beschreiben. Hier ist allerdings das Problem, dass bei einigen Blinden das visuelle Vorstellungsvermögen nicht gut genug ausgeprägt ist. Ich zum Beispiel kann mir keine komplexen Grafik-Beschreibungen einprägen, wobei mein Vermögen an dieser Stelle generell überschaubar ist, es mag sein, dass andere Blinde das besser können.
Eine weitere Möglichkeit sind tastbare Modelle, etwa aus dem 3D-Drucker oder eine echte elektronische Schalttafel, die sich anfassen lässt. Taktile Grafiken können auch relativ einfach mit Lego oder ähnlichen Prinzipien nachgebaut werden. Im Endeffekt ist es allerdings so, dass taktile Grafiken eine wesentlich geringere Auflösung haben als visuelle Grafiken. Das heißt, entweder muss man weniger Details darstellen oder man benötigt deutlich mehr Platz.
Tatsächlich haben wir aber noch keine saubere Methodik entwickelt, um solch komplexe Grafiken adäquat zu beschreiben. Derzeit kommen wir meines Erachtens nicht an persönlichen Beschreibungen vorbei, also an einer Beschreibung durch eine richtige Person, bei der man dann auch Rückfragen stellen kann. Rollen-Verteilung
Franeworks zur Grafik-Generierung
Wie oben beschrieben ist die Beschreibung des visuellen Aufbaus eines Diagrammes in der Regel nicht sinnvoll. Drei hellblaue Säulen auf grauem Grund und Ähnliches ist ein Overload an unnötigen und teils auch unverständlichen Infos. Die Kern-Aussage ist interesant. Lässt sich diese nicht automatisch generieren oder gibt es nicht die Möglichkeit, den Text manuell anzupassen, verweisen Sie im Alttext auf die Tabelle.
Anders sieht die Sache natürlich bei nicht aus Tabellen generierten Grafiken aus. Hier muss die zuständige Redakteurin die Beschreibung manuell erstellen. Weitere Infos