Web Content Accessibility Guidelines (WCAG): Eine kurze Übersicht

Die Web Content Accessibility Guidelines (WCAG) sind kein Gesetz, sondern eine technische Empfehlung des W3C. Ihre Wirkung entfalten sie dadurch, dass Gesetze und Normen auf sie verweisen. In Europa geschieht das über die harmonisierte Norm EN 301 549, die die Erfolgskriterien der WCAG für den europäischen Markt verbindlich macht.

Die wichtigsten Versionen im Überblick:

• WCAG 2.0 aus dem Jahr 2008, die Basis aller späteren Fassungen
• WCAG 2.1 aus dem Juni 2018, mit Ergänzungen für mobile Nutzung, Sehschwäche und kognitive Einschränkungen
• WCAG 2.2 vom 5. Oktober 2023, der aktuelle Standard mit neun zusätzlichen Erfolgskriterien

Alle Versionen sind aufwärtskompatibel: Wer WCAG 2.2 erfüllt, erfüllt automatisch auch 2.1 und 2.0. Umgekehrt gilt das nicht. Im Oktober 2025 wurde WCAG 2.2 zusätzlich als ISO/IEC 40500:2025 international normiert.

Die vier Grundprinzipien der Web Content Accessibility Guidelines (WCAG)

Die WCAG basieren auf vier Grundprinzipien, die im Englischen unter dem Kürzel POUR bekannt sind:

• Wahrnehmbar (Perceivable)
• Bedienbar (Operable)
• Verständlich (Understandable)
• Robust (Robust)

Diesen Prinzipien sind Richtlinien zugeordnet, und jede Richtlinie enthält konkrete Erfolgskriterien. Schauen wir uns die Prinzipien im Detail an, jeweils mit Beispielen aus der Praxis.

Wahrnehmbar

Informationen und Benutzeroberflächen müssen so präsentiert werden, dass alle Nutzer sie wahrnehmen können. Dazu gehören folgende Richtlinien:

• Stelle Textalternativen für Inhalte bereit, die nicht aus Text bestehen
• Biete Alternativen für zeitbasierte Medien an
• Gestalte Inhalte so, dass sie auf verschiedene Arten dargestellt werden können, ohne dass Information verloren geht
• Mache es Nutzern leichter, Inhalte zu sehen und zu hören

In der Praxis bedeutet das zum Beispiel: Jedes inhaltstragende Bild bekommt einen aussagekräftigen Alternativtext, rein dekorative Grafiken dagegen ein leeres Attribut alt, damit ein Screenreader sie überspringt. Videos brauchen Untertitel, aufwendigere Inhalte zusätzlich eine Audiodeskription. Überschriften werden als echte Überschriftenebenen ausgezeichnet und nicht nur fett formatiert. Für normalen Fließtext gilt ein Kontrastverhältnis von mindestens 4,5:1, für große Schrift genügen 3:1. Farbe darf nie das einzige Mittel sein, um Information zu transportieren: Ein rot markiertes Formularfeld braucht zusätzlich eine Textmeldung. Und der Inhalt muss sich auf eine Breite von 320 CSS Pixeln umbrechen lassen, ohne dass horizontal gescrollt werden muss.

Bedienbar

Alle Elemente der Benutzeroberfläche und der Navigation müssen bedienbar sein. Die Richtlinien hierfür sind:

• Stelle sicher, dass alle Funktionen über die Tastatur verfügbar sind
• Gib Nutzern ausreichend Zeit, Inhalte zu lesen und zu benutzen
• Gestalte Inhalte so, dass sie keine Anfälle oder physische Reaktionen auslösen
• Stelle Möglichkeiten zur Navigation und zum Auffinden von Inhalten bereit
• Erlaube Eingaben über verschiedene Modalitäten, nicht nur über Maus oder präzise Gesten

Konkret heißt das: Jede Funktion muss allein mit der Tastatur erreichbar sein, und der Tastaturfokus darf nirgendwo hängen bleiben. Der aktuelle Fokus muss deutlich sichtbar sein, ein wegformatierter Fokusrahmen ist einer der häufigsten und ärgerlichsten Fehler überhaupt. Zeitlimits in Formularen sollten verlängerbar sein. Automatisch startende Animationen und Karussells brauchen eine Pausefunktion. Blitzeffekte dürfen dreimal pro Sekunde nicht überschreiten. Ein Sprunglink zum Hauptinhalt spart Menschen, die mit der Tastatur navigieren, bei jedem Seitenaufruf viele Tastenanschläge. Aktionen, die durch Ziehen ausgeführt werden, brauchen eine einfache Alternative, etwa einen Klick oder ein Eingabefeld. Bedienelemente sollten mindestens 24 mal 24 CSS Pixel groß sein.

Verständlich

