Unterschied WCAG 2.1 und WCAG 2.2: Die 9 neuen Kriterien für barrierefreies Webdesign

Erfahre, welche neuen Kriterien WCAG 2.2 bringt und wie sie WCAG 2.1 erweitern.

auf LinkedIn folgen

Inhalt

Zwei Klemmbretter mit der Aufschrift WCAG 2.1 und WCAG 2.2 sind auf einer Waage balanciert, neben denen ein Strichmännchen ein Fragezeichen hält. Im Hintergrund ist eine Weltkarte zu sehen.

Mit den neuen WCAG 2.2 Richtlinien wurden die Standards für digitale Barrierefreiheit erweitert und verbessert.

In unserem Beitrag findest du alle wesentlichen Unterschiede einfach und übersichtlich erklärt.

The most important facts in brief

  • WCAG 2.2 baut auf den Richtlinien von WCAG 2.1 auf und ergänzt diese um 9 neue Erfolgskriterien.

  • Die neuen Vorgaben verbessern vor allem die Nutzung für Menschen mit kognitiven Behinderungen, Sehbehinderungen und mobile User.

  • Abwärtskompatibilität: Wer WCAG 2.2 erfüllt, erfüllt automatisch auch WCAG 2.1 und 2.0.
  • Das Ziel: digitale Barrierefreiheit und bessere Nutzerfreundlichkeit für alle Menschen

Was bedeutet WCAG 2.2?

Die Web Content Accessibility Guidelines (WCAG) sind internationale Richtlinien für digitale Barrierefreiheit.

Sie definieren Standards dafür, wie Websites, Apps und digitale Inhalte barrierefrei gestaltet werden müssen, damit sie von allen Nutzerinnen und Nutzern uneingeschränkt bedient werden können.

Die aktuelle Version WCAG 2.2 baut auf WCAG 2.1 auf und ergänzt diese um neun neue Erfolgskriterien. Diese verbessern die barrierefreie Nutzung von Websites insbesondere für:

  • Menschen mit kognitiven Behinderungen
  • Menschen mit Sehbehinderungen
  • Nutzerinnen und Nutzer von mobilen Geräten (Smartphones, Tablets etc.)

Unterschied WCAG 2.1 und 2.2

WCAG 2.2 baut auf den bestehenden Erfolgskriterien von WCAG 2.1 auf und ist abwärtskompatibel. Das bedeutet, dass eine Konformität mit WCAG 2.2 automatisch auch eine Konformität mit WCAG 2.1 und 2.0 einschliesst. Ein Kriterium aus WCAG 2.1 wurde entfernt.

Die neuen Erfolgskriterien in WCAG 2.2 verbessern vor allem die Benutzerfreundlichkeit und Zugänglichkeit für Nutzer. Sie zielen darauf ab, die Interaktivität und Bedienbarkeit zu erleichtern und schliessen somit Lücken, die in WCAG 2.1 nicht ausreichend berücksichtigt wurden.

  • Neue Erfolgskriterien: Die neun neuen Erfolgskriterien in WCAG 2.2 (vier auf Stufe AA, zwei auf A und drei auf AAA) konzentrieren sich auf die Bedienbarkeit und Verständlichkeit von Websites.
  • Entferntes Kriterium: Das Kriterium 4.1.1 Parsing aus WCAG 2.1 wurde als veraltet eingestuft und entfernt. Es wird angenommen, dass es bei der Verwendung von modernem HTML oder XML immer erfüllt ist. Aus diesem Grund wird es in WCAG 2.2 nicht mehr explizit aufgeführt.
  • Verbesserte Benutzerfreundlichkeit: Die neuen WCAG 2.2-Richtlinien sollen die Interaktion mit Websites erleichtern. Dazu gehören Vorgaben zu klickbaren Elementen, der sichtbaren Fokusmarkierung und der Authentifizierung.

Die 9 neuen Erfolgskriterien in WCAG 2.2

Die meisten der neuen WCAG 2.2-Erfolgskriterien sind auf der Konformitätsstufe AA angesiedelt, der weltweit als Standard für digitale Barrierefreiheit gilt.

