- Stufe
- AAA
- Seit
- WCAG 2.1
- Einträge
- 18 / 193
2.3.3 Animation durch Interaktionen
Bewegung, die durch eine Handlung der Person ausgelöst wird, etwa durch Scrollen oder Klicken, lässt sich abschalten, sofern sie nicht wesentlich ist.
/ Was es verlangt
Das Kriterium betrifft Bewegungsanimation, die eine Interaktion auslöst: Parallax-Hintergründe, die beim Scrollen mitgleiten, Abschnitte, die beim Eintritt in den sichtbaren Bereich hereinfliegen, Seitenübergänge mit Zoom oder Wischbewegung, Karten, die sich beim Klick drehen. Bei Menschen mit vestibulären Störungen kann solche Bewegung Schwindel, Übelkeit und Kopfschmerzen auslösen. Eine Warnung hilft ihnen nicht. Sie brauchen, dass die Bewegung verschwindet und die Seite trotzdem weiter funktioniert.
Eine Seite besteht, wenn sich die nicht wesentliche Bewegung abschalten lässt, entweder über eine Einstellung auf der Website oder indem sie die Systemeinstellung für reduzierte Bewegung beachtet, die CSS als Medienmerkmal prefers-reduced-motion bereitstellt. Änderungen von Farbe, Deckkraft oder Unschärfe sind keine Bewegungsanimation und nicht erfasst. Bewegung, die für die Funktion oder die vermittelte Information wesentlich ist, ist ausgenommen. Das Kriterium hat Stufe AAA, die Konformität auf Stufe AA hängt also nicht davon ab.
Dieses Kriterium hat Stufe AAA und ist für die Konformität auf Stufe AA nicht erforderlich.
/ Woran Seiten scheitern
- Ein Parallax-Hintergrund bewegt sich beim Scrollen mit anderer Geschwindigkeit als der Vordergrund, und das lässt sich nicht abschalten.
- Abschnitte gleiten oder zoomen an ihren Platz, sobald sie in den sichtbaren Bereich kommen, gesteuert von einem Skript, das die Einstellung für reduzierte Bewegung ignoriert.
- Übergänge von Seite zu Seite wischen oder skalieren bei jeder Navigation den ganzen Bildschirm.
- Weiches Scrollen über lange Strecken wird allen mit scroll-behavior: smooth aufgezwungen.
- Das Stylesheet enthält keinen einzigen prefers-reduced-motion-Block, sodass die Einstellung des Betriebssystems nichts ändert.
/ So prüfen Sie es selbst
- Schalten Sie in Ihrem System die reduzierte Bewegung ein: unter Windows 11 bei Barrierefreiheit, Visuelle Effekte, Animationseffekte, unter macOS bei Bedienungshilfen, Anzeige, Bewegung reduzieren.
- Oder emulieren Sie sie in den Chrome DevTools: Öffnen Sie den Tab Rendering und stellen Sie die Emulation von prefers-reduced-motion auf reduce.
- Laden Sie die Seite neu, scrollen Sie, öffnen Sie Menüs und wechseln Sie zwischen Seiten. Alles, was dann noch gleitet, zoomt, sich dreht oder mit anderer Geschwindigkeit verschiebt, ist ein Verstoß, sofern die Bewegung nicht wesentlich ist.
- Durchsuchen Sie das CSS nach prefers-reduced-motion. Kommt der Begriff nirgends vor, reagieren die Styles der Website nicht auf die Einstellung.
/ So beheben Sie es
- Kapseln Sie Bewegung in einer Media Query: Setzen Sie Transitions und Keyframe-Animationen in @media (prefers-reduced-motion: no-preference) oder heben Sie sie in @media (prefers-reduced-motion: reduce) mit animation: none und transition: none auf.
- Lesen Sie in Skripten window.matchMedia('(prefers-reduced-motion: reduce)').matches aus und überspringen Sie Scroll-Effekte, Parallax und Seitenübergänge, wenn der Wert true ist.
- Ersetzen Sie Bewegung durch eine kurze Überblendung oder einen sofortigen Wechsel. Eine Änderung der Deckkraft ist nach der WCAG-Definition keine Bewegungsanimation.
- Setzen Sie scroll-behavior: smooth nur innerhalb der Media Query no-preference.
/ Was unser Scanner prüft
Unsere Prüfung motion-no-reduced sucht zuerst in den Stylesheets, auf die sie zugreifen kann, nach irgendeiner Media Query prefers-reduced-motion. Gibt es keine, meldet sie bis zu zehn sichtbare Elemente mit einer CSS-Animation, deren Wiederholungszahl unendlich ist. Das ist ein Näherungswert: Die Prüfung löst keine Interaktion aus, sieht keine per JavaScript gesteuerte Bewegung, und eine einzige solche Media Query irgendwo auf der Seite bringt sie zum Schweigen, auch wenn die Animation weiterläuft.
/ Wer es verletzt, nach unseren eigenen Messungen
| Stelle | Sektor | Vorkommen | Wert |
|---|---|---|---|
| Komisja Nadzoru Finansowego | government · PL | 10 | 17 |
| Uniwersytet Mikołaja Kopernika | education · PL | 10 | 6 |
| Indianapolis | city · US | 3 | 18 |
| Philadelphia | city · US | 3 | 8 |
| Bydgoszcz | city · PL | 2 | 7 |
| Dallas | city · US | 2 | 23 |
| King County | government · US | 2 | 15 |
| Miami-Dade County | government · US | 2 | 20 |
| Nashville | city · US | 2 | 12 |
| New Orleans | city · US | 2 | 7 |
| Poznań | city · PL | 2 | 1 |
| San Diego | city · US | 2 | 63 |
| State of Florida | government · US | 2 | 8 |
| Boston | city · US | 1 | 6 |
| Bundesrat | government · DE | 1 | 14 |
| Lublin | city · PL | 1 | 17 |
| Narodowy Instytut Dziedzictwa | culture · PL | 1 | 6 |
| Prezydent RP | government · PL | 1 | 15 |
Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.
/ Fragen zu diesem Kriterium
Verlangt WCAG prefers-reduced-motion?
WCAG nennt das Medienmerkmal im Text des Kriteriums nicht. Verlangt wird, dass sich durch Interaktion ausgelöste Bewegungsanimation abschalten lässt, und das Beachten von prefers-reduced-motion ist die Technik, die das W3C dafür dokumentiert. Ein Schalter auf der Website selbst erfüllt die Anforderung ebenfalls. Sie liegt auf Stufe AAA und damit über dem, was für AA-Konformität nötig ist.
Was zählt nach 2.3.3 als Bewegungsanimation?
WCAG definiert sie als Zwischenschritte zwischen zwei Zuständen, die den Eindruck von Bewegung oder eines weichen Übergangs erzeugen, etwa ein Element, das an seinen Platz gleitet oder seine Größe ändert. Änderungen von Farbe, Unschärfe oder Deckkraft, die die wahrgenommene Größe, Form oder Position des Elements nicht verändern, sind ausgenommen. Eine einfache Überblendung ist also nicht erfasst.
Was ist der Unterschied zwischen 2.3.3 und 2.2.2?
2.2.2 Pausieren, beenden, ausblenden hat Stufe A und betrifft Inhalte, die sich von selbst länger als fünf Sekunden bewegen, etwa ein Karussell. 2.3.3 hat Stufe AAA und betrifft Bewegung, die die Person selbst durch Scrollen, Klicken oder Navigieren auslöst. Eine Seite kann an beiden scheitern: Eine endlose Zieranimation und ein Parallax-Effekt sind getrennte Probleme.