Informationen und die Bedienung der Benutzeroberfläche müssen verständlich sein. Folgende Richtlinien helfen dabei:

• Mache Textinhalte lesbar und verständlich
• Gestalte Webseiten so, dass sie vorhersehbar erscheinen und funktionieren
• Hilf Nutzern, Fehler zu vermeiden und zu korrigieren

Das beginnt bei der korrekten Sprachauszeichnung im Attribut lang, damit Screenreader die richtige Aussprache wählen. Fremdsprachige Passagen werden gesondert ausgezeichnet. Navigation und Bedienelemente bleiben über alle Seiten hinweg an derselben Stelle und behalten ihre Bezeichnung. Eine Auswahl in einem Dropdown darf nicht automatisch die Seite wechseln. Formularfelder brauchen dauerhaft sichtbare Beschriftungen statt bloßer Platzhaltertexte. Fehlermeldungen benennen das betroffene Feld und sagen, wie sich der Fehler beheben lässt. Bei rechtlich oder finanziell bindenden Eingaben muss eine Korrektur oder Bestätigung möglich sein. Neu hinzugekommen ist außerdem der Grundsatz, dass eine Anmeldung nicht allein von Gedächtnisleistungen wie dem Abtippen von Zeichenrätseln abhängen darf.

Robust

Inhalte müssen so robust sein, dass sie von einer Vielzahl von User Agents, einschließlich assistiver Technologien, zuverlässig interpretiert werden können. Die Richtlinie hierzu lautet:

• Maximiere die Kompatibilität mit aktuellen und zukünftigen User Agents, einschließlich assistiver Technologien

Praktisch bedeutet das vor allem: sauberes, semantisches Markup verwenden. Ein Button sollte ein Button sein und kein klickbares div. Selbstgebaute Bedienelemente brauchen Name, Rolle und Zustand, damit assistive Technologien sie korrekt ausgeben. Attribute aus ARIA sind dabei eine Ergänzung und kein Ersatz für saubere Semantik. Wichtig sind außerdem Statusmeldungen: Wenn ein Warenkorb aktualisiert wird oder eine Suche Ergebnisse liefert, ohne dass sich der Fokus bewegt, muss diese Information auch akustisch ankommen.

Die drei Konformitätsstufen der Web Content Accessibility Guidelines (WCAG)

Jede Richtlinie enthält spezifische Erfolgskriterien, die in drei Konformitätsstufen unterteilt sind: A (niedrigste), AA und AAA (höchste).

• Stufe A deckt grundlegende Hürden ab. Ohne sie ist eine Website für manche Menschen schlicht unbenutzbar.
• Stufe AA ist der Praxisstandard. Auf diese Stufe verweisen die europäischen und deutschen Regelungen, und sie ist das realistische Ziel für nahezu jedes Projekt.
• Stufe AAA enthält weitergehende Anforderungen, etwa ein Kontrastverhältnis von 7:1 oder Gebärdensprachvideos. Das W3C selbst empfiehlt nicht, AAA für eine gesamte Website anzustreben, da sich manche Kriterien für bestimmte Inhaltstypen gar nicht erfüllen lassen.

Insgesamt umfasst WCAG 2.2 86 Erfolgskriterien. Neun kamen gegenüber Version 2.1 hinzu, das frühere Kriterium 4.1.1 zur Auswertbarkeit von Markup wurde gestrichen, weil moderne Browser fehlerhaftes Markup zuverlässig korrigieren.

Welche WCAG-Version rechtlich zählt

Hier lohnt sich ein genauer Blick. Die derzeit geltende harmonisierte Norm EN 301 549 in der Version V3.2.1 verweist noch auf WCAG 2.1 Stufe AA. Eine Neufassung mit der Version 4.1.1 ist in Arbeit und übernimmt die Kriterien von WCAG 2.2. Als Zieltermin für die Bekanntmachung im Amtsblatt der Europäischen Union nennt das Normungsinstitut ETSI derzeit den Herbst 2026, eine Verschiebung ist nicht ausgeschlossen.

Für die Praxis heißt das: Formal reicht heute WCAG 2.1 Stufe AA, sinnvoll ist aber, direkt nach WCAG 2.2 zu arbeiten. Die neuen Kriterien bringen echten Nutzen, die Umstellung kommt absehbar, und da 2.2 die Version 2.1 vollständig enthält, entsteht kein doppelter Aufwand.

Hier kommst du zur offiziellen WCAG-Dokumentation für die Version 2.2

So prüfst du deine Website

Kein Werkzeug findet alles. Automatisierte Tests decken je nach Studie nur etwa ein Drittel der Probleme auf. Eine sinnvolle Kombination sieht so aus:

