Grafiken barrierefrei einsetzen

Bilder und Grafiken verbessern die Benutzbarkeit und Verständlichkeit von Webseiten und Anwendungen. Häufig wird nur an den blinden Nutzer gedacht, der mit Grafiken wenig anfangen kann. Doch es gibt einige Möglichkeiten, Grafiken für Blinde schmerzfrei einzusetzen, so dass sie allen Gruppen von Menschen mit Behinderung zugute kommen. Schließlich können auch für Blinde gedachte Alternativen den Inhalt für alle Nutzer aufwerten.

Stand: 01.08.2011, Autor: do
Kommentare zu diesem Artikel

Tags: , , ,

Im ersten Teil der Serie werden wir uns mit dekorativen Grafiken und Platzhaltern beschäftigen. Solche Grafiken sind vor allem für das Layout der Website wichtig. Im zweiten Teil wird es um inhaltliche Bilder gehen, sie ergänzen den Inhalt eines Textes oder vermitteln Informationen in einer nicht-textuellen Form. Um funktionale Grafiken wird es im letzten Teil gehen, sie spielen eine entscheidende Rolle bei Webanwendungen.

Im ersten Teil wollen wir uns zunächst mit den verschiedenen Einsatzarten von Grafiken und Beschreibungsmöglichkeiten beschäftigen, bevor wir auf den Einsatz von Platzhaltern und dekorativen Grafiken eingehen.

Vektor- und Pixelgrafiken

Es lassen sich zwei Arten von Grafiken unterscheiden: Vektorgrafiken werden im Computer erzeugt. Schon die Buchstaben, die Sie hier lesen, sind Vektorgrafiken, aber auch alles, was sie mit Zeichenprogrammen wie Illustrator erzeugen können. Vektorgrafiken können ohne Qualitätsverlust vergrößert werden.

Bekannte Vektorformate sind Scalable Vektor Graphics (SVG) und Adobes Flash. Sie werden zum Beispiel für Kartenanwendungen wie Open Street Map eingesetzt. SVG und Flash werden sehr unterschiedlich von den Browsern unterstützt, sie werden daher selten für Schmuckelemente eingesetzt.

Daneben gibt es die Rastergrafiken, die z.B. über einen Scanner oder eine Digitalkamera in den Computer kommen. Rastergrafiken bestehen aus einzelnen Bildpunkten (Pixel). Die Qualität dieser Grafiken sinkt deutlich, wenn sie vergrößert werden.

Pixelgrafik-Formate sind zum Beispiel JPEG, PNG oder GIF. Sie werden praktisch für alle Grafikelemente auf einer Website eingesetzt: für Fotos, aber auch für Zierelemente, Logos und vieles mehr. Wenn Vektorgrafiken in einem Pixelformat gespeichert werden, haben sie die gleichen Vor- und Nachteile wie Pixelgrafiken. Sie werden von den Browsern anstandslos angezeigt, lassen sich aber kaum ohne Qualitätsverlust vergrößern. Das ist vor allem wichtig, wenn Texte in Grafiken eingebettet werden.

Für Blinde sind in Grafiken eingebettete Texte gar nicht wahrnehmbar, für Sehbehinderte mit Vergrößerungssoftware sind sie nur schlecht lesbar. Vor allem längere Texte sollten daher nicht direkt in die Grafik eingebettet, sondern über HTML eingebunden und via CSS positioniert werden.

Vier Arten von Grafiken

Im Internet lassen sich vier Arten von Grafiken nach ihrem Einsatzzweck unterscheiden:

  • Platzhaltergrafiken
  • dekorative Grafiken
  • inhaltliche Bilder
  • funktionale Grafiken

Im Folgenden werden wir durchgängig von Grafiken sprechen, wenn es sich um dekorative oder funktionale Elemente handelt und von Bildern, wenn Abbildungen von Menschen, Gegenständen oder ähnlichem gemeint sind.

Ausgezeichnete Grafiken

