WCAG 2.2.2: Pausieren, beenden, ausblenden

Inhalte, die sich bewegen, blinken oder scrollen, automatisch starten, länger als fünf Sekunden laufen und parallel zu anderem Inhalt stehen, brauchen einen Mechanismus zum Pausieren, Beenden oder Ausblenden. Dasselbe gilt für sich automatisch aktualisierende Inhalte (dort reicht alternativ eine Steuerung der Frequenz). (Englisch: Pause, Stop, Hide.)

Was verlangt das Kriterium?

Die üblichen Kandidaten: automatisch rotierende Karussells, News-Ticker, Auto-Play-Videos im Hintergrund, animierte Banner, Live-aktualisierte Listen. Bewegung zieht Aufmerksamkeit zwangsweise – wer daneben einen Text lesen will, verliert. Deshalb: sichtbarer Pause-Knopf, Stopp beim ersten Durchlauf oder gar kein Autoplay. Ausgenommen ist Bewegung, die essenziell ist (Ladeanimation, solange sie den einzigen Inhalt darstellt).

Wen betrifft es besonders?

Menschen mit ADHS und Konzentrations-Einschränkungen (Bewegung reißt den Lesefaden ab), Menschen mit vestibulären Störungen (Bewegung kann Schwindel und Übelkeit auslösen), Screenreader-Nutzer (auto-rotierende Inhalte ändern die Seite unterm Cursor) und langsamere Leser, deren Slide verschwindet, bevor sie ihn fertig haben.

Richtig & falsch im Code

<!-- Richtig: Karussell mit echter Pause-Kontrolle -->
<div class="carousel" role="group" aria-roledescription="Karussell">
  <button type="button" class="carousel-pause" aria-pressed="false">
    Automatischen Wechsel pausieren
  </button>
  <!-- Slides … -->
</div>

/* Ergänzend: Systemeinstellung respektieren */
@media (prefers-reduced-motion: reduce) {
  .carousel { animation: none; }
  .ticker { animation: none; }
}

prefers-reduced-motion ist wertvolle Ergänzung, ersetzt den Pause-Mechanismus aber nicht – das Kriterium verlangt die Kontrolle auf der Seite, unabhängig von Systemeinstellungen. Ehrlichste Lösung in neun von zehn Fällen: kein Autoplay – was auch die Karussell-Diskussion grundsätzlich entschärft.

So testest du es

1. Seite laden und fünf Sekunden nur beobachten: Bewegt, blinkt oder scrollt irgendetwas von selbst weiter?
2. Für jede Bewegung: Gibt es Pause/Stopp/Ausblenden – sichtbar, tastaturbedienbar, als eines der ersten Elemente erreichbar?
3. Auto-Updates (Live-Ticker, Feeds): pausierbar oder in der Frequenz regelbar?
4. Bonus: prefers-reduced-motion im System aktivieren – reagiert die Seite?

Verwandte Themen

• Slider & Karussells – das Umsetzungs-Muster
• 1.4.2 Audio-Steuerelement – das Pendant für Ton
• 2.3.1 Grenzwert von drei Blitzen – wenn Blinken gefährlich wird