1. Automatisiert prüfen mit Werkzeugen wie axe DevTools, WAVE, Lighthouse oder Pa11y. Das findet schnell Kontrastfehler, fehlende Alternativtexte und unbeschriftete Formularfelder.
2. Mit der Tastatur testen. Lege die Maus beiseite und navigiere die wichtigsten Abläufe allein mit Tabulator, Eingabetaste, Leertaste und Pfeiltasten. Ist der Fokus immer sichtbar? Kommst du überall hin und wieder heraus?
3. Mit einem Screenreader testen, etwa NVDA unter Windows, VoiceOver auf Apple Geräten oder TalkBack auf Android.
4. Zoomen und umbrechen lassen. Vergrößere auf 200 Prozent und prüfe die Darstellung auf schmalen Viewports.
5. Echte Menschen einbeziehen. Nutzertests mit Menschen mit Behinderungen liefern Erkenntnisse, die kein Werkzeug ersetzt.

Ein Wort zu sogenannten Overlays, also eingebundenen Skripten, die Barrierefreiheit per Knopfdruck versprechen: Sie beheben die zugrunde liegenden Probleme im Markup nicht und werden von Betroffenenverbänden überwiegend abgelehnt. Als alleinige Maßnahme sind sie weder technisch noch rechtlich eine Lösung.

Die häufigsten Fehler

Auswertungen von Millionen Startseiten zeigen Jahr für Jahr dieselben Schwachstellen. Über neunzig Prozent der untersuchten Seiten weisen automatisch erkennbare Verstöße auf, und die Verteilung ist erstaunlich stabil:

• zu geringer Textkontrast
• fehlende Alternativtexte bei Bildern
• leere Links und Buttons ohne zugänglichen Namen
• fehlende Beschriftungen bei Formularfeldern
• fehlende Sprachauszeichnung des Dokuments
• uneinheitliche oder übersprungene Überschriftenebenen

Die gute Nachricht: Wer diese sechs Punkte konsequent abarbeitet, beseitigt einen großen Teil der Barrieren mit vergleichsweise überschaubarem Aufwand.

Der Nutzen geht über die Pflicht hinaus

Indem du diese Richtlinien befolgst, stellst du sicher, dass deine Website für ein möglichst breites Publikum zugänglich ist. Das verbessert nicht nur die Nutzererfahrung für Menschen mit Beeinträchtigungen, sondern auch die allgemeine Benutzerfreundlichkeit und die Auffindbarkeit in Suchmaschinen. Semantisches Markup, klare Struktur, sprechende Linktexte, gute Kontraste und schnelle Ladezeiten sind zugleich klassische Qualitätsmerkmale guter Websites. Hinzu kommen praktische Vorteile: robustere Vorlagen, geringerer Wartungsaufwand, bessere Bedienbarkeit auf kleinen Displays und im Freien sowie ein Auftritt, der Respekt gegenüber allen Besuchern signalisiert.

Ausblick: Web Content Accessibility Guidelines (WCAG) 3.0

An einer neuen Generation der Richtlinien wird bereits gearbeitet. Unter dem Kürzel WCAG 3.0 entsteht ein Standard, der über reine Webinhalte hinausgeht und das starre Bestehen oder Nichtbestehen einzelner Kriterien durch ein abgestuftes Bewertungsmodell ersetzen soll. Der Stand ist bislang ein Arbeitsentwurf, mit einer finalen Empfehlung ist frühestens gegen Ende des Jahrzehnts zu rechnen, und WCAG 2.2 wird auch danach gültig bleiben. Wer heute nach WCAG 2.2 Stufe AA arbeitet, ist also gut aufgestellt und muss sich von Marketingversprechen rund um Version 3.0 nicht unter Druck setzen lassen.

Wichtig: Barrierefreiheit ist ein fortlaufender Prozess

Barrierefreiheit ist kein einmaliges Projekt, sondern ein fortlaufender Prozess. Überprüfe deine Website regelmäßig, verankere die Anforderungen in deinem Redaktionsalltag und in deinen Entwicklungsprozessen und passe sie an neue Standards und Technologien an. Am wirkungsvollsten ist es, Barrierefreiheit von Anfang an mitzudenken, statt sie am Ende nachzurüsten. Beginne mit den größten Hürden auf den wichtigsten Seiten, dokumentiere deine Fortschritte, und arbeite dich Schritt für Schritt vor.

Hinweis: Dieser Beitrag bietet allgemeine Informationen zu den Web Content Accessibility Guidelines (WCAG) und stellt keine Rechtsberatung dar. Für die verbindliche Bewertung deines konkreten Falls wende dich bitte an eine Rechtsanwältin oder einen Rechtsanwalt.

Kostenfreie Beratung zu den Web Content Accessibility Guidelines (WCAG)

Du hast Fragen rund um die Web Content Accessibility Guidelines (WCAG)? Dann nutze einfach unsere kostenfreie Beratung.

Hier kommst du zu unserem Anfrageformular