Barrierefreie Website: WCAG 2.2 praktisch erklärt

Hinweis vorab: Dieser Beitrag ist keine Rechtsberatung. Welche Pflichten für Ihr Unternehmen gelten, klären Sie bitte anwaltlich – die rechtliche Einordnung finden Sie im Beitrag BFSG: Welche Websites und Shops jetzt barrierefrei sein müssen. Hier geht es um die technische Seite.

Was die WCAG sind – und warum sie in Deutschland zählen

Die Web Content Accessibility Guidelines (WCAG) werden vom World Wide Web Consortium (W3C) herausgegeben und sind der internationale Standard für barrierefreie Webinhalte. WCAG 2.2 wurde laut W3C am 5. Oktober 2023 als W3C Recommendation veröffentlicht; die aktuelle Fassung trägt das Datum 12. Dezember 2024.

Wichtig für die Planung: Die Versionen bauen aufeinander auf. WCAG 2.1 ergänzte WCAG 2.0 um 17 Erfolgskriterien, WCAG 2.2 fügte neun weitere hinzu – bestehende Kriterien werden dabei nicht verändert. Wer nach der neueren Fassung arbeitet, erfüllt die ältere automatisch mit.

Der Weg ins deutsche Recht führt über die europäische Norm EN 301 549. Die Bundesfachstelle Barrierefreiheit beschreibt es so: Die Anforderungen an Websites stehen in Abschnitt 9 der Norm, und die Norm verweist dort auf Erfolgskriterien der WCAG. Deshalb lohnt es sich, die WCAG zu verstehen – auch wenn im Gesetzestext ganz andere Wörter stehen.

Die vier Prinzipien

Alle Erfolgskriterien ordnen sich vier Prinzipien unter. Sie tauchen wortgleich in der deutschen Verordnung zum Barrierefreiheitsstärkungsgesetz wieder auf, wo § 12 Nummer 3 BFSGV verlangt, Webseiten und Apps „wahrnehmbar, bedienbar, verständlich und robust“ zu gestalten.

Wahrnehmbar. Informationen müssen über mehr als einen Sinneskanal zugänglich sein: ein Bild braucht eine Textalternative, ein Video Untertitel, ein Text genug Kontrast.
Bedienbar. Alles muss sich auch ohne Maus benutzen lassen – mit Tastatur, Sprachsteuerung oder Spezialeingabe. Zeitlimits und Bewegung dürfen nicht zur Falle werden.
Verständlich. Sprache, Struktur und Bedienlogik müssen nachvollziehbar sein, Fehlermeldungen hilfreich statt kryptisch.
Robust. Der Code muss so sauber sein, dass Hilfsmittel wie Screenreader ihn zuverlässig interpretieren – auch nach dem nächsten Browser-Update.

Wer diese vier Begriffe im Kopf hat, kann jede Design-Entscheidung einordnen, ohne die Kriterienliste auswendig zu kennen.

A, AA, AAA – warum AA der Maßstab ist

Die WCAG kennen drei Konformitätsstufen: A (Minimum), AA und AAA. Sie sind kein Qualitätsranking, sondern eine Staffelung nach Reichweite und Umsetzbarkeit.

In der Praxis ist AA der Maßstab. Die Bundesfachstelle Barrierefreiheit schreibt, die EN 301 549 verweise auf Erfolgskriterien der „Konformitätsstufen A und AA“ der WCAG. Der Ausschuss für barrierefreie Informationstechnik formuliert es in seiner Einschätzung noch direkter: Gesucht werde die barrierefreie Gestaltung „nach der technischen Norm EN 301 549 und der darin inkludierten WCAG 2.1 auf Konformitätsstufe AA als Mindestanforderungen“.

AAA bleibt bewusst außen vor, und zwar mit ausdrücklichem Segen des W3C: Stufe AAA als generelle Vorgabe für ganze Websites sei „not recommended … because it is not possible to satisfy all Level AAA success criteria for some content“. Einzelne AAA-Kriterien lohnen sich trotzdem punktuell – etwa ein erhöhter Kontrast auf Textseiten.

