WCAG 2.2: Ein neuer Maßstab für digitale Barrierefreiheit – Was Sie jetzt wissen müssen
Veröffentlicht am: 12. Juni 2025
Die digitale Welt entwickelt sich rasant weiter und mit ihr die Anforderungen an eine inklusive und für alle zugängliche Gestaltung von Webinhalten. Ein zentraler Meilenstein dieser Entwicklung ist die Veröffentlichung der neuen Web Content Accessibility Guidelines (WCAG) 2.2. Diese Aktualisierung der international anerkannten Richtlinien des World Wide Web Consortiums (W3C) setzt neue Standards für die Barrierefreiheit und hat weitreichende Konsequenzen für Unternehmen, Webdesigner und Entwickler.
Dieser Artikel beleuchtet die WCAG 2.2 im Detail. Wir erklären die wichtigsten Neuerungen, zeigen anhand konkreter Beispiele, wie sie die Nutzererfahrung verbessern und erläutern, was die neuen Richtlinien für Ihre tägliche Arbeit bedeuten.
Warum WCAG 2.2 jetzt relevanter ist als je zuvor
Barrierefreiheit im Web ist längst keine Nische mehr, sondern eine rechtliche und unternehmerische Notwendigkeit. Spätestens mit dem Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BFSG) am 28. Juni 2025 sind viele Unternehmen in Deutschland und der EU gesetzlich verpflichtet, ihre digitalen Angebote barrierefrei zu gestalten. Die WCAG 2.2, insbesondere die Konformitätsstufen A und AA, dienen hierbei als maßgeblicher internationaler Standard.
Die Einhaltung der WCAG-Richtlinien verbessert nicht nur die Zugänglichkeit für Menschen mit Behinderungen, sondern steigert auch die allgemeine Benutzerfreundlichkeit (Usability), die mobile Nutzbarkeit und kann sich positiv auf das Suchmaschinenranking (SEO) auswirken.
Die Evolution der Web-Barrierefreiheit
Die WCAG haben sich seit ihrer ersten Version stetig weiterentwickelt, um technologischen Veränderungen und neuen Erkenntnissen über die Bedürfnisse von Nutzern gerecht zu werden.
Die Evolution der WCAG
- Fokus auf grundlegende HTML-Barrierefreiheit.
- Einführung der 4 Prinzipien (POUR: Perceivable, Operable, Understandable, Robust).
- Technik-unabhängig für breitere Anwendbarkeit.
- Fokus auf mobile Endgeräte und Touch-Interaktionen.
- Berücksichtigung von kognitiven und sehbehinderten Nutzern.
- Weitere Verbesserung für kognitive, seh- und motorisch eingeschränkte Nutzer.
- Einführung von 9 neuen Erfolgskriterien.
Die Grundpfeiler der Barrierefreiheit: Die vier Prinzipien
Die WCAG 2.2 bauen, wie ihre Vorgänger, auf vier fundamentalen Prinzipien auf, die unter dem Akronym POUR bekannt sind:
- Wahrnehmbar (Perceivable): Informationen und Bestandteile der Benutzeroberfläche müssen so dargestellt werden, dass sie von allen Nutzern wahrgenommen werden können. Dies betrifft z.B. Alternativtexte für Bilder oder Untertitel für Videos.
- Bedienbar (Operable): Alle interaktiven Elemente und die Navigation müssen für jeden bedienbar sein. Das schließt die vollständige Steuerung per Tastatur ein.
- Verständlich (Understandable): Die Informationen und die Bedienung der Benutzeroberfläche müssen klar und verständlich sein. Eine konsistente Navigation und einfache Sprache sind hier entscheidend.
- Robust (Robust): Inhalte müssen so robust sein, dass sie von einer Vielzahl von Benutzeragenten, einschließlich assistiver Technologien (z.B. Screenreader), zuverlässig interpretiert werden können.
Die wichtigsten Neuerungen in WCAG 2.2: Ein detaillierter Blick
Die WCAG 2.2 führen neun neue Erfolgskriterien ein, die darauf abzielen, Hürden für Nutzer mit kognitiven Einschränkungen, Lernschwierigkeiten, Sehbehinderungen und motorischen Einschränkungen weiter abzubauen. Ein Kriterium (4.1.1 Parsing) wurde als veraltet entfernt.
Hier sind die neuen Anforderungen im Überblick,
inklusive konkreter Beispiele:
2.4.11 Fokus nicht verdeckt (Minimum) (Stufe AA)
- Was es bedeutet: Wenn ein Element den Tastaturfokus erhält, darf es nicht von anderen Inhalten, wie z.B. einem „Sticky Header“ oder einem Cookie-Banner, verdeckt werden.
- Beispiel:
- Vorher: Ein Nutzer navigiert mit der Tab-Taste durch eine Seite. Der Link, der gerade aktiv ist, befindet sich oben auf der Seite und wird vom fixierten Hauptmenü verdeckt. Der Nutzer sieht nicht, wo er sich befindet.
- Nachher: Die Webseite nutzt scroll-padding, um sicherzustellen, dass beim Ansteuern eines Links oder Buttons dieser immer unterhalb des fixierten Headers sichtbar bleibt.
2.5.7 Ziehbewegungen (Stufe AA)
- Was es bedeutet: Wenn eine Funktion eine Ziehbewegung (Drag-and-Drop) erfordert, muss eine alternative Bedienmöglichkeit mit einem einzelnen Klick zur Verfügung stehen.
- Beispiel:
- Vorher: In einem Projektmanagement-Tool können Aufgaben nur per Drag-and-Drop zwischen verschiedenen Spalten (z.B. „To-Do“, „In Arbeit“, „Erledigt“) verschoben werden. Ein Nutzer mit einer motorischen Einschränkung, der die Maus nicht präzise halten und ziehen kann, ist von dieser Funktion ausgeschlossen.
- Nachher: Jede Aufgabe hat zusätzlich Steuerelemente (z.B. Pfeil-Buttons oder ein Kontextmenü), mit denen sie per Klick in die nächste oder vorherige Spalte verschoben werden kann.
2.5.8 Zielgröße (Minimum) (Stufe AA)
- Was es bedeutet: Klickbare Elemente müssen eine Mindestgröße von 24×24 CSS-Pixeln haben oder genügend Abstand zu benachbarten Zielen aufweisen. Dies erleichtert die Bedienung auf Touchscreens und für Nutzer mit motorischen Einschränkungen.
- Beispiel:
- Vorher: In einer mobilen Ansicht stehen mehrere kleine Icons (z.B. für „Teilen“, „Liken“, „Speichern“) direkt nebeneinander. Nutzer treffen häufig versehentlich das falsche Icon.
- Nachher: Die Icons haben eine Klickfläche von mindestens 24×24 Pixeln. Alternativ wird der Abstand zwischen den Icons vergrößert, sodass die Klickbereiche sich nicht überlappen.
3.2.6 Konsistente Hilfe (Stufe A)
- Was es bedeutet: Wenn Hilfemechanismen (z.B. ein Kontaktlink, ein Chatbot oder eine FAQ-Sektion) auf mehreren Seiten einer Website vorhanden sind, müssen sie an einer konsistenten Position platziert werden.
- Beispiel:
- Vorher: Auf der Startseite befindet sich der Link zum Hilfe-Center im Header, auf den Produktseiten jedoch im Footer. Nutzer müssen jedes Mal neu suchen.
- Nachher: Der Link zum Hilfe-Center ist auf jeder Seite an der exakt gleichen Stelle im Header platziert, was die Orientierung für alle Nutzer, insbesondere für Menschen mit kognitiven Einschränkungen, erleichtert.
3.3.7 Redundante Eingabe (Stufe A)
- Was es bedeutet: Informationen, die ein Nutzer bereits in einem Prozess eingegeben hat, sollen nicht erneut abgefragt werden müssen. Sie sollten entweder vorab ausgefüllt oder zur Auswahl verfügbar sein.
- Beispiel:
- Vorher: Bei einem mehrstufigen Bestellprozess muss der Nutzer seine Lieferadresse eingeben und im nächsten Schritt für die Rechnungsadresse dieselben Informationen erneut eintippen.
- Nachher: Nach Eingabe der Lieferadresse bietet das Formular eine Checkbox an: „Rechnungsadresse entspricht der Lieferadresse“. Bei Aktivierung werden die Daten automatisch übernommen.
3.3.8 Zugängliche Authentifizierung (Minimum) (Stufe AA)
- Was es bedeutet: Ein Anmeldeprozess darf nicht ausschließlich auf einem kognitiven Funktionstest beruhen (z.B. das Merken eines Passworts oder das Lösen eines Puzzles), ohne eine Alternative oder einen Hilfsmechanismus anzubieten.
- Beispiel:
- Vorher: Eine Webseite verlangt zur Anmeldung die Eingabe eines Benutzernamens und eines komplexen Passworts. Es gibt keine „Passwort vergessen“-Funktion, die einfach zugänglich ist.
- Nachher: Die Webseite ermöglicht die Anmeldung auch über alternative Methoden wie einen „Magic Link“, der per E-Mail gesendet wird, oder unterstützt die Eingabe durch Passwort-Manager. Das Kopieren und Einfügen von Anmeldedaten wird nicht blockiert.
Die neuen WCAG 2.2 Anforderungen auf einen Blick
- Fokus sichtbar halten: Kein Verdecken durch Banner oder Header. (2.4.11)
- Alternative zu Drag-and-Drop: Alle Zieh-Funktionen auch per Klick bedienbar machen. (2.5.7)
- Große Klickflächen: Mindestens 24x24px für einfache Bedienung. (2.5.8)
- Hilfe immer am selben Ort: Konsistente Platzierung von Hilfe-Links. (3.2.6)
- Keine doppelten Eingaben: Bereits eingegebene Daten wiederverwenden. (3.3.7)
- Einfache Anmeldung: Alternativen zu reinen Passwort-Logins anbieten. (3.3.8)
Auswirkungen für Webdesigner und Unternehmen
Die Einführung der WCAG 2.2 erfordert ein Umdenken und eine Anpassung der bisherigen Arbeitsweisen.
Für Webdesigner & Entwickler:
- Fokus auf Interaktionsdesign: Die neuen Kriterien rücken die Gestaltung von Interaktionen in den Vordergrund. Es geht nicht mehr nur um statische Zustände, sondern um den gesamten Nutzungsprozess.
- Mobile First wird zu Inclusive First: Die Anforderungen an Zielgrößen und die Vermeidung von Drag-and-Drop als einziger Option stärken die mobile Nutzbarkeit, müssen aber im Kontext aller Nutzergruppen gedacht werden.
- Engere Zusammenarbeit: Designer, Entwickler und Content-Manager müssen noch enger zusammenarbeiten, um sicherzustellen, dass die Anforderungen durchgängig umgesetzt werden – vom Design-Mockup bis zum finalen Inhalt.
Für Unternehmen:
- Rechtssicherheit schaffen: Die proaktive Umsetzung der WCAG 2.2 ist der sicherste Weg, um die Anforderungen des BFSG zu erfüllen und teure Abmahnungen oder Klagen zu vermeiden.
- Marktpotenziale erschließen: Eine barrierefreie Webseite erreicht einen größeren Kundenkreis. Menschen mit Behinderungen, aber auch ältere Nutzer oder Personen mit temporären Einschränkungen werden nicht ausgeschlossen.
- Markenimage stärken: Ein nachweisliches Engagement für Inklusion und Barrierefreiheit positioniert ein Unternehmen als modern, sozial verantwortlich und kundenorientiert. Dies kann ein entscheidender Wettbewerbsvorteil sein.
Fazit: Barrierefreiheit als Chance begreifen
Die WCAG 2.2 sind mehr als nur ein technisches Update. Sie sind ein weiterer wichtiger Schritt hin zu einem gerechteren und inklusiveren Internet. Die neuen Richtlinien mögen auf den ersten Blick wie eine zusätzliche Hürde erscheinen, doch bei genauerer Betrachtung sind sie eine Chance: eine Chance, bessere, benutzerfreundlichere und letztlich erfolgreichere digitale Produkte zu schaffen.
Beginnen Sie noch heute damit, sich mit den neuen Anforderungen vertraut zu machen. Schulen Sie Ihre Teams, analysieren Sie Ihre bestehenden Angebote und integrieren Sie die Prinzipien der Barrierefreiheit fest in Ihre digitalen Prozesse. Der Aufwand wird sich auszahlen – nicht nur in Form von rechtlicher Konformität, sondern auch durch eine positivere Nutzererfahrung für alle.