accessBlog

Grafiken barrierefrei einsetzen Teil 1 – Platzhalter- und Dekorationsgrafiken

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.

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.

Weiterlesen …

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.