Die Praxis-Checkliste

Der folgende Teil ist die Kurzfassung dessen, was wir in Projekten tatsächlich prüfen. Jedes Kriterium mit Nummer und Stufe, damit Sie es nachschlagen können.

Sehen: Kontrast, Zoom, Schriftgrößen

Textkontrast mindestens 4,5:1 (Kriterium 1.4.3, Stufe AA). Für große Schrift genügen 3:1; als „groß“ gilt laut W3C ab 18 Punkt oder 14 Punkt fett – etwa 24 px beziehungsweise 18,5 px. Ausgenommen sind Logos, inaktive Bedienelemente und rein dekorativer Text. Häufigster Fehler: hellgraue Fließtexte und Platzhalter in Formularfeldern.
Bedienelemente mindestens 3:1 (Kriterium 1.4.11, Stufe AA). Betrifft Button-Ränder, Feld-Umrandungen, Icons, Diagrammfarben – genau das, was Designs gern zart halten.
Zoom bis 200 % ohne Verlust (Kriterium 1.4.4, Stufe AA). Praktisch heißt das: relative Einheiten (rem, em, %) statt fester Pixelwerte und ein Layout, das umbricht statt abzuschneiden – dieselbe Disziplin wie beim Responsive Design.
Textabstände dürfen sich ändern (Kriterium 1.4.12, Stufe AA). Zeilenhöhe auf das 1,5-Fache, Absatzabstand auf das 2-Fache, Buchstabenabstand auf das 0,12-Fache, Wortabstand auf das 0,16-Fache der Schriftgröße – ohne dass etwas verschwindet.
Keine Information allein über Farbe (Kriterium 1.4.1, Stufe A). Ein rot umrandetes Pflichtfeld ohne Text ist bei Farbfehlsichtigkeit wertlos. Farbe darf verstärken, nicht allein tragen.

Bedienen: Tastatur, Fokus, Zielgrößen

Alles per Tastatur erreichbar (Kriterium 2.1.1, Stufe A). Der schnellste Selbsttest: Maus weglegen, mit Tab durch die Seite gehen. Alles, was Sie so nicht erreichen – Slider, Dropdowns, Cookie-Banner, Lightboxen –, ist ein Befund.
Sichtbarer Fokus (Kriterium 2.4.7, Stufe AA). Ein outline: none im CSS ohne eigenen Ersatz ist einer der häufigsten und billigsten Fehler überhaupt.
Fokus nicht verdeckt (Kriterium 2.4.11, Stufe AA, neu in WCAG 2.2). Klebrige Kopfzeilen und Chat-Buttons dürfen das fokussierte Element nicht überdecken.
Zielgrößen mindestens 24 × 24 CSS-Pixel (Kriterium 2.5.8, Stufe AA, neu in WCAG 2.2) – mit Ausnahmen, etwa bei ausreichendem Abstand oder Links im Fließtext.
Sprungmarke zum Inhalt (Kriterium 2.4.1, Stufe A). Der „Skip-Link“ erspart Tastaturnutzern, sich bei jedem Seitenaufruf durch dasselbe Menü zu arbeiten. Aufwand: eine halbe Stunde.

Verstehen: Struktur, Sprache, Formulare

Logische Überschriftenhierarchie (Kriterium 1.3.1, Stufe A; ergänzend 2.4.6, Stufe AA). Screenreader-Nutzer springen von Überschrift zu Überschrift – eine H3 direkt nach einer H1 bricht diese Navigation. Eine H1 pro Seite ist etablierte Praxis, aber keine WCAG-Vorgabe: Gefordert sind Struktur, Beziehungen und aussagekräftige Beschriftungen.
Sprache ausgezeichnet (Kriterium 3.1.1, Stufe A; 3.1.2 Stufe AA). <html lang="de"> gehört auf jede Seite, sonst liest der Screenreader deutschen Text mit englischer Aussprache.
Beschriftungen und Hinweise (Kriterium 3.3.2, Stufe A). Jedes Formularfeld braucht ein echtes, dauerhaft sichtbares Label. Ein Platzhaltertext ist kein Label – er verschwindet beim Tippen.
Fehler in Textform (Kriterien 3.3.1 Stufe A, 3.3.3 Stufe AA). „Bitte geben Sie das Datum als TT.MM.JJJJ ein“ statt eines roten Rahmens.
Anmeldung ohne Gedächtnistest (Kriterium 3.3.8, Stufe AA, neu in WCAG 2.2). Logins dürfen keinen kognitiven Funktionstest ohne Alternative verlangen – relevant für jeden Shop mit Kundenkonto.

