Neue Anforderungen der WCAG 2.2

Einführung: Was ist neu in WCAG 2.2

Die Mit der WCAG-Version 2.2 wurden insgesamt sechs neue A- und AA-Erfolgskriterien eingeführt und ein Erfolgskriterium gestrichen. So sollen gezielt Lücken in den bisherigen Richtlinien (WCAG 2.1) geschlossen werden. Diese neuen Anforderungen wurden entwickelt, um insbesondere die mobile Nutzung, die Zugänglichkeit für Menschen mit kognitiven Beeinträchtigungen und die allgemeine Benutzerfreundlichkeit weiter zu stärken.

Im Mittelpunkt steht eine konsequente Ausrichtung auf reale Nutzungssituationen: Wie navigieren Menschen mit assistiven Technologien durch ein Formular? Wie erkennbar ist der Tastaturfokus auf einem Smartphone? Und wie nachvollziehbar sind Login-Prozesse für Menschen mit eingeschränktem Kurzzeitgedächtnis?
Die WCAG 2.2 erweitert diese Grundlagen um Anforderungen, die oft in der Praxis gefordert, aber bisher nicht ausdrücklich vorgeschrieben waren. Dazu gehören:

  • Sichtbarkeit des Tastaturfokus (auch auf kleinen Bildschirmen)
  • Konsistente Platzierung von Hilfsangeboten
  • Barrierefreie Authentifizierungsprozesse

Diese Erfolgskriterien unterstützen nicht nur Menschen mit kognitiven Einschränkungen, motorischen Beeinträchtigungen oder Sehbeeinträchtigungen, sondern verbessern die allgemeine Benutzerfreundlichkeit für alle.

Im Folgenden werden die neuen und geänderten Erfolgskriterien der WCAG 2.2 praxisnah erläutert. Die Umsetzungsempfehlungen enthalten konkrete Hinweise für Redaktion, Entwicklung und Gestaltung. Dabei wird jedes Erfolgskriterium zunächst kurz erklärt.

Im Anschluss folgen jeweils Hinweise zur technischen Umsetzung.
Die Erfolgskriterien sind in drei Stufen unterteilt:

  • Stufe A umfasst grundlegende Anforderungen, die nötig sind, damit Webauftritte und Anwendungen überhaupt zugänglich sind.
  • Stufe AA ist der empfohlene Standard für gute digitale Zugänglichkeit
  • Stufe AAA enthält zusätzliche Anforderungen für ein sehr hohes Maß an Barrierefreiheit.

Da öffentliche Stellen gemäß BITV 2.0 und Unternehmen gemäß BFSG zur Umsetzung der Stufen A und AA verpflichtet sind, konzentriert sich dieser Leitfaden ausschließlich auf diese beiden Konformitätsstufen. Die Erfolgskriterien der Stufe AAA können ergänzend berücksichtigt werden, wenn ein besonders hoher Barrierefreiheitsstandard erreicht werden soll.

Die für die digitale Barrierefreiheit in Deutschland maßgebliche Norm EN 301 549 (Version 3.2.1) verweist aktuell auf die Erfolgskriterien der WCAG 2.1 hin. Diese technische Grundlage gilt sowohl für den öffentlichen Sektor als auch, im Rahmen des BFSG, künftig für viele private Anbieter digitaler Produkte und Dienstleistungen.

Die Norm EN 301 549 wird derzeit überarbeitet. Es ist sehr wahrscheinlich, dass mit der nächsten Version die neuen Erfolgskriterien der WCAG 2.2 offiziell aufgenommen werden.

Wer digitale Angebote barrierefrei gestalten möchte, sollte diese Entwicklung bereits jetzt im Blick behalten. Eine zukunftssichere Planung berücksichtigt daher idealerweise schon heute die zusätzlichen Anforderungen der WCAG 2.2, insbesondere bei Neuentwicklungen, Relaunches oder größeren Anpassungen.

So lassen sich spätere Nachbesserungen vermeiden, Kosten einsparen und langfristige Konformität sicherstellen.

