- Poziom
- AAA
- Od wersji
- WCAG 2.1
- Pozycje
- 18 / 193
2.3.3 Animacja od interakcji
Ruch wywołany działaniem użytkownika, na przykład przewijaniem albo kliknięciem, da się wyłączyć, chyba że jest niezbędny.
/ Czego wymaga
Kryterium dotyczy animacji ruchu, którą wyzwala interakcja: tła z efektem paralaksy przesuwające się podczas przewijania, sekcje wjeżdżające na ekran, gdy pojawiają się w oknie, przejścia między stronami z powiększaniem lub przesuwaniem, karty obracające się po kliknięciu. U osób z zaburzeniami przedsionkowymi taki ruch potrafi wywołać zawroty głowy, nudności i bóle głowy. Ostrzeżenie im nie pomaga. Potrzebują, żeby ruch zniknął, a strona działała dalej tak samo.
Strona spełnia kryterium, gdy ruch, który nie jest niezbędny, da się wyłączyć: przełącznikiem w serwisie albo przez uszanowanie systemowego ustawienia ograniczenia ruchu, które CSS udostępnia jako cechę prefers-reduced-motion. Zmiany koloru, przezroczystości i rozmycia nie są animacją ruchu i kryterium ich nie obejmuje. Wyłączony jest też ruch niezbędny dla funkcji albo dla przekazywanej informacji. Kryterium ma poziom AAA, więc zgodność na poziomie AA od niego nie zależy.
To kryterium ma poziom AAA, więc nie jest wymagane do zgodności na poziomie AA.
/ Jak strony go nie spełniają
- Tło z paralaksą przesuwa się podczas przewijania z inną prędkością niż pierwszy plan i nie da się tego wyłączyć.
- Sekcje wjeżdżają albo powiększają się, gdy pojawiają się w oknie, a skrypt, który tym steruje, ignoruje ustawienie ograniczenia ruchu.
- Przejścia między stronami przesuwają albo skalują cały ekran przy każdej nawigacji.
- Płynne przewijanie na długich odcinkach jest narzucone każdemu użytkownikowi przez scroll-behavior: smooth.
- Arkusz stylów nie ma ani jednego bloku prefers-reduced-motion, więc ustawienie systemu operacyjnego niczego nie zmienia.
/ Jak sprawdzić samodzielnie
- Włącz w systemie ograniczenie ruchu: w Windows 11 w sekcji Ułatwienia dostępu, Efekty wizualne, Efekty animacji, w macOS w sekcji Dostępność, Ekran, Redukuj ruch.
- Albo zasymuluj je w Chrome DevTools: otwórz kartę Rendering i ustaw emulację prefers-reduced-motion na reduce.
- Przeładuj stronę, a potem przewijaj, otwieraj menu i przechodź między stronami. Wszystko, co nadal wjeżdża, powiększa się, obraca albo przesuwa z inną prędkością, jest błędem, chyba że ruch jest niezbędny.
- Przeszukaj CSS pod kątem prefers-reduced-motion. Jeśli tej frazy nigdzie nie ma, style serwisu nie reagują na ustawienie.
/ Jak to naprawić
- Zamknij ruch w zapytaniu o media: umieść przejścia i animacje keyframes w @media (prefers-reduced-motion: no-preference) albo wyłącz je w @media (prefers-reduced-motion: reduce) przez animation: none i transition: none.
- W skryptach odczytaj window.matchMedia('(prefers-reduced-motion: reduce)').matches i pomiń efekty przewijania, paralaksę i przejścia między stronami, gdy wartość to true.
- Zastąp ruch krótkim przenikaniem albo natychmiastową zmianą. Zmiana przezroczystości nie jest animacją ruchu w rozumieniu definicji WCAG.
- Ustawiaj scroll-behavior: smooth tylko wewnątrz zapytania o media no-preference.
/ Co sprawdza nasz skaner
Nasz test motion-no-reduced najpierw szuka w arkuszach stylów, do których ma dostęp, jakiegokolwiek zapytania o media prefers-reduced-motion. Jeśli go nie ma, zgłasza do dziesięciu widocznych elementów z animacją CSS o nieskończonej liczbie powtórzeń. To miara zastępcza: test nie wywołuje żadnej interakcji, nie widzi ruchu sterowanego przez JavaScript, a jedno takie zapytanie gdziekolwiek na stronie go ucisza, nawet jeśli animacja działa dalej.
/ Kto je łamie, według naszych pomiarów
| Podmiot | Sektor | Wystąpienia | Wynik |
|---|---|---|---|
| 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 |
Jedna strona na podmiot, mierzona automatycznie w tygodniowym cyklu. Jeśli podmiot coś naprawił od ostatniego pomiaru, zmiana będzie widoczna przy następnym, a każdy podmiot może odpowiedzieć na swojej stronie.
/ Pytania o to kryterium
Czy WCAG wymaga prefers-reduced-motion?
WCAG nie wymienia tej cechy w treści kryterium. Wymaga, by animację ruchu wyzwalaną przez interakcję dało się wyłączyć, a uszanowanie prefers-reduced-motion to technika, którą W3C opisuje jako sposób na spełnienie tego wymagania. Przełącznik w samym serwisie też je spełnia. Wymaganie ma poziom AAA, czyli wykracza poza to, czego potrzeba do zgodności na poziomie AA.
Co liczy się jako animacja ruchu w kryterium 2.3.3?
WCAG definiuje ją jako kroki dodane między dwoma stanami, które tworzą złudzenie ruchu albo wrażenie płynnego przejścia, na przykład element wjeżdżający na miejsce albo zmieniający rozmiar. Zmiany koloru, rozmycia i przezroczystości, które nie zmieniają postrzeganego rozmiaru, kształtu ani położenia elementu, są wyłączone, więc zwykłe przenikanie pod kryterium nie podpada.
Czym różni się 2.3.3 od 2.2.2?
Kryterium 2.2.2 Pauza, zatrzymanie, ukrycie ma poziom A i dotyczy treści, która sama porusza się dłużej niż pięć sekund, na przykład karuzeli. Kryterium 2.3.3 ma poziom AAA i dotyczy ruchu, który użytkownik sam wywołuje przewijaniem, kliknięciem albo nawigacją. Jedna strona może nie spełniać obu: niekończąca się animacja dekoracyjna i efekt paralaksy to osobne problemy.