uxzentrisch erörtert:
Barrierefreiheit für alle!

Barrierefreiheit im Web ist nicht nur ein Thema für Menschen mit Behinderungen. Im Gegenteil, Barrieren beeinträchtigen das Nutzungserlebnis aller Webnutzer. Es ist also eine zentrale Aufgabe für uns UX-Leute, Barrieren zu beseitigen. Dieser Artikel gibt Tipps, wie man Barrieren erkennt. Zum Beispiel einfach die Perspektive von Menschen mit Behinderungen einnehmen.

User Centered Design und Barrierefreiheit

Viele Personas gleichen Models aus der Werbung. Sie repräsentieren eine Zielgruppe und sehen dabei gut aus. Personas mit Behinderungen kommen in der Regel nicht vor, da Menschen mit Behinderungen selten explizit als Zielgruppe definiert sind. Eigentlich seltsam, denn nur ca. 40% (!) der Deutschen werden als normalsichtig eingestuft. Dennoch taucht das Thema Barrierefreiheit in Konzepten meist nur als allgemeine oder technische Anforderung auf. Barrierefreiheit ist jedoch keine zusätzliche Funktionalität, sondern vielmehr die Königsklasse der UX. Ich behaupte, dass sehr gute Websites automatisch barrierearm sind – und umgekehrt.

Nutzen wir also die Chance und schlagen zwei Fliegen mit einer Klappe. Eine Fokussierung auf Menschen mit Behinderungen schärft den Blick für grundlegende Qualitäten einer Website. Nichts anderes beschreiben die vier Grundprinzipien der »Web Content Accessibility Guidelines« WCAG, die seit 2008 die Maßstäbe für Barrierefreiheit wie folgt definieren:

  • Prinzip 1: Wahrnehmbar
    Informationen und Bestandteile der Benutzerschnittstelle müssen den Benutzern so präsentiert werden, dass diese sie wahrnehmen können.
  • Prinzip 2: Bedienbar
    Bestandteile der Benutzerschnittstelle und Navigation müssen bedienbar sein.
  • Prinzip 3: Verständlich
    Informationen und Bedienung der Benutzerschnittstelle müssen verständlich sein.
  • Prinzip 4: Robust
    Inhalte müssen robust genug sein, damit sie zuverlässig von einer großen Auswahl an Benutzeragenten einschließlich assistierender Techniken interpretiert werden können.

Die WCAG beschreibt darüber hinaus konkrete Richtlinien, die Barrierefreiheit sicherstellen. Ohne alle diese Festlegungen im Detail zu kennen, lassen sich viele konzeptionelle und inhaltliche Anforderungen durch eine einfach Methode erfüllen: Versetzt dich in die Rolle eines Blinden!

 Screen Reader

Blinde Menschen benutzen häufig »Screen Reader«, die Inhalte und Funktionen des Bildschirms vorlesen. Mit einiger Übung gewährleisten diese komplexen Assistenzsysteme die vollständige Benutzung von Software und Websites. Für das Surfen im Web bieten sie je nach Ausstattung unterschiedliche Bedienmöglichkeiten. Sie lesen nicht nur alle Texte einer Webseite vor, sondern geben auch »unsichtbare«  Informationen aus:

  • Alt-Texte für Grafiken und Links
  • Hinweise auf HTML Auszeichnungen wie z.B. Links oder Tabellen
  • Pagetitle

In folgendem Video ist schön zu hören, wie sich eine Website mit dem populären, kommerziellen Screen Reader »JAWS« anhört. (Zu sehen ist leider, dass viele Websites für Menschen mit Behinderungen häufig mit wenig Budget oder in Eigeninitiative erstellt werden)

Zur Navigation bieten Screen Reader mindestens die Möglichkeiten, Überschriften und Links einer Website linear anzusteuern und vorlesen zu lassen.

  • Taste H: Zur nächsten Überschrift springen
  • Tasten 1-6: Lese die nächste Überschrift der Ebenen 1-6 vor
  • Tasten Tab: Zum nächsten Link der Tab-Reihenfolge springen

Das Video zeigt diese Funktionsweise anhand eines »barrierefreien PDFs«, für das grundsätzlich die gleichen Regeln wie für Websites gelten.

Erkenntnisse

In Webprojekten mit Fokus auf Barrierefreiheit hat es sich bereits etabliert, Screen Reader für das Testing zu verwenden (Beispiel). Auf diese Weise kann man sicherstellen, dass das HTML normkonform ist und dass alle Alt-Texte gepflegt sind.

Viel wichtiger: Jetzt wird deutlich, ob der Inhalt der entwickelten Website verständlich ist. Man kann dies gut testen, wenn man, wie ein Blinder, die Überschriftenebenen H1 bis H3 durchspringt, um zunächst einen Überblick über die Seite zu erhalten. Gemeinsam mit dem Pagetitle sollte der Nutzer die Kernaussage und Funktionen der Seite erkennen. Ist dies nicht gegeben, wird sich auch ein Webnutzer ohne Behinderung mit der Webseite schwertun – und der Google-Robot im Übrigen auch.

Diese Erkenntnis kann man bereits früh durch ein kleines Experiment gewinnen. Einfach im Wireframe alle Elemente ausblenden bis nur die Überschriftenebenen H1 bis H3 übrig bleiben. Sind Inhalt, Funktionalität und Marke noch verständlich? Wenn nein, bietet sich jetzt die Möglichkeit, die Seitenstruktur inhaltlich und konzeptionell nachzubessern.

Wechsle die Perspektive!

Die Perspektive eines Blinden verschafft für Konzeption und Gestaltung neue Erkenntnisse. Berücksichtigt man zusätzlich die Bedürfnisse der 50 Mio. Deutsche, die „nur“ nicht optimal sehen, stehen folgende Aspekte im Mittelpunkt:

  • gute Lesbarkeit durch hohe Kontraste und eindeutige Gestaltung
  • strukturierter Aufbau und eindeutige »callt to action«
  • klare Aussagen und inhaltliche Fokussierung durch prägnanten Formulierungen

Wie die Prinzipien der WCAG sind auch diese Anforderungen allgemein gültig und dienen dem Wohle aller Webnutzer. Es hilft daher, während der Arbeit die Perspektive eines Fehlsichtigen einzunehmen (oder die Brille abzunehmen) und sich vorzustellen, wie er eine Website wahrnimmt. Dies liefert gute Argumente für Diskussionen im Design-Team.

Ein weiterer Trick erhöht die Schlagkraft der Argumente: Mindestens die Hälfte der Personas sollten schlecht sehen und eine Brille tragen. So wie im wahren Leben.

Hinweise und Links

iPhones

Es sei an dieser Stelle noch erwähnt, dass iPhones bei Blinden sehr beliebt sind, weil sie standardmäßig gut bedienbar sind (Großartiges Beispielvideo).

Einführung in WCAG

http://www.barrierefreies-webdesign.de/wcag2/

Schöner Videoblog eines blinden Webnutzers

http://www.youtube.com/user/TommyEdisonXP

Brillenträger in Deutschland

http://haetten-sie-gewusst.blogspot.de/2011/05/brillentrager-wie-viele-menschen.html