Digitale Barrierefreiheit. WCAG 2.2, Kontraste und Umsetzung im Design.
WCAG 2.2 | Konformitätsstufen | Kontraste | Semantik und ARIA
Barrierefreiheit scheitert selten am Wollen. Sie scheitert daran, dass die konkreten Anforderungen verstreut, englisch und abstrakt formuliert sind. Diese Seite sammelt sie an einer Stelle.
Das Wichtigste in Kürze
Was: Digitale Produkte sind eigenständig nutzbar, auch per Screenreader, ausschließlich über die Tastatur oder bei eingeschränktem Sehvermögen.
Maßstab: Die WCAG des W3C, aktuell Version 2.2. Verbindlich wird sie über EN 301 549 und das BFSG.
Zielniveau: Level AA. Level A reicht für Compliance-Ziele meist nicht, Level AAA ist für vollständige Produkte selten realistisch.
Wer das Level festlegt Nicht die WCAG, sondern das Prüfziel. Oft steht es schon im Lastenheft oder in der Ausschreibung. Wo nicht, muss es vorher definiert werden.
Zielgruppe: Nicht nur dauerhafte Behinderungen. Einschränkungen sind oft temporär oder situativ, deshalb profitiert praktisch jeder irgendwann.
Was ist die WCAG?
Die Web Content Accessibility Guidelines sind der internationale Standard für digitale Barrierefreiheit, herausgegeben vom World Wide Web Consortium. Das W3C ist keine Behörde. Verbindlich wird der Standard erst, wo Gesetzgeber auf ihn verweisen. In Europa übersetzt die Norm EN 301 549 die WCAG in prüfbare Anforderungen, in Deutschland macht das Barrierefreiheitsstärkungsgesetz sie verbindlich.
Alle Anforderungen sind vier Prinzipien zugeordnet, dem POUR-Prinzip. Wahrnehmbar heißt, Informationen kommen bei unterschiedlichen Wahrnehmungsmöglichkeiten an. Bedienbar heißt, jede Funktion ist auch ohne Maus erreichbar. Verständlich betrifft Sprache, Struktur und vorhersagbare Interaktionen. Robust heißt, assistive Technologien können den Inhalt zuverlässig interpretieren.
Wer profitiert von barrierefreiem Design?
Dauerhaft, temporär, situativ: Behinderung ist nicht nur eine feste Eigenschaft. Wer ein Kind auf dem Arm hat, bedient einhändig. Wer in der Sonne steht, hat ein Kontrastproblem. Wer sich den Arm bricht, ist sechs Wochen auf die Tastatur angewiesen. Barrierefreies Design deckt alle drei Fälle mit denselben Maßnahmen ab.
Der Curb-Cut-Effekt: Abgesenkte Bordsteinkanten waren für Rollstuhlnutzende gedacht. Heute nutzen sie Kinderwagen, Rollkoffer, Fahrräder und Lieferwagen. Digital gilt dasselbe Muster. Untertitel, klare Kontraste, einfache Sprache und Tastaturbedienung verbessern die Nutzung für alle. Barrierefreiheit ist damit ein Qualitätsmerkmal guter UX, nicht nur eine Frage der Inklusion.
Neurodiversität: ADHS, Autismus, Dyslexie. Der Bedarf liegt hier weniger bei technischer Zugänglichkeit als bei klarer Struktur, wenig Ablenkung, erkennbaren Zuständen und verständlicher Aufgabenführung. Schätzungen nennen 15 bis 20 Prozent der Bevölkerung.
Sehen: Über Blindheit hinaus zählen Doppelbilder, Katarakte, Farbsehschwächen und der Verlust des peripheren Sehens. Die meisten davon sind graduell und nehmen mit dem Alter zu.
Die Anforderungen
55 Erfolgskriterien gelten für Level AA. Einzeln gelesen sind sie eine Norm, inhaltlich zerfallen sie in sechs Regeln. Nicht jede trifft auf jedes Produkt zu. Eine Seite ohne Video braucht keine Untertitel, das Kriterium gilt dann als nicht anwendbar und nicht als verletzt.
Was WCAG 2.2 Level AA verlangt, in sechs Regeln
REGEL 01
Alles funktioniert auch ohne Maus
Jede Funktion ist über die Tastatur erreichbar, in nachvollziehbarer Reihenfolge, mit sichtbarem Fokus und ohne Sackgassen. Gesten, Wischen und Ziehen haben immer eine einfache Alternative. Wer sich einmal mit der Tab-Taste durch das eigene Produkt bewegt, findet in zehn Minuten mehr als jeder Scanner.
Regel 02
Farbe ist nie die einzige Information
Kontraste reichen aus, und Zustände, Fehler oder Zuordnungen erschließen sich nicht allein über Farbe. Es braucht immer einen zweiten Indikator, also Text, Icon, Muster oder Form. Dazu bleibt das Layout lesbar, wenn Nutzende zoomen, Textabstände verändern oder das Gerät drehen.
REGEL 03
Was man sieht, steht auch im Code
Überschriften sind Überschriften, Buttons sind Buttons, die Sprache ist ausgezeichnet. Visuell erkennbare Struktur muss technisch erfassbar sein, sonst existiert sie für assistive Technologien nicht. Semantisches HTML bringt Rolle, Tastaturbedienbarkeit und Zustände von allein mit, ein gestyltes Div muss alles nachbauen.
Regel 04
Jeder Inhalt hat eine Alternative in Textform
Bilder brauchen Alternativtexte, Videos brauchen Untertitel, relevante visuelle Informationen brauchen eine Audiodeskription. Automatisch startender Ton lässt sich abschalten.
Regel 05
Formulare erklären sich selbst und verzeihen Fehler
Jedes Feld hat ein Label, jeder Fehler wird erkannt, benannt und mit einem konkreten Korrekturhinweis versehen. Bereits eingegebene Daten werden nicht erneut abgefragt, und die Anmeldung scheitert nicht an einem Gedächtnistest.
Regel 06
Nichts passiert unerwartet
Fokus oder Eingabe lösen keinen Sprung und keinen Kontextwechsel aus. Bewegte Inhalte lassen sich anhalten, Zeitlimits verlängern, eingeblendete Inhalte schließen. Navigation und Bezeichnungen bleiben über alle Seiten gleich, und der Zweck eines Links geht aus seinem Text hervor.
Was ein Scanner findet und was nicht
Ein Scanner prüft, was sich messen lässt. Er rechnet Kontrastwerte aus, findet fehlende Labels und meldet ungültiges ARIA. Ob eine Seite tatsächlich benutzbar ist, kann er nicht beantworten. Als Faustregel gilt, dass etwa ein Drittel der Barrieren automatisiert auffindbar ist. Der Rest braucht jemanden, der das Produkt bedient.
Prüfmethoden im Überblick
Automatisiert zuverlässig prüfbar
Kontrastwerte unterhalb der WCAG-Schwelle, gemessen im Standardzustand
Bilder ohne Alternativtext und Formularfelder ohne Label
Leere Links und Buttons ohne zugänglichen Namen
Fehlerhafte oder überflüssige ARIA-Auszeichnung
Fehlende Sprachauszeichnung und falsch verschachtelte Überschriften
Nur manuell prüfbar
Sinnhaftigkeit eines Alternativtexts. "Bild" ist vorhanden und trotzdem wertlos
Fokus-Reihenfolge, die der visuellen Logik der Seite folgt
Dropdowns, Modals, Filter und Tabs vollständig per Tastatur bedienbar
Kontrast im echten Kontext, also auf Verläufen, Bildern und bei Transparenz
Verständlichkeit von Navigation, Sprache und visueller Hierarchie
Accessibility Checker ersetzen keine echten Tests. Für technische Checks und eine erste Orientierung sind sie gut. Für ein belastbares Ergebnis braucht es manuelle Prüfung und Tests mit Menschen, die assistive Technologie im Alltag verwenden.
Häufige Fragen zu digitaler Barrierefreiheit
Was ist die WCAG?
Die Web Content Accessibility Guidelines sind der internationale Standard für digitale Barrierefreiheit, herausgegeben vom World Wide Web Consortium. Sie sind selbst kein Gesetz, werden aber über die europäische Norm EN 301 549 und nationale Gesetze wie das BFSG verbindlich. Aktuelle Version ist WCAG 2.2 aus dem Oktober 2023.