Alle Pixelgrafiken werden über das Image-Tag <img> eingebunden. Grundsätzlich gibt es drei Attribute, mit denen das Image-Tag beschrieben werden kann:

  • alt = kurzer Alternativtext
  • longdesc = Lange Beschreibung
  • title = Titel / Tooltip

Alternativtexte gehören zum Standard und dienen vor allem blinden Screenreader-Nutzern. Der Titel erscheint, wenn man mit dem Maus-Cursor über ein Bild fährt. Die long description war ursprünglich dafür gedacht, längere Beschreibungen unterzubringen. Praktisch wurde sie kaum eingesetzt und ist in HTML5 zurzeit nicht mehr vorgesehen. Es gibt außerdem noch die Bildunterschrift, die aber als normaler Text unterhalb des Bildes untergebracht wird und für alle Nutzer ohne weiteres sichtbar ist.

Platzhaltergrafiken und dekorative Grafiken

Platzhalter- und Dekorationsgrafiken sind Teil des Layouts und fallen damit in den Aufgabenbereich des Frontend-Entwicklers. Ihr barrierefreier Einsatz muss also schon bei der Gestaltung der Website berücksichtigt werden.

Platzhaltergrafiken

Platzhaltergrafiken sind kleine unsichtbare Grafiken. Sie sind zumeist 1x1 Pixel groß und dienen zur Stabilisierung des Layouts. Sie wurden zum Beispiel bei Layout-Tabellen eingesetzt, um das Design stabil zu halten.

Wenn unsichtbare Grafiken eingesetzt werden, sollten sie ein leeres alt-Attribut erhalten, in diesem Fall werden sie von Screenreadern ignoriert.
<img src="spacer.gif" alt="">
Ohne alt-Attribut oder title wird der Dateiname vorgelesen, was in keinem Fall sinnvoll ist. Ein Alternativtext wie "Platzhalter" wird hingegen als störend empfunden. Idealerweise sollten Sie Platzhaltergrafiken jedoch vermeiden und die Formatierung den Style Sheets überlassen.

Dekorative Grafiken

Dekorative Grafiken dienen dazu, die Website optisch aufzuwerten. Sie sind in der Regel nicht anklickbar und es ist normalerweise keine Funktion hinterlegt. Sie befinden sich üblicherweise auf jeder Seite des Webauftritts und immer an der gleichen Position, das sind zum Beispiel Banner, Logo, Hintergrundbilder, Zierleisten und so weiter.

Diese Grafiken sind äußerst nützlich: sie sollten auf einen Blick verraten, auf wessen Webauftritt man sich gerade befindet, erhöhen den Wiederkennungswert ungemein und vermitteln deshalb Sicherheit und Orientierung – nützlich für Menschen mit Lernbehinderung oder ältere Menschen.

Logo und Banner sind gewöhnlich mit der Startseite verknüpft und sollten einen entsprechenden Alternativtext enthalten: »Logo Einfach für Alle – zur Startseite« zum Beispiel. Bei grafischen Links sollten Alternativtext und Titel verraten, wo die Links hinführen, eine Beschreibung der verlinkten Grafik ist selten sinnvoll.

Grafiken, die keine Funktion erfüllen, nicht zum Inhalt beitragen und nur der Dekoration dienen, sollten wie Platzhalter-Grafiken ein leeres alt-Attribut erhalten, damit sie Blinde nicht vom Inhalt ablenken.

Für Alternativtext und Titel lassen sich die gleichen Beschreibungen verwenden, der Screenreader liest nur eine der beiden Beschreibungen vor. Die Bildunterschrift – sofern vorhanden – sollte hingegen nicht die gleiche Information enthalten wie Alternativtext und title, weil sie sowohl von Mausnutzern als auch von Screenreadern doppelt wahrgenommen würde.

Was in den Alternativtext gehört oder nicht ist heiß umstritten. Manchen genügt die nüchterne Nennung von Personen- oder Ortsnamen, andere wollen die Stimmung transportiert haben. Wenn das Bild dekorativ ist, sollte es einen möglichst kurzen Alternativtext enthalten. Vor allem, wenn die Bilder in einen Text eingebettet sind, sollte man bedenken, dass lange Alternativtexte oder Bildunterschriften den Lesefluss des Blinden stören können.

