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 

5 Kommentare zu “Tipps für eine barrierefreie Webseite

  • Bereiche im Layout mit Aria-Roles eindeutig auszeichnen

    bzw. mit den entsprechenden HTML-Elementen (nav, main, aside, header, footer)

    alt-Attribute für reine Deko-Bilder weglassen

    Bitte nicht. Dann wird nämlich in Screen-Readern der Bildname vorgelesen. Bei reinen Deko-Bildern ist das alt-Attribut leer zu lassen. Siehe auch: https://www.w3.org/WAI/tutorials/images/decorative/

    Unter Orientierung fehlt noch: :focus-Styles angeben, da Tastaturnutzer sonst nicht sehen können wo sie sich auf der Seite befinden.

    Schnelle Wege und Abkürzungen für erfahrene Besucher, ausführliche und sorgfältig erklärte Wege für weniger erfahrene Besucher

    Das ist natürlich eine relativ schwammige Vorgabe. Wir reden da immer von einer konsistenten Navigation und von mehreren Möglichkeiten den gleichen Inhalt zu erreichen, z.B. durch eine Suchfunktion oder eine Sitemap.

    Fehlermeldung nicht nur oben, sondern auch am Ende des Formulars ausgeben, so dass auch ein Screenreader die Fehlermeldung mitbekommt

    Wichtiger als die Positionierung der Fehlermeldung ist, dass entsprechende Eingabefelder markiert sind, z.B. mit indem man die in HTML5 eingebauten Feldformen benutzt, die inline validieren oder, dass man die Fehlermeldung mit aria-labelledby oder aria-describedby mit dem Eingabefeld verknüpft. Siehe: https://www.w3.org/WAI/tutorials/forms/validation/

  • Die barrierefreie Gestaltung von Anwendungen bzw. Websites erfordert mitunter schon viel Fingerspitzengefühl, um die Nutzererfahrung auf allen Ebenen synchronistisch zu verbessern. In der Praxis bzw. bei der Entwicklung von barrierefreien Webinhalten ist das ein ständiger Lernprozess, denn oft werden tatsächliche Probleme in der Anwendung nur von den Betroffenen selbst wahrgenommen..

  • Hey,
    super Artikel, super Tipps!

    Eine Website barrierefrei zu erstellen ist wichtig, vor allem in der heutigen Zeit!
    Bei vielen Seiten jedoch sieht man dass das dort noch nicht ganz so angekommen ist.
    Aber ich denke mal das wird, mit den Tipps hier hat man schon mal eine gute Grundlage. :)

  • Hallo! Vielen Dank für die Tipps und Hinweise! Ich interessiere mich für Themen, die mit der Erstellung einer Webseite verbunden sind. Ich habe schon meine erste Homepage selbst mit Vorlagen http://www.templatemonster.com/de/ erstellt. Und jetzt beschäftige ich mich mit der Entwicklung meiner Seite.

Die Kommentare sind geschlossen.