accessBlog

Grafiken barrierefrei einsetzen Teil 3 – 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.

Weiterlesen …

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

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.