Über CSS eingebundene Hintergrundgrafiken lassen sich nicht mit beschreibenden Attributen versehen und sind damit für den Blinden unsichtbar. Hier ist zu beachten, dass sehende Nutzer in der Lage sein müssen, Elemente auf der Website zu erkennen. Das kann schwierig werden, wenn das Hintergrundbild zu wenig Kontrast zu den Inhaltselementen bietet, etwa weil es mit Farbverläufen arbeitet. Achten Sie deshalb bei Hintergrundbildern darauf, dass alle anklickbaren Elemente, Formularbestandteile und Fließtexte sich gut vom Hintergrund unterscheiden lassen. Alle Farbkombinationen jenseits von Schwarz auf Weiß verschlechtern die Lesbarkeit. Der Besucher sollte außerdem auf Anhieb erkennen können, ob eine Grafik anklickbar ist – also eine Funktion hat oder nicht.

Inhaltliche Bilder und Informationsgrafiken

Inhaltliche Bilder ergänzen den Inhalt einer Website: Das Foto in einem journalistischen Artikel, das Diagramm der Umfrage-Statistik, das Organigramm der Firma. Ihr Einsatz ist sinnvoll, weil ein Bild die Aussage eines Textes unterstreichen kann und zu viel Text die Leser häufig abschreckt. Infografiken, wie sie im Datenjournalismus eingesetzt werden, können komplexe Sachverhalte und Zusammenhänge anschaulich vermitteln und sind daher eine gute Ergänzung zum klassischen Journalismus.

Bilder in journalistischen und informativen Texten

Bei journalistischen Texten haben die Bilder eine begleitende Funktion. Sie unterstreichen den Inhalt des Textes, der Text bleibt aber auch verständlich, wenn das Bild aus irgendeinem Grund nicht angezeigt wird.

Hier reicht es aus, den Namen der abgebildeten Person, des Ortes oder Gegenstandes zu nennen. Genauer beschreiben sollte man das Bildobjekt nur, wenn es zum Verständnis des Textes beiträgt. Längere Beschreibungen kann man im Bild-Untertitel unterbringen: »Angela Merkel kritisiert die Opposition« ist für Alternativtext oder Bildunterschrift vollkommen ausreichend. Es ist richtig, dass Bilder auch Emotionen oder Stimmungen vermitteln sollen. Allerdings wird dieser Zweck bereits mit dem eigentlichen Fließtext verfolgt. Wenn die Stimmung von Text und Bild nicht übereinstimmt, sollte die Bildauswahl überdacht werden.

Wenn Sie ein abgebildetes Gemälde oder Kunstwerk beschreiben wollen, sollten Sie das ebenfalls im Fließtext tun. Davon profitieren alle Besucher der Website, zumal bei der im Web üblichen Auflösung für Bilder Details nicht gut zu erkennen sind.

Eine besondere Form journalistischer Produkte sind Bilderstrecken oder Fotoreportagen. Die meisten Blinden werden sich wohl nicht mit Bilderstrecken beschäftigen. Dennoch sollten auch diese Bilder Alternativ- und Titeltexte erhalten. Wir empfehlen außerdem, in einem Begleittext den Inhalt der Bilder zu beschreiben. Sehbehinderte erkennen den Inhalt eines Bildes oft erst, wenn sie wissen, was darauf zu sehen ist.

Informationsgrafiken

Informationsgrafiken erleichtern die Aufnahme von Informationen. Welche Aspekte bei ihrer Erstellung zu beachten sind, wollen wir anhand von Diagrammen anschaulich machen.

