Barrierefreiheit: die vier WCAG-Grundsätze praktisch angewendet

Worum es geht

Die Web Content Accessibility Guidelines (WCAG) 2.2 des W3C gliedern ihre Erfolgskriterien nach vier Grundsätzen; die vom W3C veröffentlichte deutsche Übersetzung der Version 2.0 nennt sie wahrnehmbar, bedienbar, verständlich und robust. Jedes Kriterium trägt eine Konformitätsstufe A, AA oder AAA; AA ist die Stufe, die üblicherweise als Ziel gesetzt wird. Version 2.2 ergänzt unter anderem Kriterien zur Mindestgrösse von Bedienelementen (2.5.8 «Target Size (Minimum)»: 24 mal 24 CSS-Pixel), zum nicht verdeckten Fokus (2.4.11), zur Wiederholung bereits gemachter Eingaben (3.3.7 «Redundant Entry») und zur Anmeldung ohne Gedächtnis- oder Rätselaufgabe (3.3.8 «Accessible Authentication (Minimum)»); das Kriterium 4.1.1 «Parsing» ist in 2.2 als überholt gestrichen. Massgeblich ist stets der englische Originaltext; Übersetzungen sind nicht normativ.

Warum es wichtig ist

Barrieren schliessen Menschen aus, die mit Screenreader, Tastatur, Vergrösserung oder Sprachsteuerung arbeiten. Dieselben Mängel behindern Suchmaschinen und automatisierte Leser: Ein Bild ohne Textalternative, ein Knopf ohne zugänglichen Namen, ein Feld ohne Beschriftung ist für jeden nicht-visuellen Zugang unsichtbar. Die vier Grundsätze sind eine Prüfstruktur, die man auch ohne Werkzeuge im Kopf durchgehen kann.

So wird es angewendet

• Wahrnehmbar: Jedes informative Bild erhält ein alt-Attribut, rein dekorative ein leeres (alt=""). Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5:1, grosser Text 3:1. Information nie allein über Farbe vermitteln; Links im Fliesstext unterstreichen.
• Bedienbar: Alle Funktionen sind mit der Tastatur erreichbar, der Fokus ist sichtbar und bleibt nirgends gefangen (2.1.2 «No Keyboard Trap»). Klick- und Tippziele mindestens 24 mal 24 CSS-Pixel oder mit ausreichendem Abstand. Ein Sprunglink führt zum Hauptinhalt.
• Verständlich: Sprache der Seite mit lang deklarieren, fremdsprachige Abschnitte einzeln. Navigation auf allen Seiten gleich. Fehlermeldungen nennen das Feld und die Korrektur; bereits eingegebene Daten werden nicht erneut verlangt.
• Robust: Semantisches HTML (Überschriften, Listen, Landmarken, button statt klickbarem div); ARIA nur dort, wo HTML keine Entsprechung bietet.
• Prüfen: zuerst automatisiert (findet die formalen Verstösse), dann eine Runde nur mit Tastatur und eine mit Screenreader durch die wichtigsten Abläufe.

Stolpersteine

Ein title-Attribut ist kein zugänglicher Name. Fokusrahmen aus Designgründen zu entfernen verletzt 2.4.7. Automatische Prüfwerkzeuge bewerten Textalternativen in der Regel nicht inhaltlich: alt="Bild" besteht die Prüfung und hilft niemandem. Nachträglich eingebundene «Barrierefreiheits-Overlays» ersetzen keine fehlende Struktur im Quelltext. Wer nur die deutsche Übersetzung der Version 2.0 liest, kennt die in 2.1 und 2.2 hinzugekommenen Kriterien nicht.