Was in der "analogen Welt" bereits in vielen Bereichen als eine Selbstverständlichkeit wahrgenommen wird, wird bei der Gestaltung und Realisation von Web-Angeboten leider nur all zu selten, oder nur stiefmütterlich beachtet - das Thema der Barrierefreiheit.
Barrierefreie Web-Angebote sind solche, die unabhängig von körperlichen und psychischen Behinderungen, altersbedingten Einschränkungen, dem Bildungsgrad und dem Endgerät genutzt werden können.
Oft hört man, dass barrierefreie Seiten "nicht schön aussehen können". Mit diesem Vorurteil möchten wir aufräumen, denn prinzipiell unterscheiden sich die Anforderungen an die Gestaltung eines barrierefreien Web-Angebotes nicht all zu sehr von den Anforderungen die ohnehin bestehen. Welche Kniffe bei der Gestaltung beachtet werden müssen möchten wir euch im folgenden kurz vorstellen.
Wer? Wie? Was? - Die rechtliche Grundlage
Grundlage von barrierefreien Web-Angeboten ist die "Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz (Barrierefreie-Informationstechnik-Verordnung - BITV 2.0)". In dieser sind die Anforderungen an barrierefreie Webangebote beschrieben. Hierbei werden die Anforderungen in vier Prinzipien kategorisiert und anschließend in zwei Stufen priorisiert.
Die Prinzipien denen die Anforderungen folgen sind die folgenden:
- Prinzip 1: Wahrnehmbarkeit — Die Informationen und Komponenten der Benutzerschnittstelle sind so darzustellen, dass sie von den Nutzerinnen und Nutzern wahrgenommen werden können.
- Prinzip 2: Bedienbarkeit — Die Komponenten der Benutzerschnittstelle und die Navigation müssen bedient werden können.
- Prinzip 3: Verständlichkeit — Die Informationen und die Bedienung der Benutzerschnittstelle müssen verständlich sein.
- Prinzip 4: Robustheit – Inhalte müssen so robust sein, dass sie von möglichst allen Benutzeragenten, einschließlich assistiver Technologien, zuverlässig interpretiert werden können.
Die BITV 2.0 trat 2011 in Kraft und wurde letztes Jahr überarbeitet. Nun könnte man sich also die Frage stellen, warum die barrierefreie Umsetzung von Web-Angeboten, trotz seiner rechtlichen Relevanz, noch immer so selten berücksichtigt wird? Eine Antwort auf diese Frage ist jedoch schnell gefunden, denn die BITV 2.0 gilt zunächst nur für Web-Angebot "der Träger öffentlicher Gewalt". Für alle anderen Web-Angebote steht somit keine gesetzliche Verpflichtung zur Berücksichtigung der Verordnung.
Die Praxis
Ausreichende Kontraste berücksichtigen
Eine zentrale Anforderung bei der Gestaltung von barrierefreien Webauftritten ist es, ausreichende Kontraste für Schriften zu verwenden. In der Praxis heisst das, dass der Helligkeitskontrast für Texte die kleiner sind als 24px bei 4,5:1 liegen muss und für größere Schriften bei 3:1.
Selbiges gilt auch für Grafiken die auf der Seite verwendet werden. Hierbei muss jedoch zwischen verschiedenen Arten von Grafiken unterschieden werden. So gilt dies nur für grafische Bedienelemente (bspw. Such-Icon)und "informative Grafiken", nicht aber für Fotos oder "dekorative Grafiken". Doch was genau sind "informative Grafiken"? Unter informativen Grafiken sind all jene Abbildungen zusammengefasst, die Informationen beschreiben oder verdeutlichen, beispielsweise Illustrationen, Diagramme oder grafische Schriften (wobei auf diese nach Möglichkeit verzichtet werden sollte), oder auch Abbildungen die darstellen wie ein Objekt oder eine Person aussehen.
Ein nützliches Tool zur Erstellung von passenden Farbkombinationen ist der Colour Contrast Analyser . Händisch oder mit dem aus Photoshop etc. bekannten Pipetten-Tool lassen sich so Farben kombinieren und die Kontrastwerte überprüfen. Der Colour Contrast Analyer ist sowohl für Windows als auch für OS X erhältlich.
Schriftgröße muss variabel sein
Es ist zu beachten, dass die Schriftgröße angepasst werden kann (bspw. mit Hilfe einer entsprechenden Schaltfläche) und auch bei der Nur-Text-Vergrößerung des Browsers auf 200% keine Text-Überlagerungen auf der Seite zu erkennen sind. Diese Funktion wird häufig von Menschen mit eingeschränkter Sehfähigkeit genutzt - entsprechend sollte ihr Beachtung geschenkt werden.
Informationen dürfen nicht ausschließlich durch die Wahrnehmung von Farben zugänglich sein
Was zunächst ein wenig kompliziert klingt ist im Grunde sehr einfach zu berücksichtigen. Für besondere Elemente im Text (Überschriften, Links etc.) gilt, dass diese sich nicht ausschließlich durch ihre Fargebung vom Fließtext unterscheiden dürfen, sondern mindestens ein weiteres Unterscheidungsmerkmal aufweisen müssen. Für Überschriften sollte dies ohnehin der Fall sein, da diese den Text strukturieren und somit zur besseren Lesbarkeit des Textes beitragen (mehr dazu hier: Im Web wird nicht gelesen - warum die typografische Gestaltung trotzdem wichtig ist). Bei der Gestaltung von Links kann dies durch ein einfaches Unterstreichen erreicht werden. Prinzipiell sind hier der Kreativität keine Grenzen gesetzt, wichtig ist nur, dass mindestens zwei verschiedene Unterscheidungsmerkmale vorhanden sind.
Bei Diagrammen und anderen Grafiken die Informationen vermitteln muss diese Anforderung jedoch selbstverständlich auch berücksichtigt werden. Ein anschauliches Beispiel wäre hier die Gestaltung eines Liniendiagramms bei dem die verschiedenen Linien nicht nur unterschiedliche Farben aufweisen, sondern sich auch in der Form ihrer Koordinaten unterscheiden (s. Grafik).
Bewegte Inhalte müssen abschaltbar sein
Elemente eines Web-Angebots, die sich automatisch bewegen müssen abschaltbar sein. Dies können beispielsweise Newsticker, Slideshows oder Slidesets sein. Wichtig ist, dass sofern die Bewegung eines Elements gestoppt wurde, sie bei erneuter Aktivierung an der selben Stelle startet, an der die Bewegung zuvor gestoppt wurde und nicht jedes mal von vorn beginnt.
Durch das Stoppen von Bewegungen soll zum einen bewirkt werden, dass Informationen in der Geschwindigkeit dargestellt werden, in der es für den Nutzer möglich ist, diese zu verarbeiten. Ein Newsticker beispielsweise erfordert die Fähigkeit, sich bewegende Schrift in verhältnismäßig kurzer Zeit zu entziffern und verarbeiten. Für Menschen mit einer Leseschwäche bzw. Seheinschränkungen ist dies nicht möglich. Desweiteren wird dadurch auch dem aufkommen von epileptischen Anfällen vorgebeugt, was uns auch schon zum nächsten Punkt führt.
Keine flackernden o. blikende Elemente verwenden
Als flackernde bzw. blinkende Elemente gelten all jene, die öfter als 3 Mal pro Sekunde aufblinken. Auf wild blinkende Werbereklamen aus den 90er-Jahren sollte also nach Möglichkeit verzichtet werden ,hier sei jedoch die Frage erlaubt, ob dies nicht ohnehin der Fall sein sollte?;)
Auf Schriftgrafiken verzichten
Auf Schriftgrafiken soll nach Möglichkeit verzichtet werden. Die Gründe hierfür liegen auf der Hand. Zum einen können die entsprechenden Grafiken von Screenreadern nur bedingt ausgelesen werden (in diesen Fällen sollte der alt-Text dem Text in der Grafik entsprechen). Zum anderen sind Farbe, Schriftgröße etc. nicht anpassbar.
Da Schriftgrafiken aber auch aus vielerlei anderer Gründe (z.B. SEO) nicht gerade "state of the art" sind, sollte dies in den meisten Fällen ohnehin keine all zu große Hürde darstellen.
Deutlich sichtbarer Tastaturfokus
Der Tastaturfokus sollte ebenso deutlich sichtbar gestaltet sein, wie der Mausfokus. Hierzu reicht es oftmals nicht, die browser-eigene Gestaltung des Fokus zu übernehmen. Ein individuell gestalteter Fokus kann hier abhilfe schaffen und beispielsweise auf die Farbwelt des Web-Angebots reagieren (und sich entsprechend abheben).
"Barrierefreie Seiten sind hässlich!?" - Ein Trugschluss
Angesichts der Tatsache, dass sich die grafischen Anforderungen und Beschränkungen seitens der BITV doch sehr im Rahmen halten, muss mit dem Trugschluss, dass barrierefreie Webangebote par tout unschön seien aufgeräumt werden. Der Gestalter selbst ist in seinem Schaffen nur an sehr wenigen Stellen eingeschränkt - Barrierefreie Seiten müssen also nicht hässlich sein.
Zudem sollte die barrierefreie Gestaltung jedoch nicht als ein "Übel" wahrgenommen werden, mit dem es sich zu beschäftigen gilt, da für barrierefreie Seiten meist gilt, dass diese auch für Menschen ohne Einschränkungen besser zu benutzen sind. Navigationselemente sind übersichtlich und deutlich gestaltet, Inhalte klar formatiert und gut zugänglich - Informationen können entsprechend schnell und einfach gefunden werden. Es lohnt sich also auf jeden Fall während der Konzeptionierung eines Web-Angebots einen "Schnellcheck" der Barrierefreiheit zu integrieren und in die Ausensicht zu schlüpfen. Auf diese Weise kann die eigene Arbeit noch einmal aus Sicht der Usabilty und inhaltlichen Konzeption sowie des Wordings betrachtet und bewertet werden.
Barrierefreie Seiten müssen also nicht hässlich sein - sie müssen nur inhaltlich und technisch gut umgesetzt werden.