Web Design und Barrierefreiheit – Layout-Tipps

Mich würde das Thema Barrierefreiheit in Bezug auf Website-Design interessieren. Das Thema ist wichtig und kommt immer mehr auf. Hast du in dem Bereich Erfahrungen oder Tipps, was man beachten sollte?
Frage von Lukas

Ich muss ehrlich sagen, dass ich mich mit diesem Thema in der Vergangenheit nur wenig befasst habe, da ich bisher noch nie einen Auftrag hatte, in dem Barrierefreiheit bewusst eine zentrale Rolle gespielt hat oder gar explizit vom Kunden gefordert wurde.

Natürlich ist es unsere Aufgabe und nicht die des Kunden, das Projekt für so viele Menschen wie möglich zugänglich zu machen. Und viele Designentscheidungen, die wir treffen und gelernt haben, machen eine Website auch schon barrierefrei.

Trotzdem wird es zu selten behandelt und ich finde gut, dass du dich dafür interessierst!

Um eine Website barrierefrei umzusetzen, spielt auch die Programmierung eine entscheidende Rolle. Auch wenn ich mich in diesem Podcast mehr auf das Design fokussiere, möchte ich kurz ein paar Worte zur Entwicklung loswerden:

Ein gut geschriebener HTML Code ist schon von Haus aus zugänglich für alle Menschen. Wenn Standards verwendet werden, wird das meiste, welches programmiert wird, auch oft richtig ausgegeben.

Das Web ist im Grunde also schon standardmäßig für viele zugänglich gemacht, nur verändern wir es manchmal so, dass es nicht mehr einfach von jedem genutzt werden kann.

Ich behandele in dieser Folge drei Kategorien, die du als Designer im Bezug auf Barrierefreiheit im Hinterkopf behalten solltest:

• Sehen: Die visuelle Beeinträchtigung.
• Hören: Beeinträchtigung bei akustischen Informationen.
• Mobilität: Bewegliche Einschränkungen.

Hier ist jetzt einfach mal zusammengefasst, was mir gerade zu diesen Bereichen im Bezug auf Barrierefreiheit und Webdesign einfällt.

Der Nutzer steht im Mittelpunkt und das sollte auch immer ein Vorsatz bleiben

Wenn wir ein User Interface gestalten, dann tun wir das mit dem Hintergrundwissen, dass es später von anderen Menschen bedient wird.

Unser Anliegen ist nicht, das Layout auf eine bestimmte Anzahl einzuschränken oder Ausnahmen zu definieren. Wir müssen ein Design schaffen, das für die größtmögliche Anzahl an Benutzern einfach zu bedienen ist und deswegen auch niemanden ausschließt.

Dieser Gedanke ist schon ein riesen Pluspunkt, wenn es um Barrierefreiheit geht. Wir wollen niemanden ausgrenzen, indem wir eine „spezielle” Version oder eine Sonderlösung für ihn darstellen.
Es bringt zum Beispiel einem blinden Menschen nichts, wenn für ihn das Website Layout nur in Textform dargestellt werden würde.

Jemand der nichts sieht, stellt sich trotzdem Dinge vor! Würde die Website also nur Zeile für Zeile dastehen, „sieht” er auch nur Zeilen und Text. Ein ganz normaler Aufbau einer Website hilft ihm da schon mehr, da er sich dadurch auch eine Struktur vorstellen kann.

Barrierefreiheit heißt also nicht, uns in unserem Design einzuschränken. Wir können trotzdem innovative Lösungen gestalten und müssen nicht irgendwie extra komische Elemente in das Layout integrieren.

1. Website Design für visuelle Beeinträchtigungen

Kategorie Sehen

Sicherlich ist das ein Bereich, der uns Designer am meisten betrifft. Zu dieser Kategorie fallen mir erstmal folgende Benutzer ein:

• Menschen, die blind sind und überhaupt nichts sehen
• Menschen, die keine Farben erkennen können
• Menschen, die nur bestimmte Farben sehen können