In den Bundesländern gelten eigene gesetzliche Bestimmungen. Dieses Dokument zeigt beispielhaft, wie die Erklärung zur Barrierefreiheit richtig und vollständig erstellt werden sollte.

Zur besseren Verständlichkeit findet ihr am Ende dieses Dokuments ein Glossar mit kurzen Erklärungen zentraler Begriffe rund um die folgenden Erklärungen.

Neue Erfolgskriterien der WCAG 2.2

Wahrnehmbar

2.4.11 Fokus nicht verdeckt (Minimum) (Stufe AA):

Der sichtbare Tastaturfokus darf nicht vollständig von anderen Elementen verdeckt sein. Das bedeutet: Wenn Nutzende mit der Tab-Taste durch Inhalte navigieren, muss das jeweils aktive Element immer mindestens teilweise sichtbar bleiben. Dies ist besonders relevant auf kleinen Bildschirmen oder bei feststehenden Layout-Bestandteilen (z. B. Sticky Header, Chatfenster).
Umsetzungsempfehlung: Vermeidet es, dass sich fixierte oder überlagernde Elemente wie Cookie-Banner, Navigationsleisten oder Dialogfenster über fokussierte Inhalte legen. Prüft die Seite mit Tastaturnavigation (Tabulator-Taste) auf verschiedenen Bildschirmgrößen. Nutzt dabei Viewports bis 320 Pixel und stellt sicher, dass alle fokussierten Elemente sichtbar sind.

2.4.13 Fokus sichtbar (Stufe AA)

Der Tastaturfokus muss für Nutzende deutlich erkennbar sein. Dies ist eine zentrale Voraussetzung für die Navigation mit Tastatur oder assistiven Technologien. Besonders auf mobilen Geräten oder bei schlechten Kontrastverhältnissen wird ein unsichtbarer oder kaum sichtbarer Fokus schnell zur Barriere.

Umsetzungsempfehlung: Stellt über CSS sicher, dass fokussierte Elemente deutlich hervorgehoben werden, z. B. durch eine klare Umrandung, Schatten, Farbwechsel oder einen animierten Rahmen. Verwendet dabei ausreichende Kontraste und sorgt dafür, dass der Fokuszustand sich vom regulären Aussehen unterscheidet. Vermeidet es, den Fokusring global zu entfernen (z. B. durch outline: none), ohne eine gleichwertige Alternative zu bieten.

2.5.7 Ziehende Bewegungen (Stufe AA)

Funktionen, die üblicherweise durch Ziehbewegungen (Drag & Drop) bedient werden, müssen auch ohne solche Bewegungen zugänglich sein. Dies betrifft etwa das Verschieben von Elementen in Formularen, Widgets oder Anwendungen.
Umsetzungsempfehlung: Bietet eine Alternative zum Ziehen, etwa durch Schaltflächen wie „nach oben“ oder „nach unten verschieben“ oder Kontextmenüs mit Positionswahl an. In einer Bildergalerie sollte ein Bild nicht nur durch Drag & Drop neu angeordnet werden können, sondern auch per Tastatur durch Auswahl und Positionierung verschoben werden können. Dies ermöglicht die Nutzbarkeit für Menschen mit motorischen Beeinträchtigungen oder bei Touchscreen-Nutzung.

2.5.8 Zielgröße (Mindestmaß) (Stufe AA)

Interaktive Elemente wie Buttons, Links oder Symbole müssen eine Mindestgröße von 24×24 CSS-Pixeln aufweisen, damit sie auch bei ungenauer Bewegung (z. B. mit dem Finger) zuverlässig aktiviert werden können.

Umsetzungsempfehlung: Stellt sicher, dass alle klickbaren Bereiche diese Mindestgröße erreichen, entweder durch großzügige Padding-Werte oder größere aktive Flächen. Achtet darauf, dass auch kleine Icons oder Menüpunkte über ausreichend große Hotspots verfügen. Dies ist besonders für mobile Nutzende sowie für Personen mit motorischen Einschränkungen wichtig. Eine gute Praxis ist es, zusätzliche unsichtbare Bereiche, um kleine Icons herum klickbar zu machen, ohne das visuelle Layout zu verändern.