Im Folgenden findest du alle neuen WCAG 2.2-Kriterien im Überblick:

  • 2.4.11 Fokus nicht verdeckt (Minimum) (AA): Stellt sicher, dass das fokussierte Element, wenn man zum Beispiel mit der Tastatur navigiert, nicht von anderen Inhalten (z. B. einem Sticky-Header oder einem Cookie-Banner) verdeckt wird. 
  • 2.4.12 Fokus nicht verdeckt (Enhanced) (AAA): Eine strengere Version des vorherigen Kriteriums. Es verlangt, dass der Tastaturfokus vollständig sichtbar sein muss. Das bedeutet, dass kein Teil des fokussierten Elements durch andere Webinhalte verdeckt werden darf.
  • 2.4.13 Fokus-Erscheinung (AAA): Verlangt, dass die visuelle Darstellung des Fokus-Indikators einen ausreichenden Kontrast und eine Mindestgrösse hat, damit er für Nutzer mit Sehschwäche gut erkennbar ist. Der Kontrast muss mindestens 3:1 zum umgebenden Bereich betragen, und der Indikator muss die Fläche eines 2 CSS-Pixel dicken Umrisses abdecken.
  • 2.5.7 Ziehbewegungen (AA): Funktionalitäten, die eine Ziehbewegung (Drag-and-Drop) erfordern, müssen auch mit einer einfachen Zeigerbewegung (z. B. einem Klick) bedienbar sein. Dies ist besonders wichtig für Menschen mit motorischen Behinderungen oder bei der Bedienung auf Touchscreens.
  • 2.5.8 Zielgrösse (Minimum) (AA): Klickbare Elemente wie Links und Buttons müssen eine Mindestgrösse von 24 x 24 CSS-Pixeln haben. Ausnahmen gibt es, wenn der Abstand zwischen den Elementen gross genug ist.
  • 3.2.6 Konsistente Hilfe (A): Wenn auf einer Website Hilfsmechanismen wie Kontaktinformationen, eine Chat-Funktion oder ein FAQ-Link vorhanden sind und auf mehreren Seiten wiederholt werden, müssen sie immer an der gleichen relativen Position platziert sein. Dies hilft Nutzern, sich zu orientieren und leicht auf Unterstützung zuzugreifen.
  • 3.3.7 Redundante Eingabe (A): Verhindert, dass Nutzer dieselben Informationen mehrfach in einem Formular oder während eines Prozesses eingeben müssen, es sei denn, dies ist aus Sicherheitsgründen erforderlich (z. B. bei der Passwortwiederholung).
  • 3.3.8 Zugängliche Authentifizierung (Minimum) (AA): Verhindert kognitive Testanforderungen (wie z. B. sich ein Passwort merken), es sei denn, es gibt einen alternativen Weg, der keine solche Anforderung hat, oder eine Hilfestellung, die für Nutzer mit kognitiven Behinderungen zugänglich ist.
  • 3.3.9 Zugängliche Authentifizierung (Enhanced) (AAA): Dies ist eine erweiterte Anforderung an die Authentifizierung. Es verlangt, dass Authentifizierungsmechanismen überhaupt keine kognitiven Tests erfordern. Die einzige Ausnahme ist, wenn eine Alternative ohne kognitive Tests oder ein unterstützender Mechanismus zur Verfügung steht.

Fazit: WCAG 2.2 als Schlüssel zu barrierefreien Websites

Die neuen WCAG 2.2-Kriterien mögen auf den ersten Blick technisch wirken, doch sie alle haben ein gemeinsames Ziel: Sie verbessern die tägliche Nutzung von Websites für Millionen von Menschen. Die Umsetzung der WCAG 2.2-Vorgaben machen Websites nicht nur barrierefrei, sondern auch insgesamt benutzerfreundlicher. Das Ergebnis ist eine bessere Nutzererfahrung für alle.

Wer eine barrierefreie Website zukunftssicher und inklusiv gestalten möchte, muss die Umsetzung der Web Content Accessibility Guidelines 2.2 sicherstellen.

Wenn du alle Anforderungen im Blick behalten möchtest, hilft dir unsere aktuelle Checkliste für barrierefreie Websites nach WCAG 2.2 mit einer klaren Übersicht über alle Erfolgskriterien.

Kostenlose
SEO & KI-Analyse

Wir analysieren deine Website und zeigen dir, wie sichtbar du bei Google & KI im Vergleich zur Konkurrenz bist.

Two men stand next to each other and point downwards with both hands in front of a white background.
Frau mit braunem Haar, lächelnd, mit gemustertem Kragenhemd, fotografiert vor einem schlichten weißen Hintergrund.

