Technik · Web Content Accessibility Guidelines · W3C
WCAG — was sie sind und wie viel davon man braucht
WCAG (Web Content Accessibility Guidelines) ist der W3C‑Standard, der beschreibt, wie Webinhalte barrierefrei sein sollen. Version 2.1 (2018) ist heute die Grundlage des Rechts in der Union; Version 2.2 (Oktober 2023) fügt neun Kriterien hinzu und ist ein vernünftiges Ziel für neue Websites. Das Gesetz nennt die WCAG nicht beim Namen — es gelangt über die Norm EN 301 549 zu ihnen. Diese Seite erklärt Struktur, Stufen und die Kriterien, die in der Praxis über das Ergebnis eines Audits entscheiden.
Vier Prinzipien — dieselben wie im Gesetz
1. Wahrnehmbar (Perceivable)
Inhalte lassen sich mit mindestens einem Sinn aufnehmen: Textalternativen, Untertitel, vom Aussehen unabhängige Struktur, Kontrast, Vergrößerung.
2. Bedienbar (Operable)
Die Oberfläche lässt sich bedienen: Tastatur, Zeit, kein Blinken, Navigation, sichtbarer Fokus, Berührungsziele.
3. Verständlich (Understandable)
Inhalt und Bedienung sind verständlich: Sprache, Vorhersehbarkeit, Hilfe bei Fehlern.
4. Robust — im Gesetz „kompatibel“
Der Code arbeitet mit assistiven Technologien zusammen: korrekte Namen, Rollen, Zustände.
Unter den Prinzipien stehen 13 Richtlinien, darunter 78 (2.1) bzw. 87 (2.2) Erfolgskriterien, jedes auf Stufe A, AA oder AAA. Ein Kriterium ist prüfbar: Entweder die Seite erfüllt es oder nicht.
Stufen A, AA, AAA
| Stufe | Bedeutung | Kriterien (2.1 / 2.2) | Wer verlangt sie |
|---|---|---|---|
| A | das Minimum — ohne das können manche Nutzer die Seite gar nicht verwenden | 30 / 32 | immer zusammen mit AA |
| AA | der rechtliche Standard — beseitigt wesentliche Barrieren für die meisten Gruppen | 20 / 24 | Gesetz von 2019 (öffentlicher Sektor), EN 301 549, Praxis unter dem neuen Gesetz, BFSG in Deutschland, ADA/Section 508 in den USA |
| AAA | die höchste — Kontrast 7:1, Gebärdensprache, erweiterte Audiodeskription, keine Zeitlimits, Leseniveau | 28 / 31 | niemand vollständig; ausgewählte Kriterien lohnen sich (z. B. 2.4.8 Position, 1.4.6 Kontrast) |
„AA‑Konformität“ bedeutet die Erfüllung aller A‑ und AA‑Kriterien auf jeder Seite eines Prozesses — und besteht ein Prozess (z. B. ein Kauf) aus mehreren Seiten, müssen alle konform sein, sonst ist es keine (Konformitätsanforderung „vollständige Prozesse“). Es gibt keine „Konformität zu 90 %“. Es gibt Konformität oder eine Mängelliste.
Wie die WCAG ins Gesetz gelangen: EN 301 549
EN 301 549 „Barrierefreiheitsanforderungen für IKT‑Produkte und ‑Dienstleistungen“ ist eine europäische Norm von ETSI/CEN/CENELEC. Ihr Kapitel 9 („Web“) übernimmt die WCAG‑2.1‑Kriterien der Stufen A und AA als Anforderungen 9.1.1.1–9.4.1.3; Kapitel 10 wendet sie auf Dokumente an, Kapitel 11 auf Software und Apps, Kapitel 12 auf Dokumentation und Support. Die Fassung V3.2.1 (2021‑03) ist im Amtsblatt der EU als harmonisierte Norm unter der Richtlinie 2016/2102 (öffentlicher Sektor) genannt. Unter dem EAA hat die Kommission eine Aktualisierung beauftragt (Mandat M/587); ETSI hat die neue Fassung veröffentlicht, ihre Nennung im Amtsblatt unter dem EAA steht aber noch aus. Folge: Die Konformitätsvermutung nach Art. 20 Abs. 1 des polnischen Gesetzes greift formal noch nicht, aber der einzige praktische Maßstab einer Behörde ist EN 301 549, also WCAG 2.1 AA. Wer 2.2 AA erfüllt, erfüllt 2.1 AA (2.2 ist eine Obermenge, abgesehen vom gestrichenen 4.1.1).
Die Norm selbst — wer sie herausgibt, was in den Kapiteln 4–13 steht, warum Kapitel 9 schlicht WCAG ist und wie man sie in der Dokumentation zitiert — hat eine eigene Seite: EN 301 549.
Was neu ist in WCAG 2.2
| Kriterium | Stufe | In einem Satz |
|---|---|---|
| 2.4.11 Fokus nicht verdeckt (Minimum) | AA | Das fokussierte Element darf nicht vollständig unter einem Sticky‑Header oder Cookie‑Banner verschwinden. |
| 2.4.12 Fokus nicht verdeckt (Erweitert) | AAA | … auch nicht teilweise. |
| 2.4.13 Fokus‑Erscheinungsbild | AAA | Der Fokusindikator hat mindestens 2 px Umriss und 3:1 Kontrast. |
| 2.5.7 Ziehbewegungen | AA | Alles, was durch Ziehen geschieht (Slider, Sortieren), geht auch durch Klicks. |
| 2.5.8 Zielgröße (Minimum) | AA | Ein Berührungsziel ist mindestens 24×24 CSS‑px groß oder hat ausreichend Abstand zu Nachbarn. |
| 3.2.6 Konsistente Hilfe | A | Kontakt, Chat, FAQ — an derselben Stelle auf jeder Seite. |
| 3.3.7 Redundante Eingabe | A | Keine doppelte Eingabe derselben Daten in einem Prozess (Lieferadresse = Rechnungsadresse: ein Klick). |
| 3.3.8 Barrierefreie Authentifizierung (Minimum) | AA | Anmeldung ohne kognitive Tests: kein Abtippen von Codes aus Bildern, Einfügen des Passworts und Passwortmanager möglich. |
| 3.3.9 Barrierefreie Authentifizierung (Erweitert) | AAA | … ohne jede Ausnahme (auch keine Objekterkennung). |
| 4.1.1 Syntaxanalyse | — | gestrichen — Browser reparieren Syntaxfehler selbst; doppelte IDs verletzen weiterhin 4.1.2 und 1.3.1. |
Drei davon (2.5.8, 3.3.7, 3.3.8) betreffen Shops und Anmeldung unmittelbar — deshalb ist für den E‑Commerce 2.2 ein besseres Ziel als 2.1, auch wenn das Recht heute auf 2.1 verweist.
Die Kriterien, die am häufigsten scheitern
Audits und unsere Prüfung zeigen, dass gut ein Dutzend Kriterien für die meisten Mängel verantwortlich ist. Jedes hat eine Regel im Bericht.
1.1.1 Nicht‑Text‑Inhalte (A) — Bilder ohne Alternative
Jedes informationstragende Bild hat ein alt, das diese Information beschreibt; ein dekoratives alt=""; ein Icon‑Button hat einen Namen. Häufigste Fehler: fehlendes Attribut, Dateiname im alt, „Bild“, „Foto“, alt auf Dekoration, CAPTCHA ohne Alternative. Prüfung: Regeln img-alt, img-alt-filename.
1.3.1 Info und Beziehungen (A) — nur visuelle Struktur
Überschriften als fetter Text, Tabellen als Divs, Listen als Absätze mit Gedankenstrichen, Feldbeschriftungen ohne Verknüpfung. Ein Screenreader sieht flachen Text. Prüfung: heading-order, form-label, table-headers, dup-id.
1.4.3 Kontrast (Minimum) (AA) — 4,5:1
Normaler Text 4,5:1, großer (≥ 24 px oder ≥ 19 px fett) 3:1. Hellgraue Bildunterschriften, weißer Text auf hellem Foto, Platzhalter, nur farblich unterschiedene Links. Die Prüfung misst den tatsächlichen Kontrast nach dem Zusammensetzen des Hintergrunds im Browser: contrast-text.
1.4.4 Textgröße ändern (AA) und 1.4.10 Umbruch (AA)
Die Seite funktioniert bei 200 % Vergrößerung und 320 px Breite ohne Scrollen in zwei Richtungen. Datentabellen sind eine Ausnahme, wenn sie im eigenen Container scrollen. Die Prüfung rendert die Seite bei 390 und 320 px: reflow-320, mobile-overflow, doc-zoom (Verbot von user-scalable=no).
1.4.11 Nicht‑Text‑Kontrast (AA) — 3:1
Feldrahmen, Icons, Zustandsanzeigen, Diagramme. Ein hellgrauer Formularfeldrahmen auf Weiß ist ein typisches 1,5:1.
2.1.1 Tastatur (A) und 2.1.2 Keine Tastaturfalle (A)
Alles lässt sich mit der Tastatur bedienen; aus nichts kommt man „nicht mehr heraus“. Hover‑Menüs, div onclick, Modals ohne Esc, eingebettete Player. Prüfung: aria-presentation-interactive, focusable-hidden, tabindex-positive.
2.2.2 Pausieren, beenden, ausblenden (A) und 2.3.1 Blitzen (A)
Karussells, Ticker, animierte Hintergründe ohne Pause‑Taste; nichts blinkt öfter als 3‑mal pro Sekunde. Prüfung: media-autoplay, marquee-blink, motion-reduced (fehlende Unterstützung von prefers-reduced-motion).
2.4.1 Blöcke überspringen (A), 2.4.2 Seitentitel (A), 2.4.6 Überschriften und Beschriftungen (AA)
Link „Zum Inhalt springen“, eindeutiger Titel, Überschriften, die Abschnitte beschreiben, ein h1. Prüfung: skip-link, landmark-main, doc-title, heading-h1, heading-empty.
2.4.4 Linkzweck (A)
„Mehr lesen“ ×12, „hier“, „klicken“. Der Linkname soll sagen, wohin er führt — im Satzkontext oder allein. Prüfung: link-name, link-generic.
2.4.7 Sichtbarer Fokus (AA)
outline: none ohne Ersatz. Eine Zeile CSS, die die Seite für Tastaturnutzer abschaltet. Die Prüfung durchsucht die Stylesheets: focus-outline-suppressed.
2.5.8 Zielgröße (AA, 2.2)
Schaltflächen und Links unter 24×24 px ohne Abstand: Social‑Icons, Paginierung, ± im Warenkorb. Die Prüfung misst jedes Ziel: target-size.
3.1.1 Sprache der Seite (A)
<html lang> — ohne das liest ein Synthesizer Deutsch auf Englisch. Prüfung: doc-lang.
3.3.1 Fehlererkennung (A), 3.3.2 Beschriftungen oder Anweisungen (A)
Fehler nur durch roten Rahmen markiert; Platzhalter statt Beschriftung; Pflichtfelder ohne Kennzeichnung. Prüfung: form-label, form-placeholder-only.
4.1.2 Name, Rolle, Wert (A)
Eigene Komponenten (Select, Tabs, Akkordeon, Modal) ohne Rolle und Zustand; Schaltflächen ohne Namen; ARIA mit Verweis auf nicht existierende IDs. Prüfung: button-name, aria-role-invalid, aria-ref-broken, aria-hidden-focusable. Zu ARIA.
1.2.2 Untertitel (A) und 1.2.5 Audiodeskription (AA)
Video mit Ton hat Untertitel (keine unkorrigierten YouTube‑Automatik‑Untertitel); Video mit wesentlicher visueller Ebene hat Audiodeskription oder Textalternative. Prüfung: video-captions.
Wie man ein Audit‑Ergebnis liest
Ein guter Bericht nennt für jeden Mangel: das Kriterium (z. B. 1.4.3), die Stufe, die Position (Selektor oder Bildschirmfoto), das Ausmaß (wie viele Vorkommen) und die Behebung. Mängel addieren sich nicht linear: Eine „Bezahlen“‑Schaltfläche ohne Namen ist schlimmer als hundert dekorative Bilder mit leerem alt. Unser Bericht ordnet sie nach Gewicht (kritisch → schwer → mittel → gering) und zeigt gesondert, was funktioniert und was nicht geprüft wurde — denn „nicht geprüft“ ist nicht „erfüllt“. Ein Automat erkennt 30–50 % der Kriterien; den Rest (Sinn der Alternativen, Logik der Überschriften, Verständlichkeit der Meldungen, Bedienung mit Screenreader) prüft ein Mensch. Die Prüfung der ganzen Website mit Behebungsanleitung ist das, was wir zu Beginn anstelle eines Menschen bieten; das manuelle Audit — am Ende.
Werkzeuge für eigene Tests
- Tastatur: Maus weglegen und den Kauf mit Tab durchgehen. Der billigste Test der Welt.
- Screenreader: NVDA (Windows, kostenlos), VoiceOver (macOS/iOS, eingebaut), TalkBack (Android).
- Vergrößerung: Strg + bis 200 %, dann das Fenster auf 320 px verengen.
- Kontrast: Die Entwicklerwerkzeuge des Browsers zeigen das Verhältnis bei jeder Textfarbe.
- Dunkelmodus und hoher Kontrast: Systemeinstellungen; prüfen, ob die Seite reagiert.
- Automaten: unsere Prüfung in einem echten Browser, dazu axe, Lighthouse, WAVE für eine zweite Meinung.