Objaśnienie KS 2.3.3:Animacja po interakcji (Poziom AAA)
W skrócie
- Cel
- Ruch nie przeszkadza ani nie rozprasza użytkowników.
- Co zrobić
- Obsługuj preferencje użytkownika dotyczące ruchu i eliminuj niepotrzebne efekty ruchu.
- Dlaczego to jest ważne
- Ludzie mogą cierpieć na chorobę ruchu.
Intencja
Intencją tego kryterium sukcesu jest umożliwienie użytkownikom powstrzymania wyświetlaniu na stronach internetowych animacji. Niektórzy użytkownicy odczuwają rozproszenie uwagi lub nudności w wyniku animowanych treści. Na przykład, jeśli przewijanie strony powoduje ruch elementów (inny niż zasadniczy ruch związany z przewijaniem), może to wywołać zaburzenia przedsionkowe. Reakcje zaburzeń przedsionkowych (ucha wewnętrznego) obejmują zawroty głowy, nudności i bóle głowy. Inną animacją, która często nie jest istotna, jest przewijanie paralaksy. Przewijanie paralaksy ma miejsce, gdy tła poruszają się z inną szybkością niż pierwszy plan. Animacja, która jest niezbędna dla funkcjonalności lub informacji strony internetowej, jest dozwolona w ramach tego kryterium sukcesu.
Kryterium sukcesu Animacja po interakcji ma zastosowanie, gdy interakcja użytkownika inicjuje nieistotną animację. Natomiast 2.2.2 Pauza, zatrzymanie, ukrycie ma zastosowanie, gdy strona inicjuje animację.
Uwaga
Wpływ animacji na osoby z zaburzeniami przedsionkowymi może być dość poważny. Wywołane reakcje obejmują nudności, migrenowe bóle głowy i potencjalną konieczność leżenia w łóżku, aby powrócić do zdrowia.
W jaki sposób witryna internetowa może zmniejszyć ryzyko wywołania zaburzeń przedsionkowych? Wybierz jedno z poniższych rozwiązań. Unikaj stosowania niepotrzebnych animacji. Zapewnij użytkownikom kontrolę umożliwiającą wyłączenie nieistotnych animacji w interakcji użytkownika. Skorzystaj z funkcji ograniczania ruchu w programie użytkownika lub systemie operacyjnym.
A co z ruchem spowodowanym przewijaniem strony przez użytkownika? Przenoszenie nowej treści do rzutni jest niezbędne do przewijania. Użytkownik kontroluje niezbędny ruch przewijania, więc jest to dozwolone. Dodawaj niepotrzebne animacje do interakcji przewijania tylko w odpowiedzialny sposób. Zawsze dawaj użytkownikom możliwość wyłączenia niepotrzebnego ruchu.
Korzyści
-
Zaburzenie przedsionkowe
- Osoby z zaburzeniami przedsionkowymi potrzebują kontroli nad ruchem wywołanym interakcjami. Nieistotny ruch może wywołać reakcje zaburzeń przedsionkowych. Reakcje zaburzeń przedsionkowych (ucha wewnętrznego) obejmują rozproszenie uwagi, zawroty głowy, bóle głowy i nudności.
- Cytat persony: „Zatrzymaj ten dodatkowy ruch! Tak mnie kręcisz, że nie mogę się skoncentrować. Teraz muszę wyłączyć komputer i iść się położyć”.
Przykłady
-
Przewijanie paralaksy z opcją globalnego wyłączenia niepotrzebnego ruchu:
- Witryna zawiera dodatkowe animacje, gdy użytkownik przewija. Elementy dekoracyjne pojawiają się i znikają w poziomie, gdy istotna zawartość strony jest przewijana w pionie. Kontrolka u góry każdej strony pozwala użytkownikowi wyłączyć niepotrzebne animacje. Możliwość wyłączenia niepotrzebnych animacji to ustawienie dostępne w całej witrynie.
-
Przejścia obsługujące preferencję zmniejszania ruchu:
- Witryna zawiera niepotrzebne przejście podczas ładowania nowej treści. Przejście to animacja polegająca na przewracaniu stron, która uwzględnia zapytanie o media CSS zmniejszające ruch. Gdy użytkownik włączy preferencję zmniejszania ruchu, animacja przewracania stron zostanie wyłączona.
-
Niezbędna animacja:
- Aplikacja internetowa udostępnia funkcję tworzenia animowanych sekwencji. W ramach tego narzędzia twórca potrzebuje podglądu animacji.
Powiązane zasoby
Zasoby służą wyłącznie celom informacyjnym. Nie należy traktować ich jako zaleceń.
- Mozilla documentation for 'prefers-reduced-motion' (Dokumentacja Mozilli dla
prefers-reduced-motion
) - Demonstration of 'prefers-reduced-motion' in Webkit (Demonstracja
prefers-reduced-motion
w Webkit) - An Introduction to the Reduced Motion Media Query (Wprowadzenie do zapytania o media - preferencje dotyczące ograniczenia ruchu)
- Designing Safer Web Animations for Motion Sensitivity (Projektowanie bezpieczniejszych animacji internetowych pod kątem czujników ruchu)
- iOS: Reduce Motion on iPhone, iPad or iPod touch (Ograniczenie ruchu na iPhone, iPad lub iPod)
- Mac: Reduce Motion (Ograniczenie ruchu)
- Windows 10: Reduce motion (Ograniczenie ruchu)
Techniki
Każdy numerowany element w tej sekcji reprezentuje technikę lub kombinację technik, które Grupa Robocza WCAG uważa za wystarczające do spełnienia tego kryterium sukcesu. Nie jest jednak konieczne stosowanie tych konkretnych technik. Aby uzyskać informacje na temat stosowania innych technik, zobacz Objaśnienie technik dla kryteriów sukcesu WCAG, szczególnie w sekcji „Inne techniki”.
Techniki wystarczające
- C39: Stosowanie zapytania reduce-motion, aby zapobiegać ruchowi (animacji)
- Gx: Umożliwienie użytkownikom ustawienia preferencji zapobiegających animacji
Kluczowe pojęcia
dodanie kroków między warunkami, aby stworzyć iluzję ruchu lub dać wrażenie płynnego przejścia
jeżeli taki element zostanie usunięty, może to całkowicie zmienić informację lub funkcjonalność treści, a informacja i funkcjonalność nie mogą zostać osiągnięte w inny sposób, zapewniający zgodność