Article from

Ayra von Däniken

Ayra von Däniken ist Web Accessibility Expertin, die ihre Marketingexpertise mit ihrem fundierten Hintergrund in der Heilpädagogik vereint. Mit dieser einzigartigen Perspektive hilft sie Unternehmen dabei, digitale Barrieren abzubauen. Sie berät und schult Teams in der Umsetzung der WCAG-Richtlinien, führt Zugänglichkeits-Audits durch und setzt sich leidenschaftlich für die Entwicklung barrierefreier Websites und digitale Inklusion ein.

This might also interest you

Ein leuchtend gelber Ordner mit einem Pfeil, der auf ein PDF-Symbol zeigt, steht vor einem schwarzen Hintergrund mit gepunkteten Akzenten.
13 min. reading time
Wie gestalte ich barrierefreie PDF Dateien? Mein Praxisguide für dich
Das WordPress-Logo auf der linken Seite und das Wix-Logo auf der rechten Seite, getrennt durch ein "V" in der Mitte, mit einem schwarz-gelben digitalen Themenhintergrund.
19 min. reading time
Wix vs. WordPress – The Big Comparison 2026
Ein Screenshot des WordPress-Dashboards zeigt den Bereich Plugins mit den aktivierbaren Plugins Akismet Anti-Spam und Classic Editor.
17 min. reading time
The 22 Best WordPress Plugins for 2026
Das WordPress-Logo ist teilweise in dunkles, kräuselndes Wasser eingetaucht, das von einem gelb-grünen Licht beleuchtet wird.
8 min. reading time
Warum WordPress? 10 Gründe für eine WordPress-Website 2026
Webflow- und WordPress-Logos nebeneinander mit "Vs" dazwischen, vor einem schwarz-gelben digitalen Hintergrund.
11 min. reading time
Webflow vs WordPress - our website was on both systems
Nahaufnahme eines Computerbildschirms, auf dem die WordPress.com-Website mit dunklem Hintergrund und gelb leuchtenden Highlights angezeigt wird.
16 min. reading time
Which companies is WordPress suitable for?
Ein leuchtend gelber Ordner mit einem Pfeil, der auf ein PDF-Symbol zeigt, steht vor einem schwarzen Hintergrund mit gepunkteten Akzenten.
13 min. reading time
Wie gestalte ich barrierefreie PDF Dateien? Mein Praxisguide für dich
Das WordPress-Logo auf der linken Seite und das Wix-Logo auf der rechten Seite, getrennt durch ein "V" in der Mitte, mit einem schwarz-gelben digitalen Themenhintergrund.
19 min. reading time
Wix vs. WordPress – The Big Comparison 2026
Ein Screenshot des WordPress-Dashboards zeigt den Bereich Plugins mit den aktivierbaren Plugins Akismet Anti-Spam und Classic Editor.
17 min. reading time
The 22 Best WordPress Plugins for 2026
Das WordPress-Logo ist teilweise in dunkles, kräuselndes Wasser eingetaucht, das von einem gelb-grünen Licht beleuchtet wird.
8 min. reading time
Warum WordPress? 10 Gründe für eine WordPress-Website 2026
Webflow- und WordPress-Logos nebeneinander mit "Vs" dazwischen, vor einem schwarz-gelben digitalen Hintergrund.
11 min. reading time
Webflow vs WordPress - our website was on both systems
Nahaufnahme eines Computerbildschirms, auf dem die WordPress.com-Website mit dunklem Hintergrund und gelb leuchtenden Highlights angezeigt wird.
16 min. reading time
Which companies is WordPress suitable for?

Talk to us in person

Just fill out the form – we’ll get back to you with the next steps and an initial estimate of the scope and budget.

SEO-Insights - alle 2 Wochen!

Two men stand on either side of a "Search Experience Journal" banner. Below them, a German text presents a study on the use of artificial intelligence by Generation Z in Switzerland.

✓ Aktuelle KI- & SEO-Trends auf den Punkt
✓ Praxistipps, Studien & Deep Dives
✓ 100% kostenlos & jederzeit kündbar

A juxtaposition of eight professionally dressed people, including men and women, shown from the shoulders up against a light background.

200+ Marketing-Verantwortliche lesen unseren Newsletter! 🎉