2.2.2 Pause, Stop, Hide

WCAG – Definition

Für alle bewegten, blinkenden, scrollenden oder sich automatisch aktualisierenden Inhalte, die länger als 5 Sekunden laufen, muss es eine Möglichkeit geben, diese zu

  • pausieren,

  • stoppen oder

  • auszublenden.

Ausnahme: Die Animation ist wesentlich für die Funktion (z. B. Ladeindikator, Sportticker, Slotmaschine).

Bedeutung

  • Nutzer mit Aufmerksamkeitsstörungen, Sehbehinderungen oder Screenreadern können von automatischen Bewegungen abgelenkt oder überfordert werden.

  • Blinkende Inhalte können sogar epileptische Anfälle auslösen.

  • Wichtig: Menschen sollen selbst bestimmen, ob Inhalte bewegt sind.

Ausreichende Techniken

Automatische Slider/Carousels steuerbar machen

  • Problem: Viele Slider wechseln alle paar Sekunden automatisch.

  • Lösung: Steuerung einbauen: Pause, Play, Vor/Zurück.

Lauftexte (Marquee) stoppen

  • Vermeiden, aber wenn vorhanden: Pause/Stop anbieten.

Automatisch aktualisierte Inhalte steuerbar machen

  • Beispiel: Live-Sportticker oder Börsendaten.

  • Technik: aria-live + „Updates anhalten“.

<div aria-live="polite" id="liveTicker">Spielstand: 0-0</div>
<button onclick="pauseUpdates()">Updates pausieren</button>

CSS-Animationen stoppen

Wenn die Animation nur dekorativ ist, sollte sie sich über CSS/JS ausschalten lassen.

Beratungstechniken

Autoplay von Inhalten vermeiden

  • Keine bewegten Inhalte automatisch starten.

  • Nutzer selbst entscheiden lassen, ob eine Animation oder ein Video startet.

Sehr kurze Bewegungen verwenden

  • Animationen oder Bewegungseffekte, die kürzer als 5 Sekunden sind, benötigen keine Pause/Stop-Steuerung.

  • Beispiel: ein Button, der beim Hovern kurz „wackelt“.

 

Bewegung stark reduzieren

  • Animationen so gestalten, dass sie ruhig und nicht aufdringlich wirken.

  • Keine Endlosschleifen, sondern 1–2 Wiederholungen.

Visuelle Alternativen statt Bewegung

  • Statt blinkender Hinweise → farbliche Hervorhebung oder Rahmen.

  • Beispiel: Neue Nachrichten nicht durch Blinkeffekt, sondern durch ein Badge-Zähler-Icon.

Benutzerpräferenzen respektieren

  • prefers-reduced-motion aus CSS verwenden, um Animationen systemweit zu reduzieren.

  • So wird die Barrierefreiheit auch für Menschen verbessert, die empfindlich auf Bewegung reagieren.

Inhalte progressiv einblenden statt flackern

  • Statt blinken → sanftes Fade-in/Fade-out oder ruhige Übergänge.

Fehler

  • Slider läuft automatisch ohne Pause-Möglichkeit.
  • „Pause“-Button nur per Maus anklickbar (kein Keyboard-Support).
  • Pausenfunktion versteckt oder nicht beschriftet (z. B. nur Icon ohne aria-label).
  • Blinkende Inhalte > 3x pro Sekunde → Risiko für epileptische Anfälle.
  • „Stop“ nur visuell, aber Screenreader hört trotzdem alle Updates (kein aria-live=off).
  • Video autoplay ohne Mute + ohne Stop/Pause.