In diesem Artikel soll es darum gehen, was zu beachten ist, wenn auf der Basis der technischen Grundlagen eine barrierefreie Webseite entstehen soll.

Mit einem accessibility-ready Theme oder dem Plugin WP Accessibility sind wir einer barrierefreien WordPress-Seite schon ziemlich nahe gekommen. Leider das Ergebnis nicht automatisch eine barrierefrei Website. Die Technik macht die ersten Schritte, aber die eigentliche Reise beginnt jetzt erst.

Barrierefreiheit lässt sich nicht in Code packen

Nicht barrierefreie Inhalte oder nicht barrierefreie Plugins können alle Errungenschaften, die im accessibility-ready Theme stecken, wieder neutralisieren.
Wenn z.B. die Redakteure beim Hochladen von Bildern keine (sinnvollen) Alt-Texte eingeben, kann das Theme auch nichts ausgeben.

Auch Texte können Besucher ausschließen, schwer verständliche Texte sind nicht barrierefrei. Weder Menschen mit eingeschränkter Lesekompetenz noch Menschen mit hoher Lesekompetenz, die auf einem mobilen Gerät, bei ungünstigen Lichtverhältnissen oder mit schlechter Datenanbindung nach einer Information suchen, können solche Texte verarbeiten.

Und dann sind da noch die Plugins. Wenn ein Plugin per CSS Farben oder Link-Zustände überschreibt oder kein standardkonformes HTML ausgibt, entstehen überall auf der Seite kleine Stolperfallen.

Eine barrierefreie Webseite planen

Eine barrierefreies Konzept besteht aus zwei Komponenten:

  1. Barrierefreies Technik (Themes & Plugins)
  2. Barrierefreie Inhalte

Grundsätzlich gilt, dass alle Beteiligten – Theme, Plugins und Inhalte – die Vorgaben zur Barrierefreiheit erfüllen müssen. Sobald ein Mitspieler die Regeln bricht, verliert die Website ihre Barrierefreiheit.

In der folgenden Checkliste habe ich die wichtigsten Kriterien für eine barrierefreie Seite zusammengefasst.

A. Checkliste Technik (Themes und Plugins)

  • Standardkonformes, korrektes HTML
  • Gut bedienbare Navigation (barrierefreie Dropdown-Menüs und/oder Mega-Navigation)
  • Navigierbar per Tastatur, korrekte focus-Reihenfolge
  • Links mit erklärendem Text (auch ausserhalb des Kontext verständlich)
  • Keine überflüssigen Title-Attribute
  • Barrierefreie Farben und Kontraste
  • Links und Buttons eindeutig benennen
  • Keine automatisch startenden Slideshows, Videos und Audios, so dass die User ausreichend Zeit haben, die Informationen zu verarbeiten
  • User kann Slideshows, Videos und Audios steuern (play, stop, Lautstärke regeln)
  • Keine flimmernden oder flackernden Animationen
  • Formularfelder haben Labels
  • Formulardaten werden vor dem Senden überprüft
  • Es gibt Hilfe und Rückmeldung bei Eingabefeldern,
    Fehler werden beschrieben und Lösungen angeboten
  • Bestätigungsmeldung für gesendete Daten

B. Checkliste Inhalte

  • Text-Alternativen für Video und Audio, alt-Texte für Bilder anbieten
  • Texte gliedern (Überschriften, Zwischenüberschriften, Absätze, Listen etc.)
  • Kurze Sätze (15 bis 20 Wörter, maximal ein Komma)
  • Abkürzungen, Fremdwörter und Fachbegriffe vermeiden bzw. erklären
  • klare, verständliche Aussagen formulieren
    keine verschleiernden, aufblähenden Formulierungen, keine Füllwörter
  • Lesefähigkeit berücksichtigen (Hauptschulabschluss, Sprachniveau A2 bis B1)

QUELLEN

WCAG 2.0 (deutsche Übersetzung)
ay11 Project (englisch, ähnlich WCAG, aber etwas übersichtlicher)
Accessibility Handbuch WordPress(englisch)

Dieser Artikel stammt ursprünglich aus dem Jahr 2017. Er wurde im Oktober 2019 überarbeitet und aktualisiert.