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ę.

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”.