2.3.3 Animacja po interakcji (Poziom AAA)

Jeżeli po interakcji użytkownika pojawia się animacja ruchowa, użytkownik musi mieć możliwość jej wyłączenia – chyba że ta animacja jest istotna dla funkcjonalności albo przekazywanych informacji.

O co chodzi w kryterium 2.3.3 Animacja po interakcji?

Chodzi o animacje, które uruchamiają się dlatego, że użytkownik coś zrobił, np. kliknął, przewinął, rozwinął sekcję, przeszedł do kolejnego kroku.

Kluczowe jest słowo ruchowa: bo to właśnie rych bywa problemem (np. przesuwanie, płynne przejazdy, parallaxa), ponieważ u części osób może wywoływać dyskomfort, zawroty głowy lub nudności. 

Najczęstsze powody niespełnienia kryterium 2.3.3

1. Animacje ruchowe są na stałe i nie ma żadnego mechanizmu, żeby je wyłączyć (np. parallaxa przy scrollu, płynne przeloty ekranu między sekcjami, przesuwające się tła).
2. Mechanizm istnieje, ale nie dotyczy animacji uruchamianych interakcją (np. wyłączasz animacje na stronie głównej, ale w formularzu nadal wszystko rusza po kliknięciu).
3. Animacja jest traktowana jako obowiązkowa „bo tak wygląda nowocześnie”, mimo że nie jest istotna ani dla działania, ani dla zrozumienia informacji (a to są jedyne dopuszczone wyjątki).

Jak sprawdzić, czy strona spełnia 2.3.3?

Weź kluczowe ścieżki: menu, wyszukiwarkę, formularze, koszyk/rejestrację. Wykonuj typowe akcje (klik, scroll, rozwinięcie, przejście dalej) i obserwuj, czy pojawiają się animacje ruchowe. Potem sprawdź, czy da się je wyłączyć i czy po wyłączeniu nadal da się zrobić to samo (bez utraty informacji i funkcji).

Rekomendacje jak spełnić kryterium sukcesu 2.3.3

1. Zapewnij możliwość wyłączenia animacji ruchowych wyzwalanych interakcją – najczęściej robi się to jako przełącznik typu „Wyłącz animacje” albo ustawienie „Ogranicz ruch”.
2. Jeżeli animacja nie jest istotna, po wyłączeniu pokaż wersję statyczną lub bez ruchu (np. bez parallax, bez płynnego przewijania, bez „przelotów” całego widoku).
3. Jeżeli animacja jest istotna (czyli bez niej użytkownik nie zrozumie informacji albo nie wykona czynności), zostaw ją, ale nie dodawaj do niej „dodatkowego ruchu dla efektu”. Wyjątek dotyczy tylko tego, co naprawdę konieczne. 

Pełny tekst kryterium 2.3.3 Animacja po interakcji 

Animacja ruchowa wyzwalana przez interakcję może być wyłączona, chyba że animacja jest istotna dla funkcjonalności lub przekazywanych informacji.

Źródło: https://www.w3.org/Translations/WCAG21-pl/#animacja-po-interakcji

Chcesz wiedzieć więcej?

• 2.1.1 Klawiatura - poziom A
• 2.1.2 Brak pułapki na klawiaturę - poziom A
• 2.1.3 Klawiatura (bez wyjątków) - poziom AAA
• 2.1.4 Jednoznakowe skróty klawiaturowe - poziom A
• 2.2.1 Dostosowanie czasu - poziom A
• 2.2.2 Pauza, zatrzymanie, ukrycie - poziom A
• 2.2.3 Brak czasu - poziom AAA
• 2.2.4 Przerywanie - poziom AAA
• 2.2.6 Ostrzeżenie o limicie czasu - poziom AAA
• 2.3.1 Trzy błyski lub wartości poniżej progu - poziom A
• 2.3.2 Trzy błyski - poziom AAA
• 2.3.3 Animacja po interakcji (Poziom AAA)
• 2.4.1 Możliwość pominięcia bloków - poziom A
• 2.4.2 Tytuł strony - poziom A
• 2.4.3 Kolejność fokusu - poziom A
• 2.4.4 Cel łącza (w kontekście) - poziom A
• 2.4.5 Wiele dróg - poziom AA
• 2.4.6 Nagłówki i etykiety - poziom AA
• 2.4.7 Widoczny fokus - poziom AA
• 2.4.8 Lokalizacja - poziom AAA
• 2.4.9 Cel łącza (z samego łącza) - poziom AAA
• 2.4.10 Nagłówki sekcji - poziom AAA
• 2.5.1 Gesty wskazujące - poziom A
• 2.5.2 Rezygnacja ze wskazania - poziom A
• 2.5.3 Etykieta w nazwie - poziom A
• 2.5.4 Aktywowanie ruchem - poziom A
• 2.5.5 Rozmiar celu - poziom AAA
• 2.5.6 Równoległy mechanizm wprowadzania danych - poziom AAA