Verständlichkeit

3.2.6 Konsistente Hilfe (Stufe A)

Wenn eine Hilfe-Funktion angeboten wird, z.B. eine FAQ, ein Live-Chat, ein Support-Link oder ein telefonischer Kontakt, muss diese auf allen Seiten, auf denen sie zur Verfügung steht, an derselben Position erscheinen. Dies erleichtert die Orientierung, insbesondere für Menschen mit kognitiven Einschränkungen, Sehbeeinträchtigungen oder geringer Web-Erfahrung.
Umsetzungsempfehlung: Bindet Hilfsangebote konsequent in die Hauptnavigation, Fußzeile oder eine klar benannte Seitenleiste ein. Platziert z.B. ein Hilfesymbol immer oben rechts im Header oder am unteren Rand der Seite unter „Kontakt und Hilfe“. Wiederholt die Platzierung auf allen relevanten Unterseiten. Achtet darauf, dass sich die Hilfe nicht nur inhaltlich, sondern auch in ihrer visuellen Darstellung nicht verändert. Dies stärkt das Vertrauen und die Wiedererkennbarkeit in die Funktion.

3.3.7 Barrierefreie Authentifizierung (Stufe AA)

Anmelde- oder Verifizierungsprozesse dürfen keine Barrieren für Menschen mit kognitiven oder sensorischen Beeinträchtigungen darstellen. Eine Authentifizierung muss auch dann möglich sein, wenn Nutzende Schwierigkeiten beim Merken, Verstehen oder visuellen Erfassen von Informationen haben.
Umsetzungsempfehlung: Vermeidet Verfahren, die allein auf visuelle Wahrnehmung oder komplizierte Denkvorgänge setzen, Bietet stattdessen barrierefreie Alternativen wie: passwortlose Anmeldung über Einmal-Links per E-Mail oder SMS, nutzbare 2-Faktor-Authentifizierung mit Sprachausgabe oder Tastaturbedienung, Invisible Captcha bei denen im Hintergrund das Nutzerverhalten auf der Website analysiert wird oder Unterstützung von Passwort-Manager-Funktionen durch saubere HTML-Eingabefelder mit autocomplete an.

Geänderte Erfolgskriterien der WCAG 2.2

Bedienbar

2.4.7 Sichtbarer Fokus (Stufe A)

Dieses Erfolgskriterium war bisher Teil der Konformitätsstufe AA und wurde mit WCAG 2.2 auf Stufe A hochgestuft. Das bedeutet: Ein sichtbarer Tastaturfokus ist nun eine absolute Mindestanforderung.

Robust

4.1.1 Parsing (Stufe A)

Das Erfolgskriterium zum Parsing wurde in der WCAG 2.2 entfernt, da moderne Browser diese Aufgabe heute zuverlässig übernehmen. Beim Parsing geht es darum, dass der HTML-Code einer Webseite korrekt aufgebaut ist, damit er von Browsern und assistiven Technologien richtig interpretiert werden kann. Früher war es notwendig, strenge Regeln für den Quellcode einzuhalten, um sicherzustellen, dass Inhalte vollständig und korrekt dargestellt werden. Heute erkennen und korrigieren aktuelle Browser kleinere Fehler automatisch, sodass dieser Standard als eigenständiges Erfolgskriterium nicht mehr erforderlich ist.

Tools zur Prüfung der WCAG-Anforderungen 2.2

WAVE Evaluation Tool: Prüft Fokusanzeige, Semantik und Eingabehilfen. Visualisiert zugängliche Inhalte direkt im Browser. | https://wave.webaim.org/

Hinweis: Die genannten Tools Punkt 1 und 2 aus dem PDF-Dokument sind nicht mehr aktuell. Eine Auswahl möglicher Tools ist verfügbar unter https://bitvtest.de/test-methodik/web/werkzeugliste