Medien und Bewegung

Alternativtexte für Bilder (Kriterium 1.1.1, Stufe A). Informationstragende Bilder bekommen eine Beschreibung, dekorative ein leeres Attribut – Details im Lexikoneintrag Alt-Text. Für Shops gehört das fest zum Bildersatz, siehe Produktfotos, die verkaufen.
Untertitel und Alternativen für Videos (Kriterien 1.2.2 und 1.2.3, jeweils Stufe A). Untertitel für aufgezeichnete Videos mit Ton, dazu eine Audiodeskription oder eine gleichwertige Textalternative. Ein Transkript ist nebenbei verwertbarer Text für die Suchmaschinenoptimierung.
Bewegung anhaltbar (Kriterium 2.2.2, Stufe A). Alles, was länger als fünf Sekunden automatisch läuft, blinkt oder scrollt, braucht eine Pause-Möglichkeit.
Reduzierte Bewegung respektieren. prefers-reduced-motion abzufragen und Animationen zurückzunehmen, entspricht dem AAA-Kriterium 2.3.3 – nicht Pflicht auf Stufe AA, aber mit wenigen Zeilen CSS erledigt.

Diese Frage kommt in fast jedem Projekt – meist mit dem Hinweis, das koste ja nur ein paar Euro im Monat. Die Antwort fällt eindeutig aus, und zwar nicht aus unserer Meinung heraus, sondern aus der Einschätzung der zuständigen Fachstellen.

Der Ausschuss für barrierefreie Informationstechnik nach § 5 BITV 2.0 hat sich am 12. März 2025 mit der gemeinsamen Einschätzung der Überwachungsstellen des Bundes und der Länder befasst. Die Zusammenfassung dort ist unmissverständlich: „Ein nicht barrierefreier Webauftritt wird durch den Einsatz eines Overlay-Tools nicht zwingend barrierefrei gemäß den gesetzlichen Anforderungen.“ Und weiter: „Oft verschlechtert die Einbindung eines Overlay-Tools die Zugänglichkeit eines Webauftritts für Nutzende Assistiver Technologien.“

Entscheidend ist das Argument dahinter. In derselben Einschätzung heißt es: „Menschen mit Beeinträchtigungen haben diese Einstellungen in der Regel im Betriebssystem ihres Geräts oder in dem von ihnen genutzten Browser vorgenommen.“ Schriftgröße, Zoom, Kontrast, Farbumkehr, Vorlesefunktion – all das ist längst eingebaut und gilt dann für alle Anwendungen, nicht nur für eine einzelne Website.

Daraus folgt die eigentliche Aufgabe einer Website: Sie muss diese Einstellungen nicht anbieten – sondern zulassen. Genau das prüfen die Kriterien 1.4.4 (Zoom bis 200 %) und 1.4.12 (veränderte Textabstände). Eine Seite mit festen Pixelhöhen und overflow: hidden bricht, sobald jemand seine Systemschrift vergrößert. Kein Widget repariert das.

Auch der Deutsche Blinden- und Sehbehindertenverband (DBSV) kommt in seiner Stellungnahme vom 19. April 2024 zu diesem Ergebnis: Overlays seien nicht in der Lage, „eine Webseite von außen und quasi auf Knopfdruck gemäß der geltenden Standards barrierefrei zu gestalten. Sie versagen insbesondere im Bereich der Zugänglichkeit für blinde Menschen.“ Oberste Priorität habe „die barrierefreie Gestaltung der einzelnen Webseiten selbst“; als nachhaltigere Strategie nennt der DBSV „die Einstellungsmöglichkeiten im Betriebssystem und im Browser“.

