Eine barrierefreie WordPress-Website planen

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.

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.