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. Weitere Informationen finden Sie im WCAG 2.1 AA Glossar.
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 (SC 1.1.1 -- Prinzip 1: Wahrnehmbar)
- Unzureichender Farbkontrast (SC 1.4.3 -- Prinzip 1: Wahrnehmbar)
- Formulare ohne Labels (SC 1.3.1, SC 3.3.2 -- Prinzip 3: Verständlich)
- Fehlende Tastatur-Bedienbarkeit (SC 2.1.1 -- Prinzip 2: Bedienbar)
- Fehlende Sprach-Definition (SC 3.1.1 -- Prinzip 3: Verständlich)
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.
Die wichtigsten Erfolgskriterien im Überblick
Von den 50 Kriterien auf Level AA sind einige besonders praxisrelevant. Hier die Top-10, die du als Webseitenbetreiber kennen solltest:
SC 1.1.1 Nicht-Text-Inhalte (Level A): Jedes Bild, jede Grafik, jedes Icon braucht einen alternativen Text. Screenreader lesen diesen Text vor, damit blinde Nutzer wissen, was auf dem Bild zu sehen ist. Dekorative Bilder bekommen ein leeres alt=""-Attribut.
SC 1.3.1 Info und Beziehungen (Level A): Die Struktur deiner Seite muss im HTML korrekt abgebildet sein. Überschriften brauchen <h1> bis <h6>-Tags, Listen brauchen <ul>/<ol>, Tabellen brauchen Kopfzeilen. Keine rein visuellen Formatierungen (fetter Text statt einer echten Überschrift).
SC 1.4.3 Kontrast (Level AA): Normaler Text muss ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund haben. Großer Text (ab 18pt oder 14pt fett) braucht mindestens 3:1. Hellgrau auf Weiß, Orange auf Weiß -- das fällt durch.
SC 2.1.1 Tastatur (Level A): Alle Funktionen deiner Webseite müssen per Tastatur erreichbar sein. Das betrifft Links, Buttons, Dropdown-Menüs, Slider, Modale -- alles. Wenn es nur per Maus funktioniert, ist es ein Verstoß.
SC 2.4.1 Blöcke umgehen (Level A): Nutzer müssen wiederkehrende Blöcke (Navigation, Header) überspringen können. Das wird typischerweise mit einem "Skip to content"-Link gelöst, der als erstes Element im <body> steht.
SC 2.4.4 Linkzweck (Level A): Jeder Link muss aus seinem Text oder Kontext heraus verständlich sein. "Hier klicken" oder "Mehr erfahren" ohne Kontext ist ein Verstoß. Besser: "BFSG-Leitfaden lesen" oder "Barrierefreien Shop-Checkout einrichten".
SC 2.4.7 Fokus sichtbar (Level AA): Wenn du per Tab-Taste durch die Seite navigierst, muss immer klar erkennbar sein, welches Element gerade den Fokus hat. Viele Webseiten entfernen den Standard-Fokus-Ring per CSS (outline: none) -- das ist ein häufiger Verstoß.
SC 3.1.1 Sprache der Seite (Level A): Die Hauptsprache der Seite muss im HTML angegeben sein: <html lang="de">. Screenreader nutzen diese Information, um die richtige Stimme und Aussprache zu wählen.
SC 3.3.2 Beschriftungen oder Anweisungen (Level A): Formularfelder brauchen sichtbare Labels oder Anweisungen. Platzhalter-Text (placeholder) allein reicht nicht -- er verschwindet beim Eintippen.
SC 4.1.2 Name, Rolle, Wert (Level A): Jedes UI-Element muss für Hilfstechnologien identifizierbar sein. Buttons müssen als Buttons erkennbar sein, Links als Links. Bei benutzerdefinierten Widgets (Custom-Dropdowns, Akkordeons) brauchst du ARIA-Attribute.
WCAG und das BFSG: Der rechtliche Zusammenhang
Das deutsche Barrierefreiheitsstärkungsgesetz (BFSG) verweist auf die europäische Norm EN 301 549, die wiederum WCAG 2.1 Level AA als technischen Standard für Web-Barrierefreiheit festlegt. Seit dem 28. Juni 2025 ist das BFSG in Kraft -- und damit WCAG 2.1 AA faktisch der gesetzliche Mindeststandard für digitale Dienstleistungen in Deutschland.
Wer gegen WCAG-Kriterien verstößt, verstößt also gleichzeitig gegen das BFSG. Das kann zu Bußgeldern bis 100.000 EUR und wettbewerbsrechtlichen Abmahnungen führen. Die WCAG-Erfolgskriterien sind damit nicht mehr nur technische Empfehlungen, sondern rechtlich verbindlich.
Für den öffentlichen Sektor gilt zusätzlich die BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung), die ebenfalls auf WCAG 2.1 Level AA verweist. Öffentliche Stellen sind nach §12a BGG bereits seit 2019 verpflichtet.
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 in vielen Gesetzen referenziert
- WCAG 2.1 (2018) -- Aktuell relevant, vom BFSG über EN 301 549 gefordert
- WCAG 2.2 (2023) -- 9 neue Kriterien (u.a. SC 2.4.11 Fokus nicht verdeckt, SC 3.3.7 Redundante Eingabe), noch nicht gesetzlich verpflichtend in DE
- WCAG 3.0 -- Noch im Entwurf (W3C Working Draft), komplett neuer Ansatz mit Bewertungs-Score statt Pass/Fail, 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 noch nicht verpflichtend. Einige der neuen 2.2-Kriterien (wie "Fokus nicht verdeckt") sind aber pragmatisch sinnvoll und leicht umsetzbar.
Wie prüfe ich WCAG-Konformität?
Drei Wege, von schnell zu gründlich:
- Automatisierte Tools wie bf-check.de prüfen ca. 30-40 der 50 Kriterien automatisch. Das deckt die häufigsten Fehler ab und ist kostenlos. Besonders gut abgedeckt: Kontraste (SC 1.4.3), Alt-Texte (SC 1.1.1), Sprach-Definition (SC 3.1.1), HTML-Validierung (SC 4.1.1).
- Manuelle Prüfung -- Tastatur-Test (Tab durch die gesamte Seite), Screenreader-Test (NVDA ist kostenlos für Windows, VoiceOver ist auf Mac vorinstalliert), Farbkontrast-Check mit Tools. Braucht Erfahrung, deckt aber die restlichen Kriterien ab -- insbesondere SC 2.4.3 (Fokus-Reihenfolge) und SC 2.4.7 (Fokus sichtbar).
- Audit durch Experten -- Vollständiger Test durch zertifizierte Barrierefreiheits-Auditoren (z.B. nach BITV-Test-Verfahren). Teuer (1.000-5.000 EUR), aber rechtssicher dokumentiert und als Nachweis gegenüber der Marktaufsicht belastbar.
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.
WCAG in der Praxis: Die häufigsten Missverständnisse
"Meine Seite ist responsive, also ist sie barrierefrei." Falsch. Responsive Design (SC 1.4.10 Reflow) ist nur eines von 50 Kriterien. Eine responsive Seite kann trotzdem fehlende Alt-Texte, schlechte Kontraste und keine Tastatur-Bedienbarkeit haben.
"Ich habe ein Accessibility-Overlay/Plugin installiert." Overlays sind umstritten und lösen die grundlegenden Probleme nicht. Sie fügen eine Schicht über die Webseite, beheben aber nicht den fehlerhaften HTML-Code. Viele Barrierefreiheits-Experten und Behindertenverbände raten explizit davon ab. Das BFSG fordert echte Konformität, kein kosmetisches Tool.
"Level AAA ist das Beste, also mache ich gleich AAA." Level AAA ist in der Praxis für die meisten Webseiten weder realistisch noch wirtschaftlich. Beispiel: SC 1.2.6 fordert Gebärdensprach-Videos für alle Audioinhalte. Level AA ist der professionelle Standard und die gesetzliche Anforderung.
"Barrierefreiheit betrifft nur blinde Nutzer." WCAG adressiert ein breites Spektrum: Sehbehinderungen (Kontraste, Vergrößerung), Hörbehinderungen (Untertitel), motorische Einschränkungen (Tastatur-Bedienbarkeit, Zielgrößen), kognitive Einschränkungen (klare Sprache, konsistente Navigation). Rund 10% der Bevölkerung profitieren direkt von barrierefreien Webseiten.
Weiterlesen
Ist deine Webseite BFSG-konform?
Finde es in 30 Sekunden heraus – kostenloser Schnellcheck mit sofortigem Ergebnis.
Jetzt kostenlos prüfen →Zusammenfassung -- die WCAG in 5 Sätzen
- WCAG 2.1 ist der internationale Standard für Web-Barrierefreiheit, herausgegeben vom W3C.
- Das deutsche BFSG fordert über EN 301 549 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.
Hinweis: Dieser Artikel dient der allgemeinen Information und stellt keine Rechtsberatung dar. Die WCAG-Richtlinien werden vom W3C gepflegt und weiterentwickelt. Bei konkreten Fragen zur BFSG-Konformität wende dich an einen spezialisierten Berater. Stand: April 2026.