WCAG 2.2.2: Pausieren, beenden, ausblenden

WCAG 2.2.2 verlangt einen Mechanismus zum Pausieren, Beenden oder Ausblenden für alle Inhalte, die sich bewegen, blinken oder scrollen, automatisch starten, länger als fünf Sekunden laufen und neben anderem Inhalt stehen. Dasselbe gilt für Inhalte, die sich automatisch aktualisieren – dort genügt alternativ eine Steuerung der Aktualisierungsfrequenz.

(Englisch: Pause, Stop, Hide. Der BIK-BITV-Test nennt den Prüfschritt „Bewegte Inhalte abschaltbar“.)

Das Wichtigste in Kürze

• Vier Bedingungen müssen zusammenkommen: die Bewegung startet automatisch, dauert länger als fünf Sekunden, läuft parallel zu anderem Inhalt und ist Teil der Seite. Fehlt eine, greift das Kriterium nicht.
• Der Schalter muss auffindbar sein. Der Prüfschritt verlangt ihn „deutlich sichtbar am Seitenbeginn oder im direkten Kontext des bewegten Inhalts“.
• Nach dem Anhalten muss alles erreichbar bleiben. Ein pausiertes Karussell, dessen übrige Bilder dann unzugänglich sind, erfüllt das Kriterium nicht.
• Werbung wird wie redaktioneller Inhalt behandelt. Der Prüfschritt stellt das ausdrücklich klar – eingebundene Anzeigen sind keine Ausrede.
• Ausgenommen ist Bewegung, die für den Zweck unverzichtbar ist: die Restzeit einer Sitzung, laufende Auktionsgebote, ein Live-Spielstand.
• prefers-reduced-motion ist eine Ergänzung, kein Ersatz. Das Kriterium verlangt einen Mechanismus auf der Seite selbst, unabhängig von Systemeinstellungen.
• Die Bewegung darf nach dem Anhalten nicht von selbst wieder anlaufen – auch nicht beim nächsten Seitenaufruf innerhalb derselben Sitzung.
• Häufigste Fundstellen: automatisch rotierende Bühnen auf Startseiten, Nachrichten- und Börsenticker, Logo-Laufbänder, Hintergrundvideos und animierte Werbeflächen.

Braucht mein Slider einen Pause-Button?

Ja, sobald er automatisch startet, länger als fünf Sekunden läuft und neben anderem Inhalt steht.

2.2.2 ist eines der ältesten Kriterien – es steht seit WCAG 2.0 von 2008 im Regelwerk und hat seitdem nichts an Aktualität verloren. Bewegung zieht Aufmerksamkeit unwillkürlich auf sich. Das ist kein Charakterfehler, sondern Biologie: Das periphere Sehen reagiert auf Bewegung, bevor bewusstes Denken einsetzt. Wer daneben einen Text lesen will, kämpft gegen das eigene Nervensystem.

Der Normtext knüpft an vier Bedingungen an, die gleichzeitig erfüllt sein müssen:

1. Der Inhalt bewegt sich, blinkt oder scrollt.
2. Er startet automatisch, ohne Zutun des Nutzers.
3. Er läuft länger als fünf Sekunden.
4. Er wird parallel zu anderem Inhalt dargestellt.

Fällt eine Bedingung weg, greift das Kriterium nicht. Eine Einblendanimation von 400 Millisekunden ist zu kurz. Ein Video, das der Nutzer selbst startet, beginnt nicht automatisch. Eine Ladeanimation, die als einziger Inhalt auf dem Schirm steht, hat kein Nebeneinander.

Der Mechanismus kann pausieren, beenden oder ausblenden. Für automatisch aktualisierte Inhalte kommt eine vierte Möglichkeit hinzu: die Frequenz steuerbar machen. In allen Fällen gilt laut Prüfschritt:

