Tipps für eine barrierefreie Webseite

Wie viele Leute verwenden wohl einen Screenreader um diese Webseite zu betrachten? Der Anteil dürfte im niedrigen einstelligen Prozentbereich liegen. Warum also so viel Aufwand für eine so kleine Benutzergruppe?
Weil es nicht um Screenreader geht. Sondern um Usability.

Wer profitiert von einer barrierefreien Webseite?

  • Menschen mit einer Sehbehinderung, die starke Kontraste auf ihrem Bildschirm brauchen
  • Menschen, die im hellen Sonnenlicht eine Adresse auf ihrem Smartphone lesen wollen
  • Menschen, die per Tastatur statt Maus navigieren, weil sie keine Arme haben
  • Menschen, die per Tastatur statt Maus navigieren, weil sie Rheuma in den Händen haben oder ihr rechter Arm vorübergehend einen Gipsverband hat
  • Menschen, die eine geistige Behinderung haben
  • Menschen mit einem Hochschulabschluss, deren Muttersprache nicht Deutsch ist
  • Menschen, die eine Aufmerksamkeitsstörung haben und sich schlecht konzentrieren können
  • Menschen, die nach einem langen Arbeitstag müde sind und sich schlecht konzentrieren können
  • Alte Menschen, die unsicher sind und leicht die Orientierung auf der Webseite verlieren
  • Junge Menschen, die unsicher sind und leicht die Orientierung auf der Webseite verlieren

Barrierfreiheit = Zugänglichkeit

Barriere – das klingt irgendwie anstrengend. Barrieren aus dem Weg räumen erst recht. Auf Englisch heißt barrierefrei accessible, was man mit zugänglich übersetzen kann. Das klingt doch gleich viel besser. Eine barrierefreie Website lädt schnell, lässt sich leicht pflegen und ist einfach zu bedienen.

Die folgende Liste ist längst nicht vollständig, aber sie fasst die wichtigsten Aspekte einer barrierefreien Webseite zusammen.
Die Angaben beruhen auf Elisabeths Präsentation beim WordPress MeetUp München  und auf dem WordCamp in Köln 2015.

Tipps für barrierefreie Webseiten

1. Inhalte

  • Texte schreiben, die alle Besucher verstehen
  • Kurze Texte schreiben
  • Texte „scanbar“ machen, mit Überschriften logisch strukturieren (h1 bis h6)
  • Fachbegriffe vermeiden oder in einem Glossar erklären
  • Kurze, klare Sätze bilden (keine Schachtelsätze)
  • In direkter, aktiver Sprache schreiben (keine Passivkonstruktionen)
  • Verben statt Substantive (Eine Entscheidung treffen » entscheiden)
  • Komplexe Inhalte, die sich textlich schwer erklären lassen, in einer Grafik zeigen
  • Für Videos Transscripte und Untertitel anbieten

2. Coding

  • Mobile First = Accessibility First
  • Valides HTML benutzen
  • Bereiche im Layout mit Aria-Roles eindeutig auszeichnen
  • Keine Audio-/Video-/Slider-Elemente, die von selbst starten
  • alt-Attribute nutzen, um die Aussage von Bilder zu beschreiben, die wichtig zum Verständnis der Inhalte sind; dabei nicht das Bild beschreiben, sondern die Aussage
  • alt-Attribute für reine Deko-Bilder weg leer lassen
  • Links sollten (zumindest im HTML) eine Information enthalten, wohin sie führen; eine Anleitung findet man bei Rian. Themes mit dem Tag Accessibility Ready bringen das das schon mit.
  • Links immer im selben Fenster öffnen
  • Flexibles Layout, so dass der Nutzer die Schriftgrößen verändern kann und die Seite weiter nutzbar ist

3. Gestaltung

  • Buttons in ausreichender Größe und mit ausreichend Weissraum drumherum
  • Auf richtige Farbkontraste achten
  • Ausreichend große Schriftgröße anbieten
  • Auf ausreichend großen Zeilenabstand achten

4. Orientierung

  • Feedback anbieten
    (Beschriftung Formularfelder, Tooltips mit Fehlerhinweisen, farbliche Umrandung von aktiven Elementen)
  • Unterschiedliche Wege anbieten, von A nach B zu navigieren z.B. über Querverweise oder die Suchfunktion
  • Schnelle Wege und Abkürzungen für erfahrene Besucher, ausführliche und sorgfältig erklärte Wege für weniger erfahrene Besucher
  • Konsistente UI-Elemente:
    Alle Links haben immer dieselbe Form, UI-Elemente verhalten sich wie gelernt, z.B. ein Klick auf ein Drucker-Symbol öffnet einen Druckdialog
  • Wegweiser anbieten z.B. Breadcrumb-Navigation

5. Formulare

  • Input-Felder mit verständlichen beschrifteten Labels versehen (dabei hilft die Accessible-Defaults-Erweiterung für Contact Form 7)
  • Labels nicht durch Placeholder ersetzen
  • Direkte Rückmeldungen über falsche Eingaben beim input-Feld geben,
    Klare Beschreibung des Fehlers, klare Anweisung was statt dessen zu tun ist
  • Fehlermeldung nicht nur oben, sondern auch am Ende des Formulars ausgeben, so dass auch ein Screenreader die Fehlermeldung mitbekommt
  • Kein zu enges Zeitlimit zum Ausfüllen des Formulars setzen bzw. Möglichkeit bieten, mehr Zeit anzufordern
  • Auf ausreichend Farbkontrast achten (hellgrau umrandete Input-Felder auf weissem Hintergrund sind auf Monitoren mit hohem Kontrast unsichtbar)
  • Lange Formulare unterteilen und Fortschritt darstellen (20%, 50% bearbeitet)

Tools zum Überprüfen einer Webseite

WordPress Accessibility Informationen des WordPress Accessibility-Teams mit Handbuch und Tipps
WordPress Plugin 
Farb-Kontraste prüfen
Farb-Kontraste prüfen, Tool von Lea Verou
Wave von WebAIM: Einfach URL eingeben und prüfen
Struktur der Überschriften prüfen

Links

einfach-fuer-alle.de
Web Accessibility Initiative
Accessible Rich Internet Applications Suite
ARIA-Roles (deutsch)
Webseiten, die mit dem Biene-Award ausgezeichnet wurden 
WebAIM z.B. zu Alt attribute 

Dieser Artikel ist am 25. Februar 2016 im Blog Die Netzialisten erschienen
Diesen Artikel teilen | Share this post