Dostępny ruch: projektowanie z myślą o preferowaniu ograniczonego ruchu bez utraty znaczenia
Jak zaprojektować ruch uwzględniający ustawienia ograniczonego ruchu i zaburzenia przedsionkowe: czego wymaga WCAG, co usunąć, co zachować i jak testować.
Rdzeń na wynos
Gdy użytkownik włączy zredukowany ruch, zachowaj znaczenie każdej animacji, ale usuń ruch: zamień slajdy, powiększenia i paralaksę na krótkie zanikania lub natychmiastowe zmiany, zatrzymaj pętle automatycznego odtwarzania i nigdy nie polegaj na samym ruchu, aby coś przekazać. W Internecie wykryj ustawienie za pomocą zapytania o preferowane multimedia o zmniejszonym ruchu.
Dlaczego to ma znaczenie
Dla niektórych ruch na ekranie to nie kwestia gustu. W3C zauważa, że animacja może wywołać zaburzenia przedsionkowe, z reakcjami obejmującymi nudności, migrenę, a w ciężkich przypadkach konieczność odpoczynku w łóżku w celu wyzdrowienia. Systemy operacyjne pozwalają użytkownikom prosić o mniejszą ilość ruchu, a w Internecie żądanie to jest prezentowane jako zapytanie o media preferujące ograniczony ruch. Jego wartość zmniejsza się, gdy użytkownik włączy to ustawienie.
O co prosi WCAG
Dwa kryteria sukcesu WCAG obejmują ruch. 2.2.2 Wstrzymaj, zatrzymaj, ukryj dotyczy ruchu rozpoczynającego się automatycznie, takiego jak karuzele i animacje zapętlone, i wymaga sposobu na jego wstrzymanie, zatrzymanie lub ukrycie. 2.3.3 Animacja z interakcji (poziom AAA) dotyczy ruchu wywołanego interakcją użytkownika i sugeruje unikanie niepotrzebnych animacji, oferowanie możliwości ich wyłączenia lub użycie ustawienia redukcji ruchu w systemie operacyjnym. Nawet jeśli AAA nie jest wymagane, przestrzeganie go jest dobrą praktyką.
Usuń ruch, zachowaj sens
Ograniczony ruch nie oznacza braku sprzężenia zwrotnego. Użytkownik, który naciśnie przycisk, nadal musi wiedzieć, że zadziałał. Celem jest utrzymanie zmiany stanu i zaprzestanie podróży.
- Usuń lub zmniejsz: duże slajdy, powiększenia, paralaksę, ruch połączony z przewijaniem, obracanie, pętle automatycznego odtwarzania i wideo w tle.
- Zachowaj: zmiany koloru i krycia, wskaźniki ostrości, krótkie przejścia stanów, informacje o postępie.
- Zastąp: przejścia stron i paneli krótkim przejściem lub natychmiastową zmianą.
- Nigdy: używaj ruchu jako jedynego sposobu na pokazanie błędu, zmiany lub nowego elementu.
Wdrażanie tego
W Internecie zawiń nieistotny ruch w @media (preferuje-redukowany-ruch: brak preferencji) lub zastąp go wewnątrz @media (preferuje-redukowany-ruch: redukuj). W JavaScript przeczytaj window.matchMedia('(prefers-reduced-motion: stress)') i nasłuchuj zmian. Platformy natywne udostępniają to samo ustawienie: SwiftUI, UIKit i Android pozwalają to sprawdzić. Jeśli Twój system projektowy zawiera żetony ruchu, zdefiniuj dla każdego z nich zredukowany wariant, aby każdy komponent zachowywał się w ten sam sposób.
Testowanie
Włącz ograniczony ruch w swoim systemie operacyjnym i przejrzyj każdy przepływ klawiszy. Sprawdź, czy nic ważnego nie zostało utracone, czy żadna pętla nie uruchamia się automatycznie i czy przewijanie nie powoduje przeniesienia treści poza to, co robi samo przewijanie. Narzędzia programistyczne przeglądarki mogą również emulować to ustawienie.
Fragment wdrożenia produkcyjnego
/* Default: motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.panel { transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms; }
.panel[data-state="closed"] { transform: translateY(24px); opacity: 0; }
}
/* Reduced motion: keep the state change, drop the travel */
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms linear; }
.panel[data-state="closed"] { opacity: 0; }
}
/* JavaScript: read the setting and react to changes */
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
let reduceMotion = query.matches;
query.addEventListener('change', (e) => { reduceMotion = e.matches; });Klucz Principles do zapamiętania
- Ruch może u niektórych osób wywołać chorobę fizyczną; szanuj ustawienie
- Usuń podróż, zoom, paralaksę i automatyczne odtwarzanie; Zachowaj zmiany stanu i opinie
- WCAG 2.2.2 obejmuje ruch automatyczny; 2.3.3 obejmuje ruch wynikający z interakcji
- Wykryj ustawienie z preferencjami o zmniejszonym ruchu i na każdej platformie natywnej
- Zaprojektuj zredukowany wariant każdego żetonu ruchu
Często zadawane pytania
Źródła
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — Dokumenty internetowe MDN
- Motion — Wytyczne Apple dotyczące interfejsu ludzkiego