Für Diagramme ist entscheidend, dass alle Bestandteile deutlich zu erkennen sind, das gilt auch für die Begleittexte, die zumeist auch als Pixelgrafik eingebunden werden. Bei den Wahlergebnissen stehen die Parteinamen und Prozentangaben oft im Tortendiagramm. Das ist suboptimal, da die Tortenstücke meist in den Parteifarben gestaltet sind und oft zu geringen Kontrast bieten. Wenn Farbe als einziges Unterscheidungsmerkmal verwendet wird, können Farbfehlsichtige einzelne Diagramm-Bestandteile nicht mehr unterscheiden.

Das gilt auch für Legenden-Texte. Wenn Farbe als einziges Erkennungsmerkmal eingesetzt wird, können Farbfehlsichtige den Bezug zwischen Element und erklärender Legende nicht herstellen. Hier gibt es grundsätzlich zwei Lösungswege:

  1. Es gibt außer der Farbe ein weiteres Erkennungselement, zum Beispiel ein bestimmtes Muster.
  2. Element und Beschreibung werden unmittelbar miteinander verbunden, wobei die Beschreibung nicht in das Element eingebettet wird, um die Lesbarkeit zu erleichtern.

Wie kommen die Besucher zu Einfach für Alle

Durch die Farbverläufe sind die Bestandteile des Diagramms auch für Farbfehlsichtige zu erkennen.

Alternativ können die Tortenstücke auch einen kleinen Abstand zueinander haben. Durch den kleinen Abstand werden die Tortenstücke leichter unterscheidbar.

Wie kommen die Besucher zu Einfach für Alle

In jedem Fall sollten die im Diagramm dargestellten Ergebnisse auch als normale HTML-Tabelle angeboten werden, damit auch Blinde die Ergebnisse erkennen können. In keinem Fall ist es sinnvoll, die Ergebnisse im Alternativ- oder Titeltext unterzubringen, weil das unübersichtlich ist. In unserem Fall ist ein Alternativtext wie »Herkunft der Besucher von Einfach für Alle« als Tortendiagramm« ausreichend.

Herkunft der Besucher von Einfach für Alle
Direkteingabe / nicht verfügbar27.75342,35 %
Suchmaschinen24.02436,66 %
Andere Sites13.75320,99 %

Weitere Umsetzungsbeispiele für Informationsgrafiken finden Sie in der Linkliste.

Emoticons

Emoticons werden in ihrer Bedeutung unterschätzt. Früher wurden sie über spezielle Zeichenfolgen generiert (;-) und ähnliches), heute geht man dazu über, entweder graphische Emoticons zur Einbindung in den Text anzubieten oder sie automatisch aus den Zeichenfolgen zu generieren. Einige aktuelle Screenreader erkennen die wichtigsten Zeichenketten und lesen sie zum Beispiel als »Smiley« vor. Mit den Grafiken geht das nicht, meistens haben die graphischen Emoticons auch keinen Alternativtext. Das kann durchaus problematisch sein, denn mit solchen Emoticons kann Ironie ausgedrückt werden, wer dies aber nicht erkennen kann, versteht auch nicht, dass jemand etwas ironisch gemeint hat, was zu einer endlosen Kette von Missverständnissen führen kann. Wünschenswert sind also alt-Texte für graphische Emoticons. Wenn man sie nicht all zu exzessiv einsetzt, können sie Menschen mit unterschiedlichen Behinderungen durchaus helfen, einen Text besser zu verstehen. Eine solche Funktion muss allerdings im Redaktionssystem angelegt sein, da Redakteure und Nutzer normalerweise keinen Einfluss auf die Ausgestaltung dieser Grafiken haben.

Grafiken in Gebrauchstexten

Bei Anleitungen zur Behebung von Software-Problemen oder Ähnlichem werden häufig Screenshots verwendet. Die erklärenden Texte dazu sind eher sparsam. Was der Sehende auf den ersten Blick erfasst – den Unterschied zwischen zwei Screenshots – muss der Sehbehinderte erst einmal mühsam erfassen und der Blinde hat dazu gar keine Chance. Vor allem für Sehbehinderte und Blinde ist eine exakte Beschreibung sinnvoll: Welches Menü oder welcher Dialog wird aufgerufen, welcher Karteireiter wird ausgewählt, welche Option soll aktiviert oder deaktiviert werden? Die Vorgänge sollten so detailliert beschrieben werden, dass die Aktion auch ohne den Screenshot nachvollzogen werden kann.

