WCAG 2.1 AA: Checkliste für Marketingteams

WCAG 2.1 AA ist die Stufe der Web Content Accessibility Guidelines, an der sich digitale Barrierefreiheit in Europa in der Praxis misst. Sie beschreibt in prüfbaren Kriterien, was eine Website leisten muss, damit Menschen mit Seh-, Hör-, motorischen oder kognitiven Einschränkungen sie nutzen können: genug Kontrast, Bedienung per Tastatur, verständliche Formulare, Inhalte, die ein Screenreader vorlesen kann. In diesem Artikel lesen Sie, was AA konkret verlangt, wer in Ihrem Marketingteam welches Kriterium verantwortet, was WCAG 2.2 ergänzt und wie Sie mit Werkzeugen und von Hand testen.

Was ist WCAG 2.1 AA?

WCAG 2.1 wurde am 5. Juni 2018 als W3C-Empfehlung veröffentlicht und ordnet Barrierefreiheit in 13 Richtlinien unter vier Prinzipien: Inhalte müssen wahrnehmbar, bedienbar, verständlich und robust sein. Zu jeder Richtlinie gibt es prüfbare Erfolgskriterien auf drei Stufen. Stufe A ist das Minimum, AAA die strengste Stufe, die selten für eine ganze Website erreichbar ist. Für Stufe AA muss eine Seite alle Kriterien der Stufen A und AA erfüllen, in WCAG 2.1 sind das 50.

AA ist auch die Stufe, die rechtlich zählt. Die europäische Norm EN 301 549 übernimmt WCAG 2.1 AA für Webinhalte, und die deutsche Verordnung zum Barrierefreiheitsstärkungsgesetz verlangt, dass Websites wahrnehmbar, bedienbar, verständlich und robust gestaltet sind. Wer davon betroffen ist, lesen Sie in unserem Beitrag zum Barrierefreiheitsstärkungsgesetz.

WCAG 2.1 oder 2.2: Welche Version sollten Sie erfüllen?

WCAG 2.2 ist die aktuelle Version. Sie fügt neun Erfolgskriterien hinzu und streicht das veraltete Kriterium 4.1.1 (Syntaxanalyse). Laut W3C erfüllen Inhalte, die WCAG 2.2 entsprechen, auch WCAG 2.1 und 2.0. Für Marketingseiten sind vor allem diese Neuerungen relevant:

Mindestgröße von Klickzielen: Schaltflächen und Links müssen groß genug oder ausreichend voneinander entfernt sein.
Fokus nicht verdeckt: Ein fixierter Header oder ein Cookie-Banner darf das Element mit Tastaturfokus nicht vollständig verdecken.
Einfachere Anmeldung: Keine Rätsel oder Gedächtnisaufgaben als einzige Möglichkeit, sich anzumelden.

Die praktische Empfehlung: Der rechtliche Maßstab ist WCAG 2.1 AA, gebaut wird am besten nach 2.2 AA. So sind Sie für beide Versionen abgedeckt.

Wer im Marketingteam verantwortet welches Kriterium?

Barrierefreiheit scheitert oft daran, dass alle die Entwicklung für zuständig halten. Tatsächlich entstehen viele Fehler beim Veröffentlichen. Diese Tabelle ordnet die WCAG-2.1-AA-Kriterien, die auf Marketingseiten am häufigsten verletzt werden, der Rolle zu, die sie verhindern kann.