Schauen wir uns das mal im Detail an: Viele User, die komplett blind sind, verwenden heutzutage einen „Screen-Reader”, den fast jeder in der Hosentasche hat: Das Smartphone.

Das heißt, ihnen wird eine Website mit Hilfe einer Software „vorgelesen” bzw. beschrieben. Für sie ist eine klare Struktur und ein einfach zu bedienendes Webseiten Layout enorm wichtig.

Dafür kannst du bei deinem Design sorgen, aber für viele wichtige Informationen ist auch der Programmierer zuständig. Beispiel: Damit der „Screenreader” auch ein Bild beschreiben kann, ist der bekannte „alt-Text” in der Programmierung wichtig. Ich habe auch mal irgendwo gelesen, dass wenn dieses Alt-Attribut wegfällt, das Bild einfach übersprungen wird. Was natürlich in bestimmten Fällen sehr problematisch sein kann.

Am besten du schaltest deinen Accessibility-Modus (Barrierefrei-Modus) einfach mal in den Einstellungen deines Smartphones ein. Sowohl iOS als auch Android haben diesen standardmäßig installiert. Schließ einfach mal die Augen und hör zu, wie eines deiner umgesetzten Layouts beschrieben wird.

Menschen, die keine Farben sehen, brauchen gut zu erkennende Kontraste

Mach einfach mal ein Screenshot von deinem Layout und färbe es in Graustufen um. Dadurch siehst du sofort, welche Bereiche nicht so auffallen, obwohl du sie eigentlich in den Vordergrund bringen wolltest.

Ein Call-to-Action Button, der zum Beispiel rot gefärbt ist, fällt Usern womöglich mehr auf, als ein Button, der nur einen Rahmen hat.

Und auch wenn du selbst Grautöne in deinem Layout verwendest, sollten diese bewusst genügend Kontrast aufweisen und nicht unter bestimmte Farbwerte fallen. Verwendest du zum Beispiel Textgrößen unter 20px, darf der Farbwert auf weißem Hintergrund eigentlich nicht geringer als #767676 sein (recherchiert). Darunter wird es immer schwerer, den Text überhaupt zu erkennen.

Noch ein weiteres gutes Beispiel:
Stell dir ein Formular mit verschiedenen Eingabefeldern vor. Vergisst ein Seitenbesucher beim Ausfüllen ein Pflichtfeld, umranden manche Designer das Feld rot und signalisieren damit, dass noch etwas fehlt. Jemand, der aber farbenblind ist, erkennt diesen Rahmen nicht als rot, sondern grau. Da alle anderen Felder standardmäßig auch einen Rahmen haben, übersieht er das also wahnsinnig schnell und fragt sich, was eigentlich falsch ist.

Die bessere Lösung für Fehlermeldungen bei Eingabefeldern wäre also zusätzlich ein kleines Error-Icon oder eine Textmeldung (Label).

Oder das Formular wurde beispielsweise richtig ausgefüllt und deshalb vom Designer grün hinterlegt. Besser wäre aber zusätzlich einen kleinen Check-Icon rechts daneben zu platzieren.

Menschen, die nur bestimmte Farben sehen

Ein bekanntes Beispiel ist Mark Zuckerberg und Facebook. Er hat nämlich irgendwann rausgefunden, dass er rot-grün-blind ist, aber alle Blautöne sehen kann. Deshalb hat er diese Farbe von Anfang an für Facebook gewählt. Auch in Deutschland sind unter 10% davon betroffen.

Natürlich ist es für uns nicht möglich, immer die Farbschwächen der Seitenbesucher zu kennen, aber auch hier spielt Kontrast eine zentrale Rolle.

Gestalte für jung und alt!