Alternativtexte und Bildunterschriften

Grundsätzlich sollte ein Alternativtext kurz sein. Er unterbricht meistens den Lesefluss und ist oft nicht so wichtig zum Verständnis des Textes. Längere Beschreibungen sollten in die Bildunterschrift, wo sie allen zugute kommen. Wie schon im ersten Teil erwähnt können für Alternativtext und Titel die gleichen Texte verwendet werden, die Bildunterschrift sollte sich hingegen von beiden unterscheiden.

Größe der Grafiken

Für Sehbehinderte ist es nützlich, wenn sie die Bilder vergrößern können. Zwar stellen die Browser einfache Vergrößerungsfunktionen bereit, aber wie schon im ersten Teil erwähnt verschlechtert sich die Qualität von Pixelgrafiken bei Vergrößerung. Eine Lösung besteht darin, das normale Bild mit einem Link zu einer größeren Version des Bildes zu unterlegen.

Die Erstellung und Einbindung inhaltlicher Bilder fällt in den Aufgabenbereich von Redakteuren. Sie sollten für diesen Bereich geschult und sensibilisiert werden. Auch Redaktionshandbücher und Leitfäden sollten um entsprechende Anleitungen ergänzt werden.

Funktionale Grafiken

Funktionale Grafiken sind Grafiken, mit denen eine Funktion verbunden ist. Sie werden auf praktisch allen Webseiten eingesetzt, bekannt sind zum Beispiel das Drucker-, das Brief- oder RSS-Symbol, deren Funktion mehr oder weniger intuitiv erkennbar ist. Sie werden aber auch in komplexen Webanwendungen wie Google Text und Tabellen verwendet.

Die Symbole sind äußerst eingängig, weil wir sie teilweise schon aus anderen Kontexten kennen: den Desktop-Anwendungen, wo sie von Normal-Sehenden und Maus-Nutzern ausgiebig verwendet werden. Abgesehen von Blinden und stark sehbehinderten Menschen kommen diese Grafiken praktisch allen Menschen zugute, wenn sie gut gewählt und eingängig sind.

Sie machen aus einer komplexen Interaktion mit der Website einen einfachen und intuitiven Prozess. Für Menschen mit Lernbehinderungen erleichtern sie ungemein die Bedienung der Seite.

Alternativer YouTube-Player

Screenshot des Players

Christian Heilmanns alternativer YouTube-Player erleichtert die Bedienung durch große und leicht erkennbare Bedienelemente.

Wahl der Grafiken

Um eine Grafik verwenden zu können, sollte sie hinreichend bekannt sein. Webdesigner mögen viel Energie in eine hübschere Metapher zum Einkaufskorb investieren. Das bringt aber nur etwas, wenn die Funktion »Ware in eine Zwischenablage speichern, um sie beim Abschließen des Bestellvorgangs mit weiteren Waren zu bestellen« dem Nutzer deutlich wird. Diese ausschweifende Funktionsbeschreibung macht den Sinn dieser simplen Metapher vom Warenkorb deutlich. Statt langatmige Erklärungen abzugeben, versteht jeder Mensch mit ein wenig Erfahrung im Internet-Einkauf, was der Erschaffer der Seiten mit dem Warenkorb-Symbol mitteilen möchte.

