2.2.2 Pausieren, beenden, ausblenden

Was bedeutet das?

Startet etwas von selbst, bewegt sich länger als fünf Sekunden und steht neben anderen Inhalten, brauchen Besucher eine Möglichkeit, es anzuhalten oder auszublenden. Das betrifft Bildkarussells, Lauftexte, Hintergrundvideos und animierte Werbeflächen.

Inhalte, die sich automatisch aktualisieren, etwa ein Nachrichtenticker oder Live-Kurse, müssen sich pausieren, ausblenden oder in der Häufigkeit einstellen lassen. Eine Ausnahme gilt nur, wenn die Bewegung wesentlich ist, etwa bei einer Ladeanzeige.

Wem hilft das?

• Menschen mit Aufmerksamkeitsstörungen, die sich durch Bewegung schlecht konzentrieren können
• Menschen, die langsam lesen und bei wechselnden Folien den Text nicht fertig lesen
• Screenreader-Nutzer, deren Vorlesefluss durch Aktualisierungen gestört wird
• Menschen mit Sehschwäche, die Bildschirmlupen nutzen

Typische Fehler

• Ein Startseiten-Karussell wechselt automatisch und hat keinen Pause-Knopf
• Ein Hintergrundvideo läuft endlos ohne Möglichkeit zum Anhalten
• Ein Lauftext mit Angeboten scrollt dauerhaft durch
• Der Pause-Knopf existiert, ist aber nicht per Tastatur erreichbar

So prüfen wir das

• axe-core Automatisch: axe-core findet typische Verstöße. Ein Verstoß wird als „nicht erfüllt“ vorausgefüllt.
• Belege Belege: Unser Scanner sammelt Material, zum Beispiel Screenshots, Listen und Messungen.

Prüffrage: Bewegte, blinkende oder sich aktualisierende Inhalte (Karussells, Ticker, Animationen) lassen sich pausieren oder stoppen.

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

<video src="hero.mp4" autoplay loop muted></video>

<video id="hero" src="hero.mp4" autoplay loop muted
       playsinline></video>
<button type="button" aria-pressed="false" id="pause">
  Video anhalten
</button>

Ein sichtbarer, per Tastatur bedienbarer Knopf hält das Video an; per Skript wird damit video.pause() aufgerufen.

Praxistipps

• Starten Sie Animationen gar nicht erst, wenn die Systemeinstellung prefers-reduced-motion gesetzt ist.
• Halten Sie Karussells an, sobald die Maus darüber steht oder ein Element darin den Fokus hat.

Ratgeber und Muster dazu

• KarussellPause-Button, Vor/Zurück, Folienansage, kein Zwangs-Autoplay.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 2.2.2 Pause, Stop, Hide