Zredukowany ruch

Zredukowany ruch to preferencja użytkownika, obsługiwana przez wszystkie współczesne systemy operacyjne, sygnalizująca, że użytkownik nie chce animowanych, paralaksowych ani innych treści z intensywnym ruchem. Autorzy wykrywają ją za pomocą zapytania CSS @media (prefers-reduced-motion: reduce).

Kto potrzebuje zredukowanego ruchu

Na animacje w sieci narażone są różne grupy osób z niepełnosprawnościami:

• Zaburzenia przedsionkowe — zawroty głowy, choroba Ménière’a i powiązane schorzenia mogą być wywoływane lub nasilane przez przewijanie paralaksowe, duże przejścia strony, autoodtwarzane wideo zajmujące cały ekran oraz niektóre animacje przesunięcia kamery. Poważne epizody mogą być obezwładniające.
• Osoby z migreną — wiele wzorców migreny jest wywoływanych przez aurę; ruch jest jednym z udokumentowanych wyzwalaczy.
• Padaczka fotosensytywna — migające treści przekraczające próg WCAG (powyżej trzech błysków na sekundę) mogą wywołać napady padaczkowe. Preferencja zredukowanego ruchu sygnalizuje, że użytkownik chce ograniczenia wszelkiego ruchu — nawet poniżej progu.
• Zaburzenia koncentracji — ADHD i powiązane schorzenia sprawiają, że ruch w tle (przewijające się paski, nieskończone karuzele) stanowi znaczące obciążenie poznawcze.

Jest to liczna grupa użytkowników. Różne badania wskazują, że łączna częstość występowania zaburzeń przedsionkowych, migreny i ADHD przekracza 20% dorosłych w pewnym momencie ich życia.

Co robi system operacyjny

Wszystkie główne systemy operacyjne udostępniają preferencję zredukowanego ruchu w ustawieniach dostępności:

• macOS / iOS — Ustawienia systemowe → Dostępność → Ekran → Redukuj ruch.
• Windows 10/11 — Ustawienia → Dostępność → Efekty wizualne → przełącznik efektów animacji.
• Android — Ustawienia → Dostępność → Usuń animacje.

Przeglądarka odczytuje tę preferencję systemu operacyjnego i udostępnia ją arkuszom stylów CSS:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Kryteria WCAG

Dwa kryteria WCAG dotyczą wprost animacji:

• 2.3.3 Animacje wywołane interakcją (AAA, WCAG 2.1+) — ruch wywołany interakcją użytkownika może zostać wyłączony, chyba że jest niezbędny dla funkcjonalności. Wyjątek „niezbędności” jest wąski: timer CAPTCHA jest niezbędny; animacja odwracania karty wyzwalana przewijaniem — nie.
• 2.2.2 Pauza, zatrzymanie, ukrycie (A) — wszelkie poruszające się, migające lub automatycznie aktualizujące się treści trwające dłużej niż 5 sekund muszą mieć możliwość pauzy, zatrzymania lub ukrycia. Obowiązuje niezależnie od preferencji użytkownika.

Działania operacyjne

Rozsądny punkt wyjścia:

1. Wykryj preferencję. Stosuj zapytanie CSS w każdym arkuszu stylów, który dodaje animacje.
2. Redukuj, nie eliminuj. „Zredukowany” nie musi oznaczać „zerowy”; przejście trwające 100 ms jest zazwyczaj akceptowalne tam, gdzie wjazd trwający 600 ms już nie jest.
3. Przeprowadź audyt problematycznych elementów. Paralaksa hero, efekty śledzenia myszy, animacje przejść stron, nieskończone przewijanie, autoodtwarzane wideo — to główni sprawcy wymagający alternatywy dla zredukowanego ruchu.
4. Domyślnie ogranicz animacje. Wiele systemów projektowych zaczyna odwracać domyślne ustawienie: animacja jest dodawana tylko po jawnym włączeniu jej w komponencie.