Zwei Einordnungen zur Fairness: Die Einschätzung des Ausschusses richtet sich an öffentliche Stellen nach der EU-Webseitenrichtlinie – die technische Aussage gilt aber unabhängig vom Rechtsrahmen. Und beide Stellen schließen Overlays nicht grundsätzlich aus: Auf einer bereits normkonformen Seite können sie laut DBSV für bestimmte Zielgruppen einen Mehrwert bieten, und der Ausschuss verlangt: „Overlay-Tools selbst müssen komplett barrierefrei und abschaltbar sein.“ Ein Widget ist also allenfalls Zugabe – nie Ersatz.

Womit Sie prüfen

Verbreitet und etabliert sind drei Werkzeuge: WAVE von WebAIM, axe von Deque und die Accessibility-Prüfungen in Google Lighthouse, die laut Chrome-Dokumentation auf axe-core basieren. Für Kontrastwerte gibt es eigene Kontrastprüfer, unter anderem von WebAIM. Für den deutschen Raum verweist die Bundesfachstelle Barrierefreiheit auf die Prüfschritte des BIK BITV-Tests, entwickelt auf Grundlage der EN 301 549 in Abstimmung mit Selbsthilfeverbänden und Fachleuten.

Die Grenze dieser Werkzeuge sollten Sie kennen, bevor Sie einem grünen Balken vertrauen. Das W3C formuliert sie klar: „Tools cannot check all accessibility aspects automatically. Human judgement is required.“ Prüfwerkzeuge „can not determine accessibility, they can only assist in doing so.“

Automatische Tests finden fehlende Alt-Attribute, zu schwache Kontraste und fehlerhaftes Markup. Sie beurteilen nicht, ob ein Alternativtext sinnvoll ist, ob die Tabulator-Reihenfolge der Leselogik folgt oder ob ein Fehlertext weiterhilft. Diese drei Handgriffe ersetzen kein Audit, decken aber die meisten groben Fehler auf:

Tab-Durchlauf über die gesamte Seite, ohne Maus.
Browser-Zoom auf 200 % – bricht das Layout, verschwinden Buttons?
Formular absichtlich falsch ausfüllen – wird der Fehler in Textform erklärt?

Weil jedes Theme-Update neue Fehler einbauen kann, gehört die Prüfung in den Regelbetrieb – so wie die Core Web Vitals auch. Dafür gibt es Website-Pflege.

Häufige Fragen

Was sind die WCAG und wer gibt sie heraus? Die Web Content Accessibility Guidelines (WCAG) sind der internationale Standard für barrierefreie Webinhalte, herausgegeben vom World Wide Web Consortium (W3C). WCAG 2.2 wurde laut W3C am 5. Oktober 2023 als W3C Recommendation veröffentlicht; die aktuelle Fassung datiert vom 12. Dezember 2024. Sie ergänzt WCAG 2.1 um neun Erfolgskriterien, ändert aber keines der bestehenden.

Welche Konformitätsstufe brauche ich – A, AA oder AAA? In der Praxis ist Stufe AA der Maßstab. Die Bundesfachstelle Barrierefreiheit schreibt, die für Websites maßgebliche Norm EN 301 549 verweise auf Erfolgskriterien der „Konformitätsstufen A und AA“ der WCAG. Auch der Ausschuss für barrierefreie Informationstechnik nennt „WCAG 2.1 auf Konformitätsstufe AA als Mindestanforderungen“. AAA ist laut W3C nicht für alle Inhalte vollständig erreichbar.

