Die Web Content Accessibility Guidelines sind die technische Grundlage, an der sich Barrierefreiheit im Web bemisst. Über die europäische Norm EN 301 549 sind sie der Maßstab für die Anforderungen aus dem Barrierefreiheitsstärkungsgesetz.
Sie wirken auf den ersten Blick umfangreich. Bei einer normalen Inhaltswebsite sind etwa fünfzehn Kriterien tatsächlich relevant, und die decken sich weitgehend mit gutem Handwerk.
Die vier Prinzipien
Wahrnehmbar. Informationen müssen so dargeboten werden, dass sie auch bei eingeschränkter Nutzung eines Sinnes zugänglich sind.
Bedienbar. Alle Bedienelemente müssen erreichbar und auslösbar sein, unabhängig vom Eingabegerät.
Verständlich. Inhalte und Bedienung müssen nachvollziehbar sein.
Robust. Inhalte müssen von Hilfsmitteln zuverlässig interpretiert werden können.
Die Kriterien, die praktisch zählen
Wahrnehmbar
Alternativtexte. Jedes informative Bild braucht eine Textalternative, die den Inhalt beschreibt. Dekorative Bilder erhalten einen leeren Alternativtext, damit Hilfsmittel sie überspringen. Bilder, die als Link dienen, beschreiben das Ziel.
Untertitel für Videos. Bei Videos mit Sprache sind Untertitel erforderlich, bei reinem Audio eine Textalternative.
Kontrast. 4,5 zu 1 für Fließtext, 3 zu 1 für große Schrift und für Bedienelemente. Details in Kontraste prüfen.
Nicht nur Farbe. Information darf nie allein über Farbe kodiert sein. Ein Fehlerfeld braucht Text, ein Diagramm braucht Beschriftung oder Musterung.
Text vergrößerbar. Bei 200 Prozent Zoom müssen Inhalte lesbar und erreichbar bleiben, ohne dass Text abgeschnitten wird.
Kein Text in Bildern. Text als Grafik ist nicht skalierbar und nicht auslesbar. Ausnahmen sind Logos.
Umbruch bei schmaler Darstellung. Bei 320 Pixel Breite darf kein zweidimensionales Scrollen nötig sein.
Bedienbar
Tastaturbedienbarkeit. Alles muss mit der Tastatur erreichbar und auslösbar sein, ohne Fallen, aus denen man nicht wieder herauskommt. Details in Tastaturbedienung.
Sichtbarer Fokus. Der Fokus muss erkennbar sein und sich ausreichend vom Hintergrund abheben. Das ist das häufigste Kriterium, das Themes von sich aus verletzen, weil sie die Markierung aus gestalterischen Gründen entfernen.
Sinnvolle Reihenfolge. Die Reihenfolge beim Durchtabben muss der Leseordnung entsprechen.
Sprungmarke zum Inhalt. Ein Link am Anfang, der die Navigation überspringt.
Aussagekräftige Linktexte. Der Zweck eines Links muss aus dem Text hervorgehen. “Hier klicken” und “mehr erfahren” erfüllen das nicht, weil Hilfsmittel Linklisten ohne Kontext ausgeben.
Ausreichende Zielgrößen. Bedienelemente brauchen eine Mindestgröße für Zeigereingaben. Praktisch etwa 24 mal 24 Pixel als Untergrenze, 44 Pixel als Empfehlung für Touch.
Keine Zeitbegrenzung ohne Verlängerung. Sitzungen und Formulare dürfen nicht unangekündigt ablaufen.
Verständlich
Sprache auszeichnen. Die Hauptsprache des Dokuments im Markup, abweichende Passagen einzeln.
Beschriftungen für Formularfelder. Eine echte Beschriftung, verknüpft mit dem Feld. Ein Platzhaltertext genügt nicht: Er verschwindet beim Tippen und ist meist zu kontrastarm.
Fehlermeldungen mit Hinweis. Welches Feld, was ist falsch, was ist zu tun.
Vorhersehbares Verhalten. Kein unerwarteter Kontextwechsel beim Fokussieren, keine automatisch startenden Vorgänge.
Konsistente Navigation. Wiederkehrende Elemente stehen an derselben Stelle und heißen gleich.
Robust
Gültiges, semantisches Markup. Überschriftenebenen folgen der Gliederung, genau eine H1 pro Seite. Eine Schaltfläche ist eine Schaltfläche, kein anklickbarer Container.
Bereiche auszeichnen. Kopfbereich, Navigation, Hauptinhalt, Fußbereich als solche gekennzeichnet, damit Hilfsmittel sie ansteuern können.
Statusmeldungen wahrnehmbar. Eine Erfolgsmeldung nach dem Absenden eines Formulars muss auch angekündigt werden, nicht nur sichtbar erscheinen.
Die Konformitätsstufen
| Stufe | Bedeutung |
|---|---|
| A | Untergrenze, allein nicht ausreichend |
| AA | üblicher Zielwert, Maßstab der europäischen Norm |
| AAA | weitergehend, selten vollständig erreichbar, nicht gefordert |
Stufe AA ist der praktische Bezugspunkt. Wer sie erfüllt, erfüllt den technischen Teil der gesetzlichen Anforderung.
Was ausdrücklich nicht genügt
Ein Overlay-Widget. Skripte, die per Schaltfläche Kontraste oder Schriftgrößen umschalten, beheben keines der oben genannten Kriterien. Ein fehlender Alternativtext bleibt fehlend.
Ein automatisierter Test allein. Prüfwerkzeuge finden zuverlässig fehlende Alternativtexte, fehlende Beschriftungen und Kontrastprobleme bei einfarbigen Hintergründen. Sie finden nicht, ob ein Alternativtext sinnvoll ist, ob die Tabreihenfolge logisch ist oder ob eine Fehlermeldung hilft.
Eine einmalige Prüfung. Jedes Update, jedes neue Plugin und jede eingebettete Fremdkomponente kann Kriterien brechen. Der Prüfablauf steht in Barrierefreiheit testen.