Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Sonnenseiten: Barrierefreiheit

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Sonnenseiten: Barrierefreiheit

Barrierefreiheit hat viel mit Details zu tun. Jan Eric Hellbusch beschreibt eine CSS-Technik, die 2005 beim Landtag NRW zum Einsatz kam. Die Technik fördert die Nutzbarkeit des Internetauftritts für Sehbehinderte und ist ein Feature der Barrierefreiheit, das für die meisten Besucher verborgen geblieben ist.

Im Jahr 2005, als die Barrierefreiheit noch ausführlich auf Mailinglisten diskutiert wurde, führte der Landtag NRW in aller Ruhe einen barrierefreien Relaunch durch. Eine Besonderheit des neuen Layouts war die für Sehbehinderte optimierte Navigationsleiste, die auch dann nachvollziehbar ist, wenn ein Bildschirmkontrastschema aktiv ist.

Eingabehilfen im Internet Explorer 7: Farbangaben auf Webseiten werden ignoriert

Die Hervorhebung aktiver Rubriken und Seiten in der Navigationsleiste, die auf den meisten Internetauftritten nur durch Farbe gekennzeichnet wird, wurde durch die CSS-Eigenschaft border ergänzt. Diese von Jörn Hofer entwickelte barrierefreie Technik der Hervorhebung in Navigationsleisten ist bis heute nur auf wenigen Internetauftritten umgesetzt.

Barrierefreiheit im Design

Viele Designer fürchten Barrierefreiheit, weil sie sich eingeschränkt fühlen. Dass Barrierefreiheit das Design nachhaltig beeinflußt, ist aber ein Mythos. Mit Kompetenz und Kreativität und mit den Nutzern im Blick lassen sich Designs auch so optimieren, dass Sehbehinderte nicht benachteiligt werden.

Bei Standardfarben ist die aktuelle Position in der Navigationsleiste deutlich durch Hervorhebungen sichtbar. Bei einem Kontrastschema ist die Position durch linke Rahmen verdeutlicht.

Viele Sehbehinderte aktivieren die sogenannten Kontrastschemata für den Bildschirm, um Kontraste zu optimieren oder subjektive Blendungen des Bildschirms zu kompensieren. Dadurch werden alle Hintergrund- und Vordergrundfarben am Bildschirm auf die benutzerdefinierte Farben umgeschaltet, z.B. weiß auf schwarz mit gelben Links. Die ursprünglichen Farben einer Webseite werden dann nicht mehr angezeigt.

Das Geheimnis von www.landtag.nrw.de ist die Verwendung eines linken Rahmens für die Navigationseinträge. Die Rahmen haben die gleiche Farbe wie der Hintergrund und sind bei Standardeinstellungen nicht erkennbar.

Sobald ein Kontrastschema eingeschaltet wird, werden zwar alle Farben auf die benutzerdefinierten Farben umgeschaltet; Die Farbe des Rahmens nimmt aber die Farbe des Textes an. Die aktuelle Position in der Navigationsleiste wird dadurch unabhängig von der Farbgestaltung verdeutlicht.

HTML ist das Handwerk, CSS ist die Kunst

Mit standardkonformem HTML ist vieles im Bereich der Barrierefreiheit möglich, aber das betrifft "nur" diejenigen, die nicht am Bildschirm, sondern zum Beispiel mit einer Sprachausgabe arbeiten. Mit den Möglichkeiten von CSS kann die Barrierefreiheit der Bildschirmdarstellung nachhaltig für die sehr große Nutzergruppe der Sehbehinderten optimiert werden.

Die Verwendung der border-Technik ist dabei keine Spielerei. Vielmehr handelt es sich um einen Lösungsweg, die Anforderung der Barrierefreiheit, Hervorhebungen nicht alleine durch Farbe zu kennzeichnen, nutzergerecht und ohne Beeinflussung des Designs umzusetzen. Hierfür ist vor allem Kreativität beim Einsatz von CSS gefragt!

Zur Aktion

Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.

Kommentare

Daniel Ditgens
am 08.07.2008 - 10:32

Hallo,

Landtag NRW war mein erstes barrierefreies Projekt und ich war froh, dass ich mit Jan Eric Hellbusch zusammenarbeiten durfte, da ich viel über diese Kunst lernen konnte.

Als Sehender muss man schon einigen Gehirnschmalz und Kreativität an den Tag legen. Barrierefreie Seiten müssen nicht unschön aussehen, wie man bewiesen hat.

Es ist wie mit einem guten Sportwagen: Sieht schick aus, kann aber technisch auch viel, fühlt sich toll an und hat einen satten Sound… und wer sagt, dass Sportwagen nicht barrierefrei sein können?

Viele Webseiten sind immer noch unzugänglich und beinhalten teilweise über 6 Jahre alten HTML-Code. Die Notwendigkeit der Barrierfreiheit ist wohl immer noch nicht bei allen angekommen.

Ich finde es aber lobenswert, dass sich Menschen, wie die Webkrauts und viele andere Webworker, sich für die Barrierefreiheit einsetzen und die Notwendigkeit an Ihre Kunden weitergeben.

Weiter so!

Gruß aus Köln,

Daniel

Permanenter Link

Ansgar Hein
am 08.07.2008 - 12:35

Stimmt, die border-Technik - lange nicht mehr gesehen, selbst schon fast wieder vergessen und dennoch einer von vielen exzellenten Bausteinen auf dem Weg zu einer zugänglichen Website. Danke für's Erinnern!

Permanenter Link

goldjunge2007
am 08.07.2008 - 21:07

Das ist ja mal ein genialer Trick!!! Den werd ich gleich bei meinem aktuellen Projekt einsetzen :D.

Ich finde das echt super das Ihr sowas macht. Ich bin nämlich ein ungelernter Webdesigner und so kann ich viel dazulernen :).

ps.: wie kann ich hier meinen Avatar einbinden?

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 08.07.2008 - 21:10

ps.: wie kann ich hier meinen Avatar einbinden?

Wir benutzen Gravatare.

Permanenter Link

Jan Eric Hellbusch
am 09.07.2008 - 15:50

@Ansgar:

Ist doch klar, dass Du es lange nicht gesehen hast. Ich nehme an, Du surfst mit Standardfarbeinstellungen, oder?

Permanenter Link

Maxx Hilberer
am 10.07.2008 - 14:58

maximaler Wirkungsgrad mit einfachsten Mitteln - hervorragend!

Permanenter Link

Die Kommentare sind geschlossen.