prefers-reduced-motion: wzorce CSS, JavaScript i React | We.Inc
Wykryj ustawienie ograniczenia ruchu w CSS i JavaScript, zobacz na żywo swoje własne ustawienie i skopiuj wzorce, które zamieniają duży ruch na przenikanie zamiast usuwać animacje.
Jak respektować prefers-reduced-motion
prefers-reduced-motion to cecha mediów w CSS, która informuje, czy odwiedzający poprosił swoje urządzenie o mniej ruchu. Ma dwie wartości: no-preference i reduce. Duży ruch, taki jak paralaksa, przybliżenia i przesunięcia, umieść w zapytaniu, a gdy wartość to reduce, zamień go na krótkie przenikanie lub brak animacji.
Ustawienia systemowe > Dostępność > Monitor (lub Ruch) > Ogranicz ruch
iOS
Ustawienia > Dostępność > Ruch > Ogranicz ruch
Android 9 i nowsze
Ustawienia > Ułatwienia dostępu > Usuń animacje
Firefox (testowanie)
about:config, ustaw ui.prefersReducedMotion na 1
Ludzie włączają ograniczenie ruchu, bo przesuwanie, przybliżanie i paralaksa mogą wywoływać zawroty głowy, nudności lub bóle głowy, zwłaszcza u osób z zaburzeniami błędnika. Plakietka poniżej odczytuje na żywo ustawienie Twojego urządzenia, a demo pokazuje tę samą animację w wersji pełnej i ograniczonej, abyś mógł je porównać przed wyborem wzorca.
Sprawdź plakietkę: pokazuje, co Twoje urządzenie zgłasza w tej chwili, i aktualizuje się, gdy zmienisz ustawienie.
Użyj przełącznika podglądu, aby zobaczyć ograniczoną wersję demo bez zmieniania ustawień systemu.
Skopiuj wzorzec CSS, JavaScript lub React pasujący do sposobu animowania Twojej strony.
Ograniczaj, nie usuwaj. Szybkie przenikanie opacity nadal pokazuje, że coś się zmieniło, bez ruchu po ekranie.
Traktuj ruch jako ulepszenie: umieszczaj animacje wewnątrz @media (prefers-reduced-motion: no-preference), aby bezpieczna wersja była domyślna.
Automatycznie odtwarzane wideo i karuzele potrzebują też przycisku pauzy, niezależnie od ustawienia ruchu.
W Chrome DevTools możesz emulować to ustawienie w panelu Rendering, aby testować bez zmieniania systemu.
Efekty wyzwalane przewijaniem też się liczą. Duża paralaksa i przejmowanie przewijania to najczęstsze skargi.
Najczęściej zadawane pytania
Jakie wartości ma prefers-reduced-motion?
Dwie: no-preference, gdy odwiedzający niczego nie ustawił, oraz reduce, gdy poprosił o mniej ruchu. Samo @media (prefers-reduced-motion) oznacza to samo co zapytanie o reduce.
Jak sprawdzić prefers-reduced-motion w JavaScript?
Wywołaj window.matchMedia("(prefers-reduced-motion: reduce)") i odczytaj właściwość matches. Dodaj listener zdarzenia change do zwróconego obiektu, aby reagować, gdy ustawienie zmieni się przy otwartej stronie.
Czy przy ustawieniu reduce wyłączyć wszystkie animacje?
Nie. Prośba dotyczy mniejszej ilości ruchu, a nie zamrożonej strony. Zachowaj zmiany koloru, krótkie przenikania i wskaźniki postępu, a usuń lub zmniejsz ruch, taki jak przesuwanie, skalowanie, obracanie i paralaksa.
Czy WCAG wymaga respektowania ograniczenia ruchu?
WCAG 2.3.3 Animacja wywołana interakcjami, poziom AAA, wymaga, aby ruch wywołany interakcją dało się wyłączyć, chyba że jest niezbędny. Respektowanie ustawienia systemowego to jeden z wymienionych sposobów spełnienia tego kryterium. Niezależnie od tego 2.2.2 Pauza, zatrzymanie, ukrycie na poziomie A obejmuje ruch, który zaczyna się samoczynnie.
Jak obsłużyć ograniczenie ruchu w Tailwind?
Użyj wariantu motion-safe:, aby zastosować animację tylko wtedy, gdy nie ustawiono preferencji, lub motion-reduce:, aby nadpisać ją przy ustawieniu reduce, na przykład motion-safe:animate-bounce.
Jaki ruch sprawia problemy
Kłopot sprawia ruch, który wypełnia dużą część widoku lub porusza się w kierunku, którego odwiedzający nie wywołał: tła z paralaksą, przybliżenia całej strony, przesuwane zmiany stron, obracające się elementy i treść skacząca podczas przewijania.
Mała, szybka informacja zwrotna uruchamiana przez użytkownika, na przykład zmiana koloru przycisku lub zaznaczenie pola wyboru, rzadko jest problemem i zwykle może zostać.
CSS z brakiem ruchu jako punktem wyjścia
Wiele stron dodaje na końcu zapytanie reduce, które ustawia każdy czas trwania prawie na zero. To działa, ale łatwo przeoczyć jedną animację, a niektóre skrypty nasłuchują zdarzeń animationend, które wtedy uruchamiają się natychmiast.
Pisanie ruchu wewnątrz zapytania no-preference odwraca domyślne zachowanie. Każdy, czyja przeglądarka nie zgłasza preferencji, nadal widzi ruch, a wszystko, o czym zapomnisz, wraca do spokojnej wersji.
Skrypty i biblioteki
Zapytania CSS nie obejmują animacji uruchamianych z JavaScript, canvas ani wywołań płynnego przewijania. Sprawdź media query przed wywołaniem element.animate() lub scrollIntoView z behavior: smooth.
Odczytaj ustawienie raz przy starcie i subskrybuj jego zdarzenie change, aby osoba, która przełączy je w trakcie wizyty, była respektowana bez przeładowania.
Wzorce CSS
Ruch jako ulepszenie
Karta wsuwa się tylko wtedy, gdy nie ustawiono preferencji. Wszyscy pozostali widzą delikatne przenikanie.
Siatka bezpieczeństwa dla istniejących stron
Przydatna, gdy nie możesz przepisać każdej animacji. Czasy trwania stają się prawie zerowe, a nie none, więc zdarzenia animationend i transitionend nadal się uruchamiają.
JavaScript i React
Odczyt ustawienia i śledzenie zmian
matchMedia zwraca listę na żywo. Jej zdarzenie change uruchamia się, gdy odwiedzający przełączy ustawienie.
Hook React: usePrefersReducedMotion
Na serwerze startuje z wartością true, więc nic się nie animuje, zanim przeglądarka nie odpowie.
Na co zamienić każdy efekt
Ograniczone alternatywy
Pełny ruch
Wersja ograniczona
Tło z paralaksą
Statyczne tło
Zmiana strony z przesunięciem lub przybliżeniem
Przenikanie lub natychmiastowa zmiana
Element wlatuje przy przewijaniu
Krótkie pojawienie się w miejscu
Obracający się loader
Pulsujące opacity lub pasek postępu
Płynne przewijanie do kotwicy
Natychmiastowy skok
Automatycznie odtwarzane wideo w tle
Obraz poster z przyciskiem odtwarzania
Twoje ustawienie ruchu
Plakietka odczytuje ustawienie Twojego urządzenia przez matchMedia, a przełącznik podglądu pokazuje ograniczoną animację bez zmieniania systemu.