Glossar

  • Assistive Technologien: Hilfsmittel wie Screenreader, Braillezeilen oder Sprachausgabe, die Menschen mit Beeinträchtigungen die Nutzung digitaler Inhalte ermöglichen.
  • Autocomplete: Eine Funktion in Formularfeldern, die Eingaben automatisch vervollständigt oder vorschlägt, basierend auf vorherigen Eingaben oder gespeicherten Daten.
  • Authentifizierungsverfahren: Methoden zur Identitätsbestätigung, z. B. Passwort, Fingerabdruck oder Zwei-Faktor-Authentifizierung. Sie müssen auch für Menschen mit Beeinträchtigungen nutzbar sein.
  • BFSG: Barrierefreiheitsstärkungsgesetz.
  • BITV: Barrierefreie-Informationstechnik-Verordnung.
  • Browser: Programme zur Darstellung von Webseiten, z.B. Firefox, Chrome, Safari oder Edge.
  • Captcha: Automatisierte Tests zur Unterscheidung zwischen Menschen und Maschine. Sollten barrierefrei gestaltet oder durch zugängliche Alternativen ersetzt werden.
  • Cookie-Banner: Einblendungen zur Zustimmung von Cookies. Sie müssen per Tastatur bedienbar und für Screenreader zugänglich sein.
  • CSS (Cascading Style Sheets): Sprache zur Gestaltung von HTML-Inhalten, z. B. für Farben, Abstände, Schriftgrößen und Layout.
  • Drag & Drop: Interaktive Bedienmethode durch Ziehen und Ablegen. Muss auch per Tastatur oder alternativen Eingabemethoden zugänglich sein.
  • HTML: Hypertext Markup Language. Strukturierungssprache für Webseiteninhalte.
  • Hotspots: Interaktive Bereiche auf Bildern oder Karten. Müssen programmatisch zugänglich und alternativ beschreibbar sein.
  • Javascript: Skriptsprache zur Umsetzung dynamischer Inhalte und Interaktionen auf Webseiten. Muss barrierefrei integriert und steuerbar sein.
  • Outline: Der Fokusrahmen, der bei Tastaturnavigation sichtbar wird. Er sollte nicht entfernt, sondern gestalterisch angepasst werden.
  • Padding: Innenabstand zwischen Inhalt und Rand eines Elements. Wichtig für die optische Lesbarkeit und Bedienbarkeit.
  • Parsing: Verarbeitung und Interpretation des HTML-Codes durch den Browser. Früher war korrektes Parsing Voraussetzung für Barrierefreiheit. Moderne Browser erkennen kleinere Fehler meist automatisch.
  • Pixel: Maßeinheit für die Bildschirmdarstellung. Barrierefreie Gestaltung sollte flexibel auf verschiedene Pixelgrößen reagieren.
  • Programmatisch: Bezieht sich auf Informationen, die maschinell ausgelesen werden können, z. B. von Screenreadern.
  • Quellcode/Quelltext: Gesamtheit des für eine Anwendung geschriebenen Codes (z. B. HTML, CSS, JavaScript). Grundlage für die technische Barrierefreiheit.
  • Sticky Header: Fixierte Kopfzeile, die beim Scrollen sichtbar bleibt. Muss korrekt mit dem Fokus durch Tab-Taste erreichbar sein.
  • Tab-Taste/Tabulatortaste: Zentrale Taste zur Navigation per Tastatur. Damit werden fokussierbare Elemente der Reihe nach angesteuert.
  • UX-Design (User Experience Design): Gestaltungsansatz, der auf gute Benutzerführung, Verständlichkeit und barrierefreie Bedienbarkeit abzielt.
  • Viewport: Der sichtbare Bereich einer Webseite im Browserfenster. Wichtig für die Darstellung auf verschiedenen Geräten.
  • WCAG (Web Content Accessibility Guidelines): Internationale Richtlinien zur digitalen Barrierefreiheit.