Dostępne animacje z prefers-reduced-motion
Nauczy się Pan/Pani uwzględniać potrzeby dostępności, wyłączając lub ograniczając animacje dla użytkowników wrażliwych na ruch.
Dostępne animacje z prefers-reduced-motion to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Dlaczego ograniczać ruch?
Niektórzy użytkownicy mają zaburzenia przedsionkowe, epilepsję lub inne dolegliwości, przy których animacje mogą być szkodliwe. CSS udostępnia zapytanie medialne prefers-reduced-motion, które pozwala wykryć preferencje systemowe użytkownika i je respektować.
Zapytanie prefers-reduced-motion
Wartości zapytania:
no-preference— użytkownik nie określił preferencjireduce— użytkownik włączył ograniczenie ruchu w ustawieniach systemu operacyjnego
<div class="box"></div>
Opcja nuklearna (niezalecana)
Popularne, lecz prymitywne rozwiązanie, które wyłącza wszystkie animacje. Usuwa ono również przydatne wskazówki ruchowe, które nie powodują dezorientacji:
<div class="box"></div>
Lepsze rozwiązanie: ruch włączany opcjonalnie
Bezpieczniejszy wzorzec polega na definiowaniu animacji wyłącznie dla użytkowników, którzy nie określili preferencji dotyczących ruchu, dzięki czemu domyślny stan pozostaje pozbawiony animacji:
<button class="btn">Button</button>
<div class="card">Card</div>
Zamiana typów animacji
W przypadku użytkowników preferujących ograniczenie ruchu należy zastąpić dezorientujący ruch (translate, scale, rotate) dostępnymi alternatywami (opacity, color):
<div class="card demo-hover">Hover me</div>
Nieskończone animacje
Nieskończone animacje (wskaźniki ładowania, pulsowanie) są szczególnie problematyczne. Należy zapewnić statyczną alternatywę:
<div class="spinner"></div>
Efekty paralaksy
Przewijanie z efektem paralaksy może powodować silną chorobę lokomocyjną. Należy zawsze wyłączać ten efekt u użytkowników preferujących ograniczenie ruchu:
<div class="parallax">Parallax section</div>
Dostęp z poziomu JavaScriptu
Podczas korzystania z Web Animations API lub bibliotek do obsługi przewijania należy sprawdzać preferencję w JavaScriptcie:
<div class="spinner" id="rm-spinner"></div>
<p id="rm-status">Checking preference…</p>
<script>
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
const el = document.getElementById('rm-spinner');
const status = document.getElementById('rm-status');
if (!reducedMotion.matches) {
el.classList.add('spin');
status.textContent = 'Motion allowed — spinning';
} else {
status.textContent = 'Reduced motion — animation skipped';
}
</script>
WCAG a ruch
Wytyczna WCAG 2.3.3 (AAA) wymaga, aby animacje uruchamiane interakcją można było wyłączyć. Użycie prefers-reduced-motion jest zalecanym podejściem CSS do spełnienia tego kryterium.
Testowanie ograniczenia ruchu
W Chrome DevTools → karcie Rendering należy włączyć opcję "Emulate CSS prefers-reduced-motion: reduce", aby przeprowadzić test bez zmieniania ustawień systemu operacyjnego. W systemie macOS: Preferencje systemowe → Dostępność → Ogranicz ruch.
Udokumentowanie celu
Animacje należy opatrywać komentarzami wyjaśniającymi, czy pełnią funkcję użytkową, czy są wyłącznie dekoracyjne. Animacje funkcjonalne (wskazujące proces lub postęp) powinny mieć dostępne alternatywy; dekoracyjne można po prostu usunąć.
Szybkie sprawdzenie
Jak najlepiej obsłużyć prefers-reduced-motion w przypadku efektu unoszenia karty po najechaniu?
Podsumowanie
Do wykrywania wrażliwości na ruch należy używać prefers-reduced-motion: reduce. Zamiast wyłączać wszystkie animacje, należy zapewnić pozbawiony ruchu stan domyślny, a animacje włączać opcjonalnie w zapytaniach no-preference. W przypadku użytkowników ograniczających ruch należy zastępować dezorientujące animacje transformacji przejściami opacity lub color. Testy należy przeprowadzać za pomocą emulacji w DevTools.
Często zadawane pytania
Czy lekcja „Dostępne animacje z prefers-reduced-motion” jest bezpłatna?
Tak — pełny tekst „Dostępne animacje z prefers-reduced-motion” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Dostępne animacje z prefers-reduced-motion”?
Nauczy się Pan/Pani uwzględniać potrzeby dostępności, wyłączając lub ograniczając animacje dla użytkowników wrażliwych na ruch. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Dostępne animacje z prefers-reduced-motion”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Składnia @keyframes i właściwość animation
- Kierunek animacji, fill-mode i iteracje
- Łączenie i sekwencjonowanie animacji
- Dostępne animacje z prefers-reduced-motion