Przejdź do treści
Grafika przedstawia w głównej mierze monitor, na którym widoczna jest strona główna serwisu Netflix, która jest przykładem kryterium Animacja po interakcji.Cottonbro Studio z Pexels

WCAG 2.1. – kryterium 2.3.3 – Animacja po interakcji (poziom AAA)

Treść artykułu

Dzisiaj omówimy sobie kryterium 2.3.3 – Animacja po interakcji (poziom AAA) WCAG 2.1.

Być może na pierwszy rzut oka skojarzy Wam się ono z animacjami występującymi na stronie – karuzelami czy innymi elementami, które mogą nam przeszkadzać. Ale nie. Za powyższe odpowiada kryterium 2.2.2 WCAG, które już omówiliśmy. Dzisiaj o innej sytuacji.

Wyobraźcie sobie, że wchodzimy na stronę WWW, przewijamy ją w dół i nagle… dzieją się rzeczy niestworzone.

Przykłady?

  • przewijając stronę, elementy zaczynają animować się i przemieszczać w poziomie,
  • podczas ładowania kolejnych treści, pojawiają nam się kolejne animacje,
  • przewijanie strony wywołuje nam tak zwany efekt paralaksy, podczas którego pierwszy plan i tło strony poruszają się z różną szybkością lub w różnych kierunkach. Przykład takiej animacji: https://www.youtube.com/watch?v=s_mpywgbQVo&ab_channel=WebWavePolska

Dobrze, a co jeżeli chcemy, by nasza strona nie była jednak taka “nudna” i chcemy zostawić na niej nutkę szaleństwa? Rozwiązanie jest jedno – przycisk umieszczony u góry strony, który pozwala nam te efekty zatrzymać.

Komu spełnienie tego kryterium pomoże? 

Głównie myślimy tu o osobach, mających problemy z zawrotami głowy. Dla takich osobach nadmierna ilość animacji mogłaby wywołać mdłości, bóle głowy czy po prostu rozproszenie uwagi.

Czy mamy jakieś wyjątki? 

Jak zawsze. Przykładami takich stron, na których takie animacje mogą być niezbędne są między innymi narzędzia do tworzenia prezentacji online, w których Użytkownik może dodać przejścia między slajdami. Innym przykładem są platformy do tworzenia animacji przez samych Użytkowników. 

Małgorzata Szymczak

Małgorzata Szymczak

Accessibility Specialist & Junior Frontend Developer