Złoty błysk na przycisku może wskazywać działanie; niekończący się obrót przy akapicie może konkurować z czytaniem. Różnica nie polega na tym, jak kosztownie wygląda efekt, lecz co robi. Przed dodaniem animacji dokończ zdanie: „Ten ruch pomaga komuś zrozumieć…” Jeśli nie ma jasnego zakończenia, efekt jest dekoracją i powinien ustąpić treści. To redakcyjna metoda podejmowania decyzji, nie obietnica lepszej sprzedaży.
Ustal działanie przed efektem
Rozważ kartę artykułu. Nagłówek wyjaśnia temat, fragment daje powód do czytania, a widoczny link otwiera pełny tekst. Krótka zmiana koloru po najechaniu może wzmocnić to działanie. Jeśli jednak bez połysku link wygląda jak zwykły tekst, uwagi wymaga sam projekt. Najpierw sprawdź kontrast, treść i położenie; ruch dodaj później. Telefon nie ma trwałego stanu najechania myszą, więc główne działanie musi być zrozumiałe bez niego.
Zadaj trzy pytania
Co uruchamia animację: wczytanie strony, przewijanie czy świadome działanie? Kiedy się kończy? Czy wynik będzie miał sens bez ruchu? W menu widoczny stan otwarty jest ważniejszy niż długie wsuwanie panelu. Komunikat zakończenia potrzebuje słów, a nie jedynie znikającej iskierki. W liście kontrolnej projektu oddziel efekty dekoracyjne od komunikujących zmianę stanu. Dzięki temu rozmowa jest bardziej użyteczna niż prosta wymiana upodobań i niechęci.
Ograniczenie ruchu nie może usuwać doświadczenia
MDN opisuje prefers-reduced-motion jako sposób respektowania ustawienia urządzenia preferującego mniej nieistotnego ruchu. Nie naprawia ono witryny automatycznie: projektanci i programiści muszą wybrać alternatywę. Zatrzymaj obrót lub zastąp duże przesunięcie natychmiastowym pojawieniem się, zachowując etykiety, dostęp do menu i czytelne stany przycisków. Nie ukrywaj całego animowanego bloku, jeśli zawiera również użyteczne informacje. Sprawdź efekty sterowane JavaScriptem tak samo jak animacje CSS.
Daj odwiedzającym odpowiednią kontrolę
Kryterium WCAG 2.2.2 na poziomie A dotyczy ruchomych informacji, które uruchamiają się automatycznie, trwają ponad pięć sekund i pojawiają się obok innych treści. Przy wskazanych warunkach wymagana jest możliwość ich wstrzymania, zatrzymania lub ukrycia, chyba że ruch jest niezbędny. Automatycznie aktualizowane informacje mają osobne warunki. Nie jest to ogólne przyzwolenie na każdą animację krótszą niż pięć sekund. Kryterium 2.3.3 na poziomie AAA osobno dotyczy wyłączania nieistotnych animacji uruchamianych interakcją. Jeden przełącznik nie dowodzi zgodności całej witryny z WCAG.
Praktyczna kontrola przed publikacją
Przejdź tę samą drogę ze zwykłymi ustawieniami ruchu i z włączonym ograniczeniem ruchu: otwórz menu, przeczytaj kartę, odwiedź artykuł i wróć. Sprawdź, czy treść pozostaje dostępna, a elementy sterujące zachowują znaczące stany. Powtórz z klawiaturą i na telefonie. Tam, gdzie istnieją ustawienia ruchu, sprawdź ich dostępność i jasne etykiety. Na koniec spójrz na stronę po minucie czytania: efekt początkowo atrakcyjny może stać się natarczywy. Celem nie jest usunięcie osobowości witryny, lecz umożliwienie wygodnego korzystania.