Kriterium (WCAG 2.1)	Was es verlangt	Verantwortlich
1.1.1 Nicht-Text-Inhalt (A)	Textalternative für jedes inhaltliche Bild, jede Grafik und jede Icon-Schaltfläche	Redaktion
1.2.2 Untertitel (A)	Untertitel für Videos mit Sprache	Redaktion, Video
1.3.1 Info und Beziehungen (A)	Überschriften, Listen und Tabellen als echte HTML-Struktur	Entwicklung, Redaktion
1.3.5 Zweck der Eingabe bestimmen (AA)	Felder wie Name und E-Mail technisch erkennbar, damit Browser sie ausfüllen können	Entwicklung
1.4.3 Kontrast (Minimum) (AA)	Mindestens 4,5:1 für Text, 3:1 für großen Text	Design, Marke
1.4.4 Textgröße ändern (AA)	Text bis 200 % vergrößerbar ohne Verlust von Inhalten	Design, Entwicklung
1.4.10 Umbruch (AA)	Nutzbar bei 320 CSS-Pixeln Breite ohne horizontales Scrollen	Design, Entwicklung
1.4.11 Nicht-Text-Kontrast (AA)	Mindestens 3:1 für Schaltflächen, Eingabefelder und Grafiken	Design
2.1.1 Tastatur (A)	Alle Funktionen per Tastatur bedienbar	Entwicklung
2.4.4 Linkzweck (A)	Linktext, der sagt, wohin der Link führt	Redaktion
2.4.7 Fokus sichtbar (AA)	Sichtbarer Tastaturfokus	Design, Entwicklung
3.3.1 und 3.3.2 Fehler und Beschriftungen (A)	Klare Beschriftungen, Hinweise und Fehlermeldungen in Formularen	Marketing, Entwicklung
4.1.2 Name, Rolle, Wert (A)	Schaltflächen, Menüs und Slider, die ein Screenreader korrekt benennt	Entwicklung

Die Kriterientexte finden Sie in der WCAG-2.1-Spezifikation. Geben Sie jeder Rolle ihre eigenen Regeln im Veröffentlichungsprozess, dann muss niemand die ganze Norm auswendig kennen.

Die Checkliste nach Themen

Gehen Sie diese Punkte pro Vorlage durch, beginnend mit Startseite, Leistungs- oder Produktseite, Kontaktseite und Blogartikel.

Farbe und Kontrast

Normaler Text erreicht mindestens 4,5:1 zum Hintergrund, großer Text mindestens 3:1.
Farbe ist nie das einzige Mittel, um Information zu vermitteln (eine Fehlermeldung nicht nur rot, sondern auch mit Text).
Schaltflächen, Links und Felder sind auch im Fokus- und Hover-Zustand gut erkennbar.

Text und Struktur

Überschriften folgen einer logischen Hierarchie (eine H1, darunter H2 und H3) ohne übersprungene Ebenen.
Links haben einen beschreibenden Text statt eines losen “mehr erfahren”.
Text bleibt bei 200 % Zoom lesbar, ohne dass Inhalte verschwinden oder sich überlagern.

Bilder und Medien

Inhaltliche Bilder haben einen sinnvollen Alternativtext, dekorative Bilder ein leeres alt-Attribut.
Videos mit Sprache haben Untertitel.

Tastatur und Fokus

Alles, was mit der Maus funktioniert, funktioniert auch mit Tab, Enter und Pfeiltasten.
Die Fokusreihenfolge ist logisch, der Fokus immer sichtbar, und es gibt keine Tastaturfalle.

Formulare

Jedes Feld hat eine sichtbare, verknüpfte Beschriftung, nicht nur einen Platzhalter.
Fehlermeldungen sagen, was schiefging und wie man es behebt.

Gerade die Formularpunkte wirken direkt auf Ihre Anfragen. Ein Formular, das für Screenreader unklar ist, verwirrt meist auch eilige Besucher. Mehr dazu lesen Sie in unserem Beitrag zu conversionorientiertem Webdesign.

So testen Sie: Werkzeuge und Handarbeit

Beginnen Sie mit einem automatischen Test, denn er findet in Minuten einen großen Teil der technischen Fehler. Verbreitete kostenlose Browser-Erweiterungen sind axe DevTools und WAVE, dazu kommt Lighthouse in Chrome. Ohne Installation liefert unser Test zur Barrierefreiheit Ihrer Website einen ersten Überblick über automatisch erkennbare WCAG-Fehler auf Startseite, Produktseite und Formular.

