Barrierearmes Webdesign durch Kontrast-Switch

27. November 2015 at 08:00
Barrierearmes Webdesign

Besonders im Healthcare Bereich ist Barrierefreiheit im Web sehr wichtig.

Das Internet ist überall. Es ist das nützlichste, hilfreichste, allgegenwärtige und schnellste Informationstool und hilft uns ohne große Anstrengung auch bei vielen Fragen im Alltag weiter. Es ist für uns selbstverständlich. Trotzdem ist das Internet noch immer nicht für alle Menschen gleich gut zugänglich. Für einige Nutzer ist der Umgang mit dem Web eine größere Herausforderung.

Bei der Gestaltung von Internetseiten wird oft nicht berücksichtigt, dass viele Menschen die eine oder andere Einschränkung haben. Daher ist die Barrierefreiheit eines der wichtigsten Themen bei der Umsetzung von Internetpräsenzen. Gerade im Bereich Healthcare muss eine Internetseite für möglichst viele Nutzer zugänglich sein.

Natürlich umfasst die Barrierefreiheit weit mehr als die Möglichkeit mit einem Screenreader den Inhalt einer Seite vorlesen zu lassen. Auch Sprungmarken zu bestimmten Seiten oder Seiteninhalten und die Ebenen-Nummerierung der Navigation für Screenreader sind sinnvolle Techniken, die im Markup per Backend umgesetzt werden können. Aber auch im Frontend lässt sich mit Kreativität einiges für eine benutzerfreundliche Internetseite machen.

Wir sind aber noch einen Schritt weiter gegangen

Für die Charité, einen unserer Healthcare-Kunden im Bereich Kliniken, haben wir im Zuge des Relaunches, der am 25.11.2015 Live ging, das Frontend umgesetzt und uns hierfür etwas Besonderes überlegt.

Anhand eines modernen Designs, mit verschiedenen Farben für die Bereiche der Seite, lässt sich die Zugehörigkeit einzelner Elemente zu entsprechenden Bereichen leicht erkennen. Wir haben so eine farbliche Leitung durch die große Anzahl an Seiten geschaffen, mit Hilfe derer sich die Besucher der Seite durch die Website navigieren können. Beispielsweise lassen sich so Linkkacheln aus anderen Bereichen eindeutig identifizieren.

Da moderne Designs aber oft auf einer Farbkomposition auf ähnlichen Farben oder Farben aus dem gleichen Graustufenbereich basieren, haben wir uns gedacht, dass es sinnvoll ist, eine zusätzliche, kontrastreichere Darstellung anzubieten. So kann gewährleistet werden, dass das Farbleitsystem auch barrierearm ist. Zur Umstellung auf die barrierearme Darstellung haben wir bei der neuen Website der Charité einen Farbswitch als Feature eingebaut.

Klare Kontraste auf Knopfdruck

Mit einem Klick auf den Farbswitch wird dem body-Tag der geöffneten Seite eine neue Klasse hinzugefügt. Über die schon vorher vorhandene Bodyclass lässt sich der entsprechende Bereich, in dem sich der User befindet, definieren. Die neue Klasse wird gleichzeitig im Cache gespeichert, damit die Einstellung auch bei der weiteren Navigation durch die Seite bestehen bleibt, bis der User den Kontrastswitch erneut bedient. Ein Mixin generiert die kontrastreichen Farben der 6 Bereiche der Charité. Diese Kontrast-Basisfarben werden anhand der Bodyclass-Kombinationen der geöffneten Seite hinzugefügt und überschreiben die ursprünglichen Basis-Farben. Linkkacheln aus anderen Bereichen werden mittels ihrer eigenen Klassen in Verbindung mit der neuen Bodyclass kräftiger dargestellt.

So lässt sich die komplette Website auf kontrastreiche Farben umschalten. Neben dem Farbsystem beeinflusst die Kontrast-Darstellung auch viele andere Elemente: Texte werden deckend schwarz und die Basisfarben der Bereiche werden neu definiert und kräftiger dargestellt. Auch sämtliche Hover-Zustände werden an die Benutzerfreundlichkeit angepasst. Und natürlich funktioniert das Modul auch mobil.

Wir freuen uns, dass wir mit viel Spaß dieses zusätzliche Feature umsetzen konnten und es nun live in der neuen Website der Charité benutzen können.

Charité: www.charite.de