Das gilt natürlich nur für Funktionen, die hinreichend etabliert sind. Nehmen wir an, wir entwickeln eine vollkommen neue Funktion, wenn wir etwa eine neue Webanwendung etablieren. Dann können bzw. müssen wir uns eine eigene Symbolsprache ausdenken, sofern keine Vorbilder vorhanden sind. In diesem Falle kommen wir kaum daran vorbei, dem Nutzer einen Lernprozess zu unterwerfen, indem er bei der Nutzung der Anwendung nach und nach auch die Funktionen der Symbole kennenlernt und die verwendete Bildsprache versteht. Dennoch kann der Lernaufwand möglichst gering gehalten werden, indem eingängige Symbole eingesetzt werden. Für die Erstellung solcher Funktionsgrafiken sollten entsprechend Experten beauftragt werden. Auch Tests zur Verständlichkeit mit echten Nutzern sind empfehlenswert.

Die Größe der Funktionsgrafiken

Jede Grafik muss so groß sein, dass sie mit der Maus gut anzuklicken ist. Die Grafiken müssen einen gewissen Abstand zueinander haben und sie sollten bei normaler Auflösung auf einem mittelgroßen Bildschirm gut zu erkennen und gut anzuklicken sein. Wichtig ist auch, dass die Grafiken per Tastatur angesteuert und aktiviert werden können. Sowohl für Maus- als auch für Tastaturnutzer muss erkennbar sein, welches Element sie gerade fokussiert haben, etwa über einen Rahmen oder eine Farbänderung.

Für Menschen mit motorischen Einschränkungen, die mit einer Maus oder einem speziellen Eingabegerät arbeiten, sind zu kleine Klickflächen und zu eng beieinander stehende Elemente schwierig zu treffen. Das gilt auch für die Nutzer von mobilen Endgeräten wie Netbooks, Tablet-PCs oder gar Smartphones.

Auszeichnung

Blinde benötigen einen Alternativtext, alle anderen Nutzer brauchen den title, um bei Verwendung der Maus zu erfahren, welche Funktion sich hinter der Grafik verbirgt. Ein Briefsymbol könnte eine Kommentarfunktion, eine Leserbrief-Funktion oder ein E-Mail-Formular sein. Für Funktionstexte gilt immer das Gleiche: möglichst kurz, möglichst prägnant, möglichst eindeutig. Es kommt gar nicht so selten vor, dass der Beschreibungstext die Grafik und nicht ihre Funktion beschreibt, zum Beispiel »Pfeil nach links« statt »zurück«: Das Druckersymbol bekommt also den Alternativtext und Titel »Drucken«, das RSS-Feedsymbol wird mit »Feed abonnieren« hinreichend beschrieben.

Grafische CAPTCHAs

Auch CAPTCHAs sind funktionale Grafiken. Ihr Einsatz ist eher kritisch zu sehen. Zwar stellen viele Systeme wie ReCaptcha alternative Audiodateien zur Verfügung, diese sind aber schwer zu verstehen, zumal sie auch nur auf Englisch angeboten werden. Viele Alternativ-Mechanismen funktionieren auch gar nicht, wenn die Nutzer Flash oder JavaScript blockieren. Für Hör-Sehbehinderte sind weder graphische noch auditive Lösungen verwendbar. Wir raten daher generell von der Nutzung von graphischen CAPTCHAs ab. Sie sollten durch nichtgrafische Alternativen wie Rechenaufgaben und einen leistungsfähigen Spamschutz ersetzt werden. Nebenbei bemerkt haben mittlerweile einige Programme eine bessere Erkennungsrate als Menschen.

Fazit

Der bedachte Einsatz von Bildern und Grafiken kann für viele Menschen mit und ohne Behinderung die Nutzung einer Webseite erleichtern. Wie wir gesehen haben, ist das eine Querschnittsaufgabe. Für Platzhalter-, Dekorations- und Funktionsgrafiken sind vor allem Webdesigner und Frontend-Entwickler gefragt. Für inhaltliche Bilder müssen die Redakteure Alternativtexte und Titel vergeben, wofür eine Funktion im Redaktionssystem vorhanden sein muss. Das Regelwerk sieht zwar sehr umfangreich aus, wenn man aber einmal identifiziert hat, um welchen Grafiktyp es sich handelt, ist auch leicht zu entscheiden, wie Alternativtext, Titel und Bildunterschrift aussehen sollten.