Was Werkzeuge gut finden: fehlende Alternativtexte, zu geringen Kontrast, fehlende Formularbeschriftungen, falsche Überschriftenstruktur, fehlende Sprachangabe. Was sie nicht beurteilen können: ob ein Alternativtext inhaltlich passt, ob die Fokusreihenfolge logisch ist, ob eine Fehlermeldung verständlich ist. Drei Handtests schließen diese Lücke:

Tastaturtest. Legen Sie die Maus weg und gehen Sie einen wichtigen Pfad, etwa von der Startseite bis zum abgeschickten Kontaktformular, nur mit Tab, Umschalt+Tab und Enter.
Screenreader-Test. Lassen Sie eine Seite mit VoiceOver (Mac) oder dem kostenlosen NVDA (Windows) vorlesen. Klingen Links und Schaltflächen auch ohne Kontext sinnvoll?
Zoom- und Mobiltest. Zoomen Sie auf 200 % und prüfen Sie die Seite auf einem schmalen Bildschirm.

Für ein belastbares Prüfergebnis, etwa als Grundlage einer Barrierefreiheitserklärung, ziehen Sie eine spezialisierte Prüfung hinzu.

Warum das für B2B-Marketing zählt

Barrierefreiheit ist aus zwei Gründen relevant: Sie verbessert die Conversion, und sie wird zunehmend vorausgesetzt. Was eine Website barrierefrei macht, macht sie für alle angenehmer: lesbare Texte, klare Schaltflächen, logische Navigation und Formulare, die beim ersten Versuch funktionieren. Darauf achten wir, wenn wir eine Website erstellen lassen begleiten: auf eine Website, die Besucher in Anfragen verwandelt. Eine gute User Experience und Barrierefreiheit verfolgen dasselbe Ziel.

Häufige Fragen

Was ist der Unterschied zwischen WCAG 2.1 AA und WCAG 2.2 AA?

WCAG 2.2 ergänzt neun Kriterien, unter anderem zur Mindestgröße von Klickzielen, zu nicht verdecktem Fokus und zu einfacherer Anmeldung, und streicht das Kriterium 4.1.1. Alles, was WCAG 2.2 erfüllt, erfüllt auch WCAG 2.1.

Muss meine Website WCAG 2.1 AA erfüllen?

Fällt Ihre Website unter das Barrierefreiheitsstärkungsgesetz, etwa weil Verbraucher online kaufen oder buchen, ist WCAG 2.1 AA in der Praxis der Maßstab. Eine rein informative B2B-Website fällt meist nicht darunter, wird durch dieselben Kriterien aber besser nutzbar.

Wie viele Fehler findet ein automatischer Test?

Einen Teil. Fehlende Beschriftungen, alt-Attribute und zu geringen Kontrast erkennt ein Werkzeug zuverlässig. Ob ein Alternativtext stimmt, ob die Fokusreihenfolge logisch ist und ob eine Fehlermeldung verständlich ist, beurteilt nur ein Mensch.

Muss ich den Stand der Barrierefreiheit veröffentlichen?

Unternehmen, die unter das BFSG fallen, müssen beschreiben, wie ihre Dienstleistung die Anforderungen erfüllt. Viele tun das auf einer eigenen Seite. Wie diese aussieht, lesen Sie im Beitrag zur Barrierefreiheitserklärung.

Kurz zusammengefasst

WCAG 2.1 AA ist der rechtliche Maßstab, WCAG 2.2 AA die Version, nach der Sie am besten bauen. Verteilen Sie die Kriterien auf Redaktion, Design und Entwicklung, lassen Sie ein Werkzeug die technischen Fehler finden und prüfen Sie Tastatur, Screenreader und Zoom von Hand. Beginnen Sie bei den Seiten, auf denen Anfragen und Käufe entstehen. Einen Überblick über den gesamten Weg bietet unser Beitrag Barrierefreiheit Website, und zum Begriff selbst unser Wiki-Eintrag zu WCAG.

Möchten Sie Ihre Website auf Barrierefreiheit und Conversion zugleich prüfen lassen? Sehen Sie sich an, wie wir Ihre Website barrierefrei machen, oder nehmen Sie Kontakt auf.