Welcher Kontrast ist für Text vorgeschrieben? Erfolgskriterium 1.4.3 (Stufe AA) verlangt für Text ein Kontrastverhältnis von mindestens 4,5:1, für große Schrift mindestens 3:1. Große Schrift ist laut W3C mindestens 18 Punkt oder 14 Punkt fett (etwa 24 px bzw. 18,5 px). Für Bedienelemente und grafische Objekte fordert Kriterium 1.4.11 (Stufe AA) mindestens 3:1. Logos und rein dekorativer Text sind ausgenommen.

Reicht ein Overlay-Widget für Schriftgröße und Kontrast? Nein. Der Ausschuss für barrierefreie Informationstechnik hält in seiner Einschätzung vom 12. März 2025 fest: „Ein nicht barrierefreier Webauftritt wird durch den Einsatz eines Overlay-Tools nicht zwingend barrierefrei gemäß den gesetzlichen Anforderungen.“ Menschen mit Beeinträchtigungen haben Einstellungen zu Schriftgröße und Kontrast „in der Regel im Betriebssystem ihres Geräts oder in dem von ihnen genutzten Browser vorgenommen“.

Muss eine Seite genau eine H1 haben? Die WCAG schreiben keine bestimmte Anzahl an H1-Überschriften vor. Erfolgskriterium 1.3.1 (Stufe A) verlangt, dass Struktur und Beziehungen programmatisch bestimmbar sind, Kriterium 2.4.6 (Stufe AA) aussagekräftige Überschriften und Beschriftungen. Eine H1 pro Seite ist die etablierte Praxis, weil sie das Thema eindeutig benennt – die eigentliche Anforderung ist eine logische, lückenlose Überschriftenhierarchie.

Mit welchen Werkzeugen kann ich meine Website prüfen? Verbreitet sind WAVE von WebAIM, axe von Deque und die Accessibility-Prüfungen in Google Lighthouse, die laut Chrome-Dokumentation auf axe-core basieren. Für den deutschen Raum verweist die Bundesfachstelle Barrierefreiheit auf die Prüfschritte des BIK BITV-Tests. Wichtig ist die Grenze: „Tools cannot check all accessibility aspects automatically. Human judgement is required“, schreibt das W3C.

Fazit

Barrierefreiheit ist keine Zusatzschicht, die man am Ende aufträgt – sie ist eine Reihe handwerklicher Entscheidungen: ausreichender Kontrast, relative Schriftgrößen, ein sichtbarer Fokus, echte Labels, saubere Überschriften. Fast alles davon verbessert die Seite auch für alle anderen: Die gleichen Maßnahmen, die einen Screenreader glücklich machen, senken die Abbruchquote im Formular – nachzulesen in der Conversion-Optimierung. Was sonst noch dafür sorgt, dass ein Formular leer bleibt, steht im Beitrag Warum bringt meine Website keine Anfragen?.

Der ehrlichste Rat lautet deshalb: Nicht nachrüsten, sondern beim nächsten Umbau mitdenken. Ein Website-Relaunch mit Barrierefreiheit im Konzept kostet einen Bruchteil dessen, was das Flicken einer gewachsenen Struktur verschlingt. Wie ein solcher Umbau ohne Rankingverlust abläuft, steht im Beitrag Website-Relaunch ohne Rankingverlust.

nova.02:media ist eine inhabergeführte Agentur aus Strausberg, seit 2002 am Markt, über 1.600 umgesetzte Projekte, deutschlandweit remote. Inhaber ist Marek Stein. Als Kleinunternehmer nach § 19 UStG weisen wir keine Umsatzsteuer aus; die Angaben unter Preise sind Endpreise, Website-Pakete starten bei 999 € einmalig. Im kostenlosen Erstgespräch gehen wir Ihre wichtigsten Seiten gemeinsam durch. Passende Leistungen: Webdesign und Beratung. Schriftlich erreichen Sie uns über das Kontaktformular.

Quellen: WCAG 2.2 (W3C) und W3C WAI zu Prüfwerkzeugen; Gemeinsame Einschätzung der Überwachungsstellen zu Overlay-Tools; DBSV-Stellungnahme zu Accessibility Overlays; FAQ der Bundesfachstelle Barrierefreiheit.