WCAG 2.2 in der EN 301 549: sechs neue Prüfpunkte für deine Website
Die neue EN 301 549 verweist auf WCAG 2.2. Du erfährst, ab wann das zählt, welche sechs Kriterien neu sind und wie du jedes selbst prüfst.

Am 13. Oktober 2026 hat die Bundesfachstelle Barrierefreiheit in ihrem Newsletter auf die neue Fassung der EN 301 549 hingewiesen. Die Bundesfachstelle nennt sie die maßgebliche Norm für die barrierefreie Gestaltung von Informationstechnik. Die Version V4.1.1 trägt das Datum September 2026 und wurde laut Norm am 24. August 2026 angenommen. Für Websites zählt vor allem eine Änderung: Die Norm verweist nicht mehr auf WCAG 2.1, sondern auf WCAG 2.2. Damit kommen sechs Prüfpunkte hinzu, die du bisher nach WCAG 2.1 nicht prüfen musstest.
Was sich ändert und ab wann es zählt
Die Bundesfachstelle schreibt, dass die EN 301 549 V4.1.1 noch nicht im Amtsblatt der EU verkündet wurde und deshalb weder für Behörden noch für Unternehmen schon rechtsgültig ist. Das werde „noch ein paar Monate dauern“. AccessibleEU, das Kompetenzzentrum der EU-Kommission für Barrierefreiheit, bestätigt: Bis dahin bleibt die Fassung V3.2.1 von 2021 die Referenz, und an die Veröffentlichung ist keine neue Frist geknüpft.
Warum das Amtsblatt so wichtig ist, steht in § 4 des Barrierefreiheitsstärkungsgesetzes (BFSG). Produkte und Dienstleistungen, die harmonisierten Normen entsprechen, deren Fundstellen im Amtsblatt der EU veröffentlicht sind, gelten als vermutlich konform mit den Anforderungen des Gesetzes, soweit die Norm diese Anforderungen abdeckt. Sobald die neue Fassung dort steht, ist also WCAG 2.2 der Maßstab, an dem du dich für diese Vermutung orientierst.
Die Bundesfachstelle rät, die Vorgaben der neuen Fassung schon jetzt umzusetzen, weil die Verkündung nur eine Frage der Zeit sei. Das ist auch praktisch sinnvoll: WCAG 2.2 ist seit Oktober 2023 eine Empfehlung des W3C, die Kriterien sind also längst bekannt und gut dokumentiert. Ein Kriterium fällt übrigens weg. Die alte Prüfung auf fehlerfreien HTML-Code (4.1.1 Parsing) gibt es in WCAG 2.2 nicht mehr, die Norm führt die Stelle als „Void“.
Dieser Artikel informiert allgemein und ersetzt keine Rechtsberatung. Wenn du wissen willst, ob und wie das Gesetz für dein Angebot gilt, hilft dir im Einzelfall eine Anwältin oder ein Anwalt. Einen ersten Überblick gibt unsere Seite zur Pflicht zur Barrierefreiheit.
Die sechs neuen Kriterien im Überblick
Die Bundesfachstelle spricht von sechs neuen verbindlichen Erfolgskriterien. Zwei davon haben in WCAG 2.2 die Stufe A, vier die Stufe AA. Für die Stufe AA, auf die sich die Norm bezieht, zählen alle sechs.
| Kriterium | Stufe | Was es verlangt | Typische Stelle |
|---|---|---|---|
| 2.4.11 Fokus nicht verdeckt | AA | Ein Element mit Tastaturfokus darf nicht vollständig von eigenen Inhalten der Seite verdeckt sein. | Fester Header, Cookie-Banner, Chat-Knopf |
| 2.5.7 Ziehbewegungen | AA | Was man ziehen kann, muss auch mit einfachem Tippen oder Klicken gehen. | Preisfilter mit Schieberegler, sortierbare Listen |
| 2.5.8 Mindestgröße für Klickziele | AA | Klickziele sind mindestens 24 mal 24 CSS-Pixel groß oder haben genug Abstand. | Symbol-Schaltflächen, Mengenwähler, Schließen-Kreuze |
| 3.2.6 Hilfe an gleicher Stelle | A | Kontaktwege und Hilfe stehen auf allen Seiten in derselben Reihenfolge. | Telefonnummer, Kontaktlink, Chat, FAQ |
| 3.3.7 Keine doppelten Eingaben | A | Was jemand im selben Ablauf schon eingegeben hat, wird vorausgefüllt oder zur Auswahl angeboten. | Liefer- und Rechnungsadresse im Checkout |
| 3.3.8 Barrierefreie Anmeldung | AA | Die Anmeldung verlangt keinen Gedächtnis- oder Abtipptest ohne Hilfe wie Passwortmanager oder Einfügen. | Login, Einmalcodes, CAPTCHA |
Fokus und Klickflächen selbst prüfen
Fokus nicht verdeckt. Lade deine Startseite, klick einmal in die Adresszeile und drück dann immer wieder die Tabulatortaste. Achte darauf, ob das gerade markierte Element irgendwann ganz hinter dem festen Header, dem Cookie-Banner oder einem Chat-Knopf verschwindet. Teilweise verdeckt reicht für die Stufe AA, ganz verdeckt nicht. Wie du den Fokusrahmen überhaupt sichtbar machst, steht in unserem Artikel über den Fokusrahmen und die eine CSS-Zeile, die ihn löscht.
Das W3C beschreibt für dieses Kriterium eine eigene Technik (C43) mit der CSS-Eigenschaft scroll-padding. Sie sorgt dafür, dass der Browser beim Weiterspringen genug Platz für feste Leisten lässt. Passe die Werte an die Höhe deines Headers und deiner unteren Leiste an:
html {
/* Höhe des festen Headers plus etwas Luft */
scroll-padding-top: 6rem;
/* Höhe von Cookie-Leiste oder Chat-Knopf unten */
scroll-padding-bottom: 5rem;
}Mindestgröße für Klickziele. Öffne die Entwicklertools deines Browsers (Taste F12), wähl das Werkzeug zum Untersuchen von Elementen und fahr über den Warenkorb, die Lupe, die Merkliste und die Plus- und Minus-Knöpfe beim Mengenwähler. Der Browser zeigt dir Breite und Höhe an. Liegt ein Wert unter 24 Pixeln, prüf, ob der Abstand zum Nachbarn groß genug ist. WCAG 2.2 erlaubt kleinere Ziele, wenn ein Kreis mit 24 Pixeln Durchmesser um jedes Ziel kein anderes Ziel berührt. Links mitten im Fließtext sind ausgenommen.
Die einfachste Lösung ist eine Mindestgröße für alle Schaltflächen, die nur aus einem Symbol bestehen:
.icon-button {
min-width: 24px;
min-height: 24px;
/* größere Fläche, ohne das Symbol zu vergrößern */
padding: 8px;
}Wenn du dabei ohnehin an deinen Symbol-Schaltflächen arbeitest, gib ihnen im selben Schritt einen Namen. In unserem Barriere-Report 2026 mit 14.984 geprüften Firmen-Startseiten hatten 2,5 Prozent Symbol-Schaltflächen ohne Namen. Wie das geht, zeigt der Artikel Wenn das Suchfeld keinen Namen hat.
Schieberegler, Hilfe, Checkout und Login
Ziehbewegungen. Ein Preisfilter, den man nur mit gedrückter Maus oder gedrücktem Finger verschieben kann, reicht nicht mehr. Gib daneben zwei Eingabefelder für den Mindest- und Höchstpreis an, oder Knöpfe, mit denen sich der Wert schrittweise ändern lässt. Das Gleiche gilt für Listen, die man per Ziehen sortiert: Ein Knopf „nach oben“ und „nach unten“ löst das Problem.
Hilfe an gleicher Stelle. Steht der Link zum Kontakt auf der Startseite oben rechts und im Shop nur im Footer, erfüllt das dieses Kriterium nicht. Es verlangt nicht, dass es überhaupt Hilfe gibt. Wenn es sie auf mehreren Seiten gibt, muss sie aber im Verhältnis zum übrigen Inhalt in derselben Reihenfolge stehen. Prüf dazu Startseite, Produktseite, Warenkorb und Kontaktformular nacheinander.
Keine doppelten Eingaben. Fragt dein Checkout die Adresse zweimal ab, biete ein Häkchen „Rechnungsadresse wie Lieferadresse“ an oder fülle die Felder vor. Ausnahmen nennt WCAG 2.2 ausdrücklich: wenn die erneute Eingabe wesentlich ist, der Sicherheit dient oder die frühere Angabe nicht mehr gilt. Hilfreich sind außerdem die richtigen autocomplete-Werte, damit der Browser Adressen selbst einsetzen kann:
<label for="plz">Postleitzahl</label>
<input id="plz" name="plz" autocomplete="postal-code">
<label for="pw">Passwort</label>
<input id="pw" type="password" autocomplete="current-password">Barrierefreie Anmeldung. WCAG 2.2 zählt das Merken eines Passworts und das Abtippen von Zeichen zu den Tests, die kognitive Fähigkeiten verlangen. Erlaubt bleiben sie, wenn es Hilfe gibt. Eine Anmerkung zum Kriterium nennt als Beispiele Passwortmanager und Kopieren und Einfügen. Prüf deshalb drei Dinge: Lässt sich ins Passwortfeld etwas einfügen? Bietet dein Passwortmanager an, das Feld auszufüllen? Und ist dein CAPTCHA eines, bei dem man verzerrte Zeichen abtippen muss? Dann brauchst du einen zweiten Weg. Ausgenommen ist ein Test, bei dem man Objekte erkennt.
Erst das Fundament, dann die neuen Kriterien
Die sechs neuen Kriterien kommen zu den bisherigen hinzu, sie ersetzen nichts. Unser Barriere-Report 2026 misst keine WCAG-2.2-Kriterien, er zeigt aber, wo die meisten Seiten schon bei den Grundlagen stehen. Von 14.984 geprüften Firmen-Startseiten hatten nur 111 keinen der geprüften Befunde, im Schnitt fanden wir 2,26 Befunde pro Seite.
- Bei 98 Prozent fehlte ein Sprunglink zum Inhalt. Die Anleitung steht in Der Sprunglink, der auf fast jeder Website fehlt.
- Bei 47,3 Prozent war der Hauptinhalt nicht ausgezeichnet. Mehr dazu in Landmarks machen deine Seite überspringbar.
- Bei 29,4 Prozent fehlte eine Hauptüberschrift.
- Bei 16,6 Prozent war der Zoom auf dem Handy gesperrt.
Sprunglink und verdeckten Fokus kannst du in einem Durchgang angehen. Beim ersten Druck auf die Tabulatortaste siehst du, ob ein Sprunglink erscheint, und bei den nächsten, ob ein fester Header den Fokus verdeckt. Unser kostenloser Schnelltest zeigt dir die Grundlagen-Befunde deiner Startseite in einer Minute.
Dein Plan für diese Woche
- Tabulator-Durchgang auf Startseite, Produktseite und Checkout: Verschwindet der Fokus irgendwo ganz hinter einer festen Leiste? Dann scroll-padding setzen.
- Symbol-Schaltflächen und Mengenwähler in den Entwicklertools messen und auf mindestens 24 mal 24 Pixel bringen.
- Jeden Schieberegler und jede Ziehfunktion um Eingabefelder oder Knöpfe ergänzen.
- Kontaktlink, Telefonnummer und Chat auf allen Seiten in dieselbe Reihenfolge bringen.
- Im Checkout doppelte Adressfelder durch ein Häkchen ersetzen und autocomplete-Werte ergänzen.
- Im Login Einfügen erlauben, Passwortmanager zulassen und für ein Abtipp-CAPTCHA einen zweiten Weg anbieten.
Wenn du mit einer Agentur oder einem Theme-Anbieter arbeitest, frag nach, ob die nächste Version gegen WCAG 2.2 statt 2.1 getestet wird. AccessibleEU empfiehlt Organisationen genau das: Prüfabläufe jetzt auf WCAG 2.2 umstellen, schon vor der Fundstelle im Amtsblatt.
Quellen
- Newsletter 3/2026: Neue EN 301 549 veröffentlicht, Bundesfachstelle Barrierefreiheit, 13.10.2026
- EN 301 549 V4.1.1 (2026-09): Accessibility requirements for ICT products and services, ETSI, CEN, CENELEC, 09.2026
- The European accessibility standard EN 301 549 has been updated, AccessibleEU, Europäische Kommission, 07.09.2026
- § 4 Barrierefreiheitsstärkungsgesetz: Konformitätsvermutung auf der Grundlage harmonisierter Normen, Bundesministerium der Justiz, 15.10.2026
- Web Content Accessibility Guidelines (WCAG) 2.2, W3C, 12.12.2024
- What's New in WCAG 2.2, W3C Web Accessibility Initiative, 15.10.2026
- C43: Using CSS scroll-padding to un-obscure content, W3C Web Accessibility Initiative, 15.10.2026
Kostenloser Schnelltest
Er prüft deine Startseite in unter einer Minute und zeigt dir ohne Anmeldung, wo es hakt.
Weiterlesen

Kontrast reparieren, ohne das Design zu verlieren
Wie ein Kontrastverhältnis entsteht, wo die drei Schwellen liegen und warum oft ein einziger Hex-Schritt reicht, um Text lesbar zu machen.

Wenn alle Links „hier“ heißen
Screenreader können alle Links einer Seite als nackte Liste ausgeben. Steht dort zehn Mal hier, führt diese Liste niemanden mehr irgendwohin.

Einfache Sprache und Leichte Sprache sind nicht dasselbe
Einfache Sprache und Leichte Sprache lösen zwei verschiedene Probleme, und ein Behördensatz in drei Fassungen zeigt, wann du welche brauchst.