Pausieren, stoppen, ausblenden: bewegte Inhalte steuerbar machen (WCAG 2.2.2)

Worum es geht: vier Arten von Bewegung

Bewegung auf einer Seite kann eine echte Barriere sein. Wer Texte langsam liest, verliert den Anschluss, wenn ein Ticker weiterzieht. Wer eine Sehbehinderung mit Vergrößerung nutzt, verliert die Stelle, sobald sich etwas verschiebt. Und für viele Menschen mit Aufmerksamkeitsstörungen oder kognitiven Einschränkungen macht dauerhafte Bewegung das Lesen des restlichen Inhalts schlicht unmöglich. Das W3C nennt als Kern des Kriteriums genau dieses Ziel: Niemand soll von Inhalten abgelenkt werden, die sich bewegen oder von selbst aktualisieren.

Vier Arten von Veränderung sind gemeint, und es lohnt sich, sie zu unterscheiden, weil sie unterschiedlich behandelt werden:

Eine wichtige Abgrenzung gleich vorweg: Hier geht es um visuelle Bewegung. Tonspuren, die von selbst starten, fallen unter ein eigenes Kriterium (1.4.2 „Audio-Steuerung"). Und Inhalte, die so schnell und hell blitzen, dass sie Anfälle auslösen können, sind ein Sicherheits- und kein Ablenkungsthema; dafür gilt 2.3.1, beschrieben im Artikel Blitzende Inhalte und Anfälle.

Zwei Regeln: bewegt und automatisch aktualisiert

Das Kriterium besteht aus zwei Teilen, die fast gleich lauten, sich aber in zwei Punkten unterscheiden. Der Grund: Bewegung darf kurz sein und dann aufhören, eine automatische Aktualisierung dagegen ist sinnlos, wenn sie nach fünf Sekunden stoppt.

„Essenziell" ist dabei ein enger Begriff: Etwas ist nur dann essenziell, wenn es sich nicht entfernen ließe, ohne Information oder Funktion grundlegend zu verändern, und wenn es keinen anderen konformen Weg gibt. Ein Auto-Karussell auf der Startseite ist fast nie essenziell, eine Animation, die einen Vorgang Schritt für Schritt erklärt, kann es sein.

Wann das Kriterium greift: drei Bedingungen

Nicht jede Bewegung braucht einen Schalter. Für bewegte, blinkende oder scrollende Inhalte müssen alle drei Bedingungen gleichzeitig zutreffen, damit ein Ausweg Pflicht wird. Fällt eine weg, ist das Kriterium bereits erfüllt.

Pausieren, stoppen oder ausblenden: die drei Auswege

Sind alle Bedingungen erfüllt, brauchst du einen Mechanismus. „Mechanismus" meint dabei einen echten Bedien-Weg, der die Seite nicht blockiert. Das W3C ist hier deutlich: Eine Animation, die nur anhält, solange sie den Tastatur-Fokus hat, und sofort weiterläuft, wenn man weitergeht, gilt nicht als Pause-Mechanismus, weil sie die Seite unbenutzbar macht. Die drei zulässigen Wege unterscheiden sich darin, was mit dem Inhalt passiert:

In der Praxis genügt fast immer eine sichtbare, mit Tastatur erreichbare Schaltfläche. Die W3C-Technik G186 beschreibt genau das: ein Bedienelement auf der Seite, das die Bewegung stoppt. Für durchlaufenden Text per Skript gibt es zusätzlich SCR33. Wichtig ist, dass der Schalter selbst gut auffindbar und beschriftet ist.

 <!-- Der Schalter steht VOR oder direkt im Karussell und ist 
 mit der Tastatur erreichbar. aria-pressed meldet den Zustand. --> 
<button type="button" class="karussell-pause" aria-pressed="false">
  Automatischen Wechsel pausieren
</button>
<script>
const knopf = document.querySelector('.karussell-pause');
let laeuft = true;
let timer = setInterval(naechsteFolie, 5000);
knopf.addEventListener('click', () => {
  laeuft = !laeuft;
  knopf.setAttribute('aria-pressed', String(!laeuft));
  knopf.textContent = laeuft
    ? 'Automatischen Wechsel pausieren'
    : 'Automatischen Wechsel fortsetzen'; // Pausieren heißt: Timer wirklich stoppen, nicht nur verstecken. 
if (laeuft) timer = setInterval(naechsteFolie, 5000);
  else clearInterval(timer);
});
</script>

Karussells, Ticker und prefers-reduced-motion

Ein sichtbarer Schalter ist Pflicht, ein zweiter Hebel macht ihn besser: Viele Betriebssysteme haben eine Einstellung „Bewegung reduzieren". Browser geben sie über die CSS-Abfrage prefers-reduced-motion weiter. Wer sie respektiert, schaltet automatisierte Bewegung von vornherein ab, für genau die Menschen, die sie als störend oder bei vestibulären Beschwerden sogar als unangenehm empfinden.

 /* Standard: das Karussell darf sich animiert bewegen. */.karussell { scroll-behavior: smooth; } /* Wer „Bewegung reduzieren" gewählt hat, bekommt keine 
 automatische Animation mehr. */ 
 @media 
(prefers-reduced-motion: reduce) {
  .karussell { scroll-behavior: auto; }
  .karussell__folie { animation: none; transition: none; }
}

Abgrenzung zu 2.2.1, 2.3.1 und 1.4.2

Rund um Bewegung und Zeit liegen mehrere Kriterien dicht beieinander. Diese Übersicht hilft, das richtige zu greifen, statt alles in einen Topf zu werfen:

Die Faustregel: Lenkt es ab, ist es 2.2.2. Kann es einen Anfall auslösen, ist es 2.3.1. Setzt es eine Frist, ist es 2.2.1. Ist es Ton, ist es 1.4.2. Inhalte können mehrere Kriterien gleichzeitig berühren; dann gelten sie alle.

Zwei Mythen zu bewegten Inhalten

Checkliste für bewegte Inhalte

Bewegung zieht den Blick an, das ist ihr Sinn und zugleich ihr Problem. Ein gut platzierter Pause-Schalter kostet wenig und gibt die Kontrolle dorthin zurück, wo sie hingehört: zu den Menschen, die die Seite lesen wollen, in ihrem eigenen Tempo.