Nicht zu vergessen sind in dieser Kategorie auch diejenigen, die mit dem Alter Schwierigkeiten bekommen, gut zu sehen. Für sie müssen Elemente größer dargestellt werden, als vielleicht für junge Menschen. Sie nutzen bestimmt auch die Browser Funktion, um Texte automatisch größer darzustellen. Teste also einfach mal schnell, was mit deinem Layout passiert, wenn du mit cmd++ deine Website ranzoomst.

2. Website Design für gehörlose Seitenbesucher

Kategorie Hören

Dieser Bereich ist eigentlich leicht zu behandeln. Beinhaltet dein Interface Design viele Sounds, Video oder Audioinhalte, versuche diese akustischen Informationen auch in Textform anzubieten.

Beispiel auf meiner Website: Auch wenn ich diesen Podcast in Audioform aufnehme, also zum Hören anbiete, schreibe ich trotzdem jede Folge noch mal in Textform auf, so dass alle Menschen ihn auch nachlesen können.

3. Website Design für Menschen mit beweglichen Einschränkungen

Kategorie Mobilität

Viele Website-Besucher sind auf technische Hilfsmittel angewiesen um sich Zugang zum Internet zu beschaffen. Sie können zum Beispiel nicht die Maus oder einen Touchscreen bedienen.

Alle Inhalte deines User Interface Designs sollte deshalb also auch zum Beispiel nur mit einer Tastatur bedient werden können.

Diese Kategorie ist schwer nur aus dem Design-Aspekt zu behandeln. Hier sind ebenfalls die Kenntnisse von Programmierern gefragt.

Da fällt mir noch ein gutes Beispiel ein, dass für viele Besucher dieser Kategorie Probleme bereitet:

Es gibt standardmäßig vom Browser eine Funktion, die genau für User gemacht ist, die keine Maus bedienen können. Und zwar werden Elemente, wenn sie mit einer Tastatur durch die Seite navigieren, mit einer farbigen Outline umrahmt, damit sie wissen, wo sie sich befinden.

Viele Entwickler stellen diese Funktion standardmäßig aus, indem sie in ihrem Stylesheet-Reset den Code :focus {outline: 0;} hinzufügen. Dadurch geht aber ebenfalls der visuelle Fokus über die Tastatur verloren und das führt dazu, dass viele nicht mehr wissen, wo auf der Seite sie sich eigentlich befinden.

Du kannst diesen Fokus deaktivieren, musst ihn dann aber auch selber stylen. Das macht zum Beispiel Twitter, indem sie eine Umrahmung zeigen, zusätzlich aber auch noch einen Tooltip mit Informationstext zu dem Element.

Fragen, die du dir abschließend für deine Website stellen kannst

• Funktioniert dein Design auch ohne Farben?
• Funktioniert dein Layout auch, wenn der „Kontrast Modus” in den Einstellungen deines Smartphones aktiviert ist?
• Funktioniert und versteht man alle Inhalte auch ohne Sound?
• Kannst du dein Interface nur mit einem Keyboard bedienen?
• Wie wirkt dein Layout mit einem „Screen Reader”?

Werkzeuge um deine Website auf Barrierefreiheit zu testen

• „Stark” Sketch Erweiterung → Ein Tool um direkt in deinem Sketch-Programm zu prüfen, ob dein Layout genügend Kontraste aufweist (colour-blind simulator).
• Accessibility DevTools Erweiterung → zeigt im Entwickler-Modus im Quelltext, ob Elemente genügend Kontras haben oder ob Grautöne einen Wert unterschreiten und für Farbenblinde zu schwer sichtbar werden.
• Tenon → Deine Website auf Barrierefreiheit testen. Einfach Link eingeben und Fehler beheben.
• ChromeVox → Screen Reader von Google für Chrome → Einleitungsvideo auf YouTube schauen
• Screen Reader in den Einstellungen auf deinem Smartphone aktivieren

Zusätzlich ein Artikel, den ich zu diesem Thema empfehlen kann: 7 Things Every Designer Needs to Know about Accessibility