• Der Schalter muss deutlich sichtbar sein, und zwar am Seitenanfang oder direkt beim bewegten Inhalt.
• Er muss selbst barrierefrei sein – mit der Tastatur erreichbar, beschriftet, ausreichend groß.
• Nach dem Anhalten müssen alle Inhalte weiter erreichbar bleiben.
• Die Bewegung darf nicht von selbst wieder anlaufen.

Die Ausnahme „unverzichtbar“ ist eng: Die Bewegung muss für die Funktion nötig sein. Ein Countdown bis zum Sitzungsende, ein laufendes Gebot in einer Auktion, ein Live-Spielstand – ohne die Aktualisierung wäre die Information falsch. Ein Karussell zeigt Bilder; die Bewegung ist dort Dekoration, nicht Inhalt.

Der vollständige Wortlaut steht im Understanding-Dokument des W3C zu 2.2.2; das deutsche Prüfvorgehen beschreibt der Prüfschritt 2.2.2 des BIK BITV-Tests.

Wen betrifft es besonders?

Menschen mit Aufmerksamkeitsstörungen und Konzentrationsschwierigkeiten verlieren bei jeder Bewegung im Sichtfeld den Lesefaden. Der Prüfschritt formuliert das nüchtern: Der Benutzer kann sich möglicherweise nicht auf andere Elemente des Angebots konzentrieren. Wer nach jedem Wechsel des Karussells von vorn anfangen muss, liest den Absatz nicht zu Ende.

Menschen mit vestibulären Störungen reagieren auf großflächige Bewegung mit Schwindel und Übelkeit – Parallax-Effekte und Hintergrundvideos sind die schlimmsten Fälle. Für sie ist ein Schalter keine Bequemlichkeit, sondern die Voraussetzung dafür, die Seite überhaupt zu benutzen.

Screenreader-Nutzer trifft es strukturell: Ein Karussell, das weiterrotiert, während sie darin navigieren, verändert die Seite unter dem virtuellen Cursor. Wenn der Inhalt zudem in einer Live-Region steckt, wird jede Rotation angesagt – der Vorleser kommt nicht mehr zum eigentlichen Text.

Menschen, die mehr Zeit zum Lesen brauchen, sind mit Standard-Rotationszeiten schlicht überfordert. Vier bis sechs Sekunden reichen für eine Überschrift, nicht für Überschrift plus Fließtext plus Entscheidung, ob sich der Link lohnt.

Und Menschen mit motorischen Einschränkungen zielen auf einen Link, der sich unter dem Zeiger wegbewegt. Ein rotierendes Karussell ist ein bewegliches Ziel.

Richtig & falsch im Code

Der beste Weg ist der, den man am seltensten geht: kein Autoplay. Ein Karussell, das auf Knopfdruck blättert, braucht keinen Pause-Mechanismus, weil es keine automatische Bewegung gibt.

Wenn die Rotation bleiben soll, gehört der Schalter als erstes Bedienelement in die Komponente:

<!-- Richtig: Pause-Knopf mit gedrücktem Zustand, vor den Slides -->
<section class="karussell" aria-roledescription="Karussell"
         aria-label="Aktuelle Angebote">
  <button type="button" class="karussell-pause" aria-pressed="false">
    Automatischen Wechsel pausieren
  </button>
  <ul class="slides">
    <li>…</li>
  </ul>
</section>

// Richtig: der Zustand wird gespeichert, die Rotation läuft nicht
// von selbst wieder an – auch nicht auf der nächsten Seite
const knopf = document.querySelector('.karussell-pause');

knopf.addEventListener('click', () => {
  const pausiert = knopf.getAttribute('aria-pressed') === 'true';
  knopf.setAttribute('aria-pressed', String(!pausiert));
  knopf.textContent = pausiert
    ? 'Automatischen Wechsel pausieren'
    : 'Automatischen Wechsel fortsetzen';
  pausiert ? starteRotation() : stoppeRotation();
  sessionStorage.setItem('karussell', pausiert ? 'laeuft' : 'pausiert');
});

if (sessionStorage.getItem('karussell') === 'pausiert') stoppeRotation();

Der häufigste Umsetzungsfehler ist ein Schalter, den man nicht sieht:

/* Falsch: der Pause-Knopf erscheint erst beim Überfahren.
   Auf Touchgeräten gibt es kein Überfahren – dann existiert er nicht. */
.karussell-pause { opacity: 0; }
.karussell:hover .karussell-pause { opacity: 1; }

/* Richtig: dauerhaft sichtbar, ausreichend groß, kontraststark */
.karussell-pause {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  background: rgb(0 0 0 / 0.75);
  color: #fff;
}

Für Hintergrundvideos gilt dasselbe. Ein Video ohne Bedienelemente ist eine Animation – und die braucht einen Schalter:

<!-- Falsch: Autoplay-Schleife ohne jede Kontrolle -->
<video autoplay muted loop playsinline src="buehne.mp4"></video>

<!-- Richtig: Kontrolle sichtbar, Systemeinstellung respektiert -->
<video id="buehne" autoplay muted loop playsinline src="buehne.mp4"></video>
<button type="button" id="buehne-stop">Hintergrundvideo anhalten</button>

/* Ergänzend – aber kein Ersatz für den Schalter */
@media (prefers-reduced-motion: reduce) {
  .karussell .slides { scroll-behavior: auto; }
  .ticker { animation: none; }
  video { display: none; }
}

prefers-reduced-motion ist wertvoll, weil es die Systemeinstellung des Nutzers respektiert – aber das Kriterium verlangt einen Mechanismus auf der Seite. Viele Menschen wissen nicht, dass es diese Systemeinstellung gibt, und an einem fremden Rechner können sie sie nicht setzen.

Die vollständigen Muster inklusive Tastaturbedienung und Ansage des Slidewechsels stehen unter Slider & Karussells; für Ticker und Statusanzeigen siehe Status, Fortschritt & Benachrichtigungen.

So testest du es

1. Seite laden und fünf Sekunden nur zusehen. Bewegt, blinkt oder scrollt etwas von selbst weiter? Nicht klicken, nicht scrollen – nur beobachten.
2. Für jede Bewegung die vier Bedingungen prüfen: automatisch gestartet? länger als fünf Sekunden? neben anderem Inhalt? Trifft eine nicht zu, ist die Sache erledigt.
3. Den Schalter suchen – aber nur dort, wo er erlaubt ist: am Seitenanfang oder direkt beim bewegten Inhalt. Ein Pause-Knopf in den Einstellungen zählt nicht.
4. Den Schalter mit der Tastatur bedienen. Erreichbar per Tab, sichtbar fokussiert, mit Enter oder Leertaste auslösbar, eindeutig beschriftet?
5. Nach dem Anhalten prüfen, ob alles erreichbar bleibt. Bei einem pausierten Karussell: Kommt man noch zu den übrigen Bildern – über Punkte, Pfeile oder Tastatur?
6. Warten und die Seite wechseln. Läuft die Bewegung von selbst wieder an? Das wäre ein Befund, auch wenn der Schalter grundsätzlich funktioniert.
7. Automatische Aktualisierungen gesondert prüfen: Live-Ticker, Feeds, Preisanzeigen. Pausierbar oder in der Frequenz regelbar?
8. Gegenprobe: prefers-reduced-motion im Betriebssystem aktivieren. Reagiert die Seite? Das ist kein Prüfkriterium, aber ein gutes Zeichen.

Häufiger Fehler in der Praxis

Der Klassiker ist die rotierende Bühne auf der Startseite. Sie steht dort, weil sich vier Abteilungen nicht einigen konnten, wer den Platz bekommt – und jede bekommt einen Slide. Ein Pause-Knopf war nie Teil der Anforderung. Dabei zeigen Auswertungen seit Jahren, dass fast nur der erste Slide angeklickt wird; die Rotation kostet also nicht nur Konformität, sondern auch Wirkung. Ich würd dir raten, in diesem Gespräch mit den Zahlen anzufangen und die Barrierefreiheit als zweites Argument nachzuschieben.

Der zweite ist der Pause-Knopf, den nur die Maus findet. Er ist vorhanden, aber per opacity: 0 unsichtbar, bis der Zeiger über dem Karussell steht. Auf einem Touchgerät gibt es kein Überfahren, und für Tastaturnutzer erscheint er im besten Fall erst bei Fokus – da ist die Bewegung längst gelaufen. Aus Sicht des Prüfschritts existiert der Schalter damit nicht.

Der dritte ist das Logo-Laufband. „Unsere Kunden“ oder „Bekannt aus“, endlos scrollend, meist als reine CSS-Animation ohne jedes Bedienelement. Weil es sich um Dekoration handelt, denkt niemand an einen Schalter – die vier Bedingungen sind trotzdem erfüllt. Hier ist die einfachste Lösung, die Bewegung ganz wegzulassen und die Logos als statisches Raster zu zeigen.

Und der vierte ist die eingebundene Werbefläche. Der Vermarkter liefert animierte Formate, die Seite hat keinen Einfluss darauf. Der Prüfschritt hält ausdrücklich fest, dass es keine Rolle spielt, ob es sich um Werbung oder um redaktionelle Inhalte handelt. Wer Werbeplätze verkauft, braucht also Formatvorgaben – oder einen Schalter, der die Anzeigenbereiche mit ausblendet.

Häufige Fragen

Gilt 2.2.2 auch für ein Video, das der Nutzer selbst startet?

Nein. Eine der vier Bedingungen ist, dass die Bewegung automatisch startet. Ein Video, das erst auf Klick läuft, fällt nicht darunter – es braucht aber ohnehin Bedienelemente, weil 1.4.2 für Ton eine Steuerung verlangt und die Tastaturbedienbarkeit aus 2.1.1 folgt.

Reicht prefers-reduced-motion als Pause-Mechanismus?

Nein. Das Kriterium verlangt einen Mechanismus auf der Seite selbst, unabhängig von Systemeinstellungen. prefers-reduced-motion ist eine sinnvolle Ergänzung – aber viele Menschen kennen die Einstellung nicht oder sitzen an einem fremden Gerät, an dem sie sie nicht ändern können.

Wo muss der Pause-Knopf stehen?

Der Prüfschritt verlangt ihn „deutlich sichtbar am Seitenbeginn oder im direkten Kontext des bewegten Inhalts“. In der Praxis heißt das: als eines der ersten Bedienelemente innerhalb der Karussell-Komponente, dauerhaft sichtbar und mit der Tastatur erreichbar. Ein Schalter in den Einstellungen erfüllt das nicht.

Muss ein blinkender Cursor oder eine Ladeanimation gestoppt werden können?

In der Regel nicht. Ein Textcursor blinkt in einem so kleinen Bereich, dass die Bedingung „parallel zu anderem Inhalt“ praktisch nicht greift; eine Ladeanimation, die als einziger Inhalt auf dem Schirm steht, ebenfalls nicht. Sobald die Animation neben lesbarem Text läuft und länger als fünf Sekunden dauert, sieht es anders aus.

Fällt ein Nachrichten-Ticker unter 2.2.2 oder unter 2.2.1?

Unter beide, je nach Verhalten. Die laufende Bewegung des Tickers fällt unter 2.2.2 und braucht einen Schalter. Wenn Inhalte nach einer festen Zeit verschwinden und dadurch eine Zeitbegrenzung entsteht, kommt zusätzlich 2.2.1 Zeitbegrenzungen anpassbar ins Spiel.

Verwandte Themen

• Slider & Karussells – das Umsetzungsmuster mit Pause und Tastatur
• 1.4.2 Audio-Steuerelement – das Gegenstück für Ton
• 2.3.1 Grenzwert von drei Blitzen – wenn Blinken gefährlich wird
• 2.2.1 Zeitbegrenzungen anpassbar – Zeitdruck statt Bewegung
• Kognitive Barrierefreiheit – warum Ablenkung eine Barriere ist