WCAG 2.2.2 Pausieren, beenden, ausblenden

Das Erfolgskriterium 2.2.2 sorgt dafür, dass bewegte und sich selbst aktualisierende Inhalte Menschen nicht daran hindern, den Rest der Seite zu nutzen. Bewegung lenkt vom Lesen ab, was für Menschen mit Aufmerksamkeitsstörungen oder kognitiven Beeinträchtigungen schwierig ist, und bewegter Text ist für Menschen mit Sehbehinderung oder Leseschwierigkeiten schwer zu lesen. Es gehört zur Konformitätsstufe A und ist Teil von EN 301 549 (Abschnitt 9.2.2.2). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Bewegte, blinkende oder scrollende Informationen, die (1) automatisch starten, (2) länger als fünf Sekunden dauern und (3) parallel zu anderen Inhalten angezeigt werden, brauchen einen Mechanismus, um sie zu pausieren, zu beenden oder auszublenden — es sei denn, die Bewegung ist für die Aktivität wesentlich.

Sich automatisch aktualisierende Informationen, die (1) automatisch starten und (2) parallel zu anderen Inhalten angezeigt werden, brauchen einen Mechanismus, um sie zu pausieren, zu beenden oder auszublenden oder um die Häufigkeit der Aktualisierung zu steuern — es sei denn, die Aktualisierung ist wesentlich.

Hinweise aus den WCAG:

• Blitzen regelt gesondert das Kriterium 2.3.1;
• eine Ladeanimation kann als wesentlich gelten, wenn in dieser Phase niemand interagieren kann und das Ausblenden des Fortschritts die Seite defekt wirken lassen könnte;
• weil bewegte Inhalte die ganze Seite stören können, müssen alle Inhalte dieses Kriterium erfüllen (Nicht-Beeinträchtigung).

Typische Fehler in Onlineshops

• ein Hero-Slider oder Produktkarussell, das endlos rotiert und keinen Pause-Button hat;
• eine scrollende Hinweisleiste („Kostenloser Versand ab 50 € · Neue Kollektion …“);
• ein Hintergrundvideo im Header, das ohne Steuerelement in Schleife läuft;
• ein Pop-up „12 Personen sehen sich das gerade an“ oder „Anna aus Berlin hat gerade gekauft …“, das sich ständig aktualisiert;
• veraltete <marquee>- oder <blink>-Elemente in alten Produktbeschreibungen oder Bannern.

So prüfen Sie es

Automatisch: Unser Checker markiert <marquee>- und <blink>-Elemente (siehe Regelbibliothek). Karussells, Videos, CSS- und JavaScript-Animationen lassen sich nicht zuverlässig erkennen, deshalb erfordert der Großteil dieses Kriteriums eine manuelle Prüfung.

Manuell: Laden Sie jede wichtige Seite und warten Sie mindestens fünf Sekunden, ohne etwas zu berühren. Notieren Sie alles, was sich von selbst bewegt, scrollt, blinkt oder aktualisiert. Suchen Sie für jedes davon ein Steuerelement zum Pausieren, Beenden oder Ausblenden, prüfen Sie, ob es sichtbar ist und per Tastatur funktioniert, und ob der Inhalt danach angehalten bleibt.

So beheben Sie es

• Ergänzen Sie Karussells und Hintergrundvideos um einen sichtbaren, per Tastatur bedienbaren Pause/Play-Button; Pausieren nur bei Hover oder Fokus reicht nicht für alle.
• Noch besser: Verzichten Sie auf automatisches Rotieren und lassen Sie Kunden selbst zwischen den Slides wechseln.
• Berücksichtigen Sie prefers-reduced-motion, um nicht wesentliche Animationen für Nutzer zu stoppen, die weniger Bewegung wünschen.
• Entfernen Sie <marquee> und <blink> und ersetzen Sie scrollende Ticker durch statischen Text.
• Lassen Sie Nutzer Live-Benachrichtigungen mit „Social Proof“ schließen oder abschalten.

Verwandte Kriterien

• 2.3.1 Grenzwert von dreimaligem Blitzen oder weniger — blitzende Inhalte und Anfälle.
• 2.2.1 Zeiteinteilung anpassbar — Zeitlimits müssen anpassbar sein.
• 2.1.1 Tastatur — das Pause-Steuerelement muss per Tastatur funktionieren.

Häufige Fragen

Verstößt ein automatisch rotierendes Karussell gegen WCAG 2.2.2?

Nur wenn es automatisch startet, sich neben anderen Inhalten länger als fünf Sekunden bewegt und keine Möglichkeit bietet, es zu pausieren, zu beenden oder auszublenden. Ein sichtbarer Pause-Button, der per Tastatur funktioniert, löst das Problem.

Was ist die Fünf-Sekunden-Regel in WCAG 2.2.2?

Bewegte, blinkende oder scrollende Inhalte, die automatisch starten und höchstens fünf Sekunden dauern, brauchen kein Pause-Steuerelement. Alles, was länger dauert und parallel zu anderen Inhalten angezeigt wird, schon.

Gilt 2.2.2 für Hintergrundvideos und animierte GIFs?

Ja, wenn sie sich neben anderen Inhalten automatisch länger als fünf Sekunden bewegen. Blitzen, das Anfälle auslösen kann, regelt ein eigenes Kriterium, 2.3.1.