WCAG 2.1 einfach erklärt — in 5 Minuten
Wenn du dich mit Barrierefreiheit beschäftigst, stößt du sofort auf das Kürzel "WCAG". Klingt technisch, ist aber eigentlich ein einfaches Konzept. Dieser Artikel erklärt alles Wichtige in verständlicher Sprache — ohne Fachchinesisch.
Was ist WCAG überhaupt?
WCAG steht für "Web Content Accessibility Guidelines" — auf Deutsch: "Richtlinien für den Zugang zu Web-Inhalten". Es ist ein internationaler Standard, der beschreibt wie Webseiten für Menschen mit Behinderungen nutzbar gemacht werden.
Herausgeber ist das W3C (World Wide Web Consortium) — das ist die Organisation die auch HTML und CSS definiert. Die aktuelle Version WCAG 2.1 ist seit 2018 in Kraft, wird aber erst jetzt durch Gesetze wie das BFSG in Deutschland verpflichtend.
Die 4 Prinzipien: P.O.U.R.
WCAG basiert auf 4 Grundprinzipien, die sich im Akronym POUR zusammenfassen lassen. Wenn deine Webseite diese 4 Dinge erfüllt, ist sie barrierefrei.
Perceivable — Wahrnehmbar
Die einfache Regel: Alles auf deiner Webseite muss mit mindestens einem Sinn wahrnehmbar sein — also sehen, hören oder fühlen (z.B. durch Braille-Zeilen).
Was das konkret bedeutet:
- Bilder brauchen Text-Alternativen (
alt-Attribut) - Videos brauchen Untertitel für Hörgeschädigte
- Audio-Inhalte brauchen Transkripte für Gehörlose
- Texte müssen genug Kontrast zum Hintergrund haben (nicht grau auf hellgrau)
- Informationen dürfen nicht nur durch Farbe vermittelt werden ("der rote Button" funktioniert nicht für farbblinde Menschen)
Operable — Bedienbar
Die einfache Regel: Alle Funktionen deiner Webseite müssen ohne Maus bedienbar sein — zum Beispiel per Tastatur.
Was das konkret bedeutet:
- Jedes Element muss per Tab-Taste erreichbar sein
- Der aktuelle Fokus muss sichtbar sein (deutlicher Rahmen oder Highlight)
- Keine Zeitlimits für Formulare ohne Verlängerungsmöglichkeit
- Keine blitzenden Inhalte (max. 3 Blitze pro Sekunde — Epilepsie-Schutz)
- Klare Navigation: Nutzer müssen wissen wo sie sind und wie sie weiterkommen
Understandable — Verständlich
Die einfache Regel: Inhalte und Bedienung müssen verständlich und vorhersehbar sein.
Was das konkret bedeutet:
- Die Sprache der Seite muss im HTML angegeben sein (
lang="de") - Fehlermeldungen müssen klar sein ("E-Mail-Adresse enthält kein @" statt "Fehler 1023")
- Formulare brauchen beschreibende Labels
- Navigation muss konsistent sein (nicht auf jeder Seite anders)
- Text muss verständlich sein (idealerweise auch für Menschen mit kognitiven Einschränkungen)
Robust — Robust
Die einfache Regel: Dein Code muss sauber sein und mit verschiedenen Hilfsmitteln zusammenarbeiten — also Screenreadern, Spracheingabe, Braille-Zeilen.
Was das konkret bedeutet:
- Gültiger HTML-Code (keine doppelten IDs, geschlossene Tags, etc.)
- Korrekte Verwendung von ARIA-Attributen (zusätzliche semantische Hinweise)
- Status-Nachrichten sind für Screenreader erkennbar ("Formular gesendet", "Produkt zum Warenkorb hinzugefügt")
- Name, Rolle und Wert jedes Elements sind programmatisch feststellbar
Die 3 Konformitätsstufen: A, AA, AAA
WCAG unterscheidet drei Stufen der Konformität — je nachdem wie hoch die Ansprüche sind.
Level
Grundlegend — Minimum-Anforderung. Ohne Level A ist die Seite für viele Nutzer unbenutzbar.
Level
Standard — Gesetzliche Anforderung in Deutschland (BFSG). Dein Ziel.
Level
Optimal — Höchste Stufe. Nur sinnvoll bei spezialisierten Seiten (z.B. Behörden für Blinde).
Für dich relevant ist Level AA. Das ist das was das BFSG verlangt und was für ~99% aller Webseiten das richtige Ziel ist. Level AAA ist sehr anspruchsvoll (z.B. Bedienung per Gebärdensprach-Video) und in der Praxis oft nicht wirtschaftlich umsetzbar.
Wie viele Kriterien hat WCAG 2.1?
WCAG 2.1 Level AA enthält 50 Erfolgskriterien, verteilt auf die 4 Prinzipien. Das klingt viel, aber die meisten lassen sich mit wenigen Grundregeln abdecken. Die häufigsten Probleme in der Praxis sind:
- Bilder ohne alt-Text (Prinzip 1)
- Unzureichender Farbkontrast (Prinzip 1)
- Formulare ohne Labels (Prinzip 3)
- Fehlende Tastatur-Bedienbarkeit (Prinzip 2)
- Fehlende Sprach-Definition (Prinzip 3)
Diese 5 Probleme verursachen etwa 80% aller WCAG-Verstöße. Wenn du sie behebst, hast du den größten Teil deiner Webseite bereits barrierefrei gemacht.
WCAG 2.1 vs. 2.2 vs. 3.0 — was ist aktuell?
Die WCAG-Versionen werden fortlaufend weiterentwickelt:
- WCAG 2.0 (2008) — Grundlage, noch heute weit verbreitet
- WCAG 2.1 (2018) — Aktuell relevant, vom BFSG gefordert
- WCAG 2.2 (2023) — 9 neue Kriterien, noch nicht gesetzlich verpflichtend in DE
- WCAG 3.0 — Noch im Entwurf, wird vermutlich 2027-2028 final
Kurz: Du musst dich aktuell auf WCAG 2.1 Level AA konzentrieren. Wenn deine Seite das erfüllt, bist du auf der sicheren Seite. WCAG 2.2 ist ein "nice to have", aber nicht verpflichtend.
Wie prüfe ich WCAG-Konformität?
Drei Wege, von schnell zu gründlich:
- Automatisierte Tools wie bf-check.de prüfen ~30-40 der 50 Kriterien automatisch. Das deckt die häufigsten Fehler ab und ist kostenlos.
- Manuelle Prüfung — Tastatur-Test, Screenreader-Test (NVDA ist kostenlos), Farbkontrast-Check. Braucht Erfahrung, deckt aber die restlichen Kriterien ab.
- Audit durch Experten — Vollständiger Test durch zertifizierte Barrierefreiheits-Auditoren. Teuer (1.000-5.000 €) aber rechtssicher dokumentiert.
Für die meisten Webseitenbetreiber reicht die Kombination aus automatisierten Tools und einem selbst durchgeführten Tastatur-Test. Ein Experten-Audit lohnt sich erst bei kritischen Shops mit hohem Traffic oder bei rechtlichen Anforderungen.
🎯 Dein WCAG 2.1 Level AA Check
bf-check.de prüft deine Webseite automatisch auf die wichtigsten WCAG 2.1 Kriterien. 30 Sekunden, kostenlos, keine Anmeldung.
Jetzt scannenZusammenfassung — die WCAG in 5 Sätzen
- WCAG 2.1 ist der internationale Standard für Web-Barrierefreiheit, herausgegeben vom W3C.
- Das deutsche BFSG fordert WCAG 2.1 Level AA als Mindeststandard.
- Es gibt 4 Prinzipien: Perceivable, Operable, Understandable, Robust.
- Level A ist Minimum, AA ist dein Ziel, AAA ist optional.
- Die 5 häufigsten Fehler decken 80% aller Probleme ab — fang dort an.