Prüfpunkt 2.3.3Stufe AAABewegung, Blinken und Ton
Wie werden Animationen bei Bedienung abschaltbar?
Parallax-Effekte beim Scrollen, Elemente, die beim Klick heranfliegen, Seiten, die sich beim Wechsel drehen: Für Menschen mit vestibulären Störungen lösen solche Bewegungen Schwindel, Übelkeit und Kopfschmerz aus. Das Kriterium 2.3.3 der Stufe AAA verlangt, dass Animationen, die eine Bedienung auslöst, abschaltbar sind, außer die Animation ist für die Funktion oder die Information wesentlich.
Was das Kriterium verlangt
Jede Bewegung, die als Folge einer Bedienung entsteht (Scrollen, Klicken, Tippen, Wischen), lässt sich abschalten, ohne dass die Funktion verloren geht. Ein sanftes Scrollen zum Anker wird zum Sprung, ein hereingleitendes Menü erscheint sofort, ein Parallax-Hintergrund steht still. Wesentliche Animationen sind ausgenommen: eine Fortschrittsanzeige, die einen Ablauf zeigt, oder eine Simulation, deren Inhalt die Bewegung ist.
Die Umsetzung über die Systemeinstellung
Betriebssysteme haben eine Einstellung „Bewegung reduzieren“, die der Browser als Medienabfrage prefers-reduced-motion weitergibt. Ein Stylesheet, das unter dieser Abfrage alle Übergänge und Animationen auf Null setzt, erfüllt das Kriterium für alles, was per CSS animiert ist. Für JavaScript-Animationen wird dieselbe Abfrage vor dem Start ausgewertet. Ein eigener Schalter auf der Seite ist eine Ergänzung für Menschen, die die Systemeinstellung nicht kennen.
So gehen wir damit um
Die Messung kann prüfen, ob das Stylesheet eine Regel für prefers-reduced-motion enthält und ob Animationen darunter enden; ob JavaScript-Animationen darauf hören, sieht ein Prüfer beim Bedienen mit eingeschalteter Einstellung. Das Kriterium gehört zur Kategorie AAA im Wissen.
Beispiele
Parallax ohne Abschaltung
.held { background-attachment: fixed; }
.karte { transition: transform 0.6s; }
.karte:hover { transform: translateY(-20px) rotate(2deg); }@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.held { background-attachment: scroll; }
}Die Systemeinstellung „Bewegung reduzieren“ schaltet alle Bewegungen ab, die nicht für die Funktion nötig sind.
So gehen Sie es an
- Fügen Sie dem Stylesheet einen Block für prefers-reduced-motion hinzu, der Übergänge und Animationen auf eine Dauer von 0,01 ms setzt und scroll-behavior auf auto.
- Werten Sie die Abfrage in JavaScript aus (matchMedia) und starten Sie Parallax und Flug-Effekte nur, wenn Bewegung erlaubt ist.
- Testen Sie mit eingeschalteter Systemeinstellung: Nichts darf mehr gleiten, fliegen oder sich drehen.
- Bieten Sie einen sichtbaren Schalter „Bewegung aus“ an, der die Wahl im Browser speichert.
Weiter im Prüfbereich Barrierefreiheit
- Wie erkennt ein Besucher, wo er sich auf der Website befindet?WCAG 2.2 Kriterium 2.4.8 (Stufe AAA): Die Position der Seite innerhalb der Website ist erkennbar, etwa über Brotkrumen oder eine markierte Menüstelle.
- Wann ist ein Linktext auch ohne Zusammenhang verständlich?WCAG 2.2 Kriterium 2.4.9 (Stufe AAA): Der Zweck jedes Links geht aus dem Linktext allein hervor, ohne den umgebenden Satz. Kein „mehr“, kein „hier klicken“.
- Wann braucht ein Text Zwischenüberschriften?WCAG 2.2 Kriterium 2.4.10 (Stufe AAA): Inhalte sind mit Abschnittsüberschriften gegliedert. Warum Vorleseprogramm und eilige Leser sie brauchen.
- Warum darf ein fokussiertes Element nie verdeckt sein?WCAG 2.2 Kriterium 2.4.12 (Stufe AAA, neu in 2.2): Ein Element mit Tastaturfokus ist vollständig sichtbar, kein Teil liegt hinter einer Leiste.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
Foto: Sebastian Pichler, CC0
.jpg){kind=link}