Animacja wywoływana interakcją

Czego wymaga kryterium

Animacje ruchu wyzwalane interakcją użytkownika — paralaksa przy przewijaniu, przejścia między stronami, powiększenia uruchamiane po najechaniu kursorem, efekty odkrywania treści przy przewijaniu — muszą być wyłączone, gdy użytkownik tego zażąda, chyba że animacja jest niezbędna dla funkcji lub przekazywanej informacji.

Standardowym mechanizmem jest zapytanie medialne CSS prefers-reduced-motion: reduce, które odczytuje systemowe ustawienie redukcji ruchu udostępniane przez macOS, Windows, iOS i Android.

Jak spełnić kryterium

• Wszelki znaczący ruch (transformacje, duże przesunięcia, paralaksa, przejścia między stronami, animacje powiązane z przewijaniem) należy opakować w blok @media (prefers-reduced-motion: no-preference).
• W przypadku animacji sterowanych JavaScriptem (GSAP, Framer Motion, Lottie) należy sprawdzać window.matchMedia('(prefers-reduced-motion: reduce)').matches i albo pomijać animację, albo zastępować ją natychmiastową zmianą stanu.
• Krytyczne animacje informacyjne (wskaźniki ładowania, podglądy przeciągania) mogą nadal działać przy mniejszej amplitudzie gdy opcja redukcji ruchu jest włączona — przekazują funkcję, nie efekt wizualny.
• Należy testować z włączoną opcją Ustawienia systemowe → Dostępność → Wyświetlacz → Zmniejsz ruch w macOS oraz jej odpowiednikami w Windows, iOS i Android.

Typowe błędy

• Strony marketingowe z paralaksą przy przewijaniu ignorujące preferencję reduce-motion systemu operacyjnego.
• Biblioteki przejść między stronami (Barba.js, przejścia widoku Astro w starszych konfiguracjach) animujące duże przesunięcia niezależnie od preferencji użytkownika.
• Efekty unoszenia kart po najechaniu z długimi przejściami translateY, powodujące dyskomfort u użytkowników z zaburzeniami przedsionkowymi.
• Animacje wyzwalane przewijaniem na długich stronach, uruchamiające dziesiątki efektów ruchu podczas przewijania przez użytkownika — szczególnie dezorientujące w dużej skali.
• Animacje Lottie w przepływach wprowadzania odtwarzające pełnoekranowy ruch bez sprawdzania preferencji.

Narzędzia axe i Lighthouse nie wykrywają niezawodnie naruszeń redukcji ruchu, ale nowsze wersje audytu dostępności Lighthouse zawierają sprawdzenie prefers-reduced-motion, a wiele lintersów systemów projektowych egzekwuje je teraz automatycznie.

Dlaczego to ma znaczenie

Zaburzenia przedsionkowe — choroba Ménière’a, migrena przedsionkowa, zespół pourazowy mózgu, przetrwałe czynnościowe zawroty głowy — mogą być nasilane przez duży lub niespodziewany ruch na ekranie. Skutkiem są prawdziwe, fizyczne nudności lub zawroty głowy, a nie jedynie dyskomfort. Honorowanie prefers-reduced-motion należy do najtańszych i najbardziej skutecznych ulepszeń dostępności, a ustawienie systemowe oznacza, że użytkownik już poinformował witrynę o swojej potrzebie.