blog na temat dostępności stron internetowych

Przejdź do głównej treści

Ruchome treści i animacje

Istnieje wiele rodzajów animowanych treści zamieszczanych na stronach internetowych. Do najczęściej spotykanych należą tzw. karuzele i slidery, składające się ze zmieniających się zdjęć lub paneli z tekstem, reklamy w postaci animowanych obrazków, czy też paski z przewijającą się informacją (np. przedstawiające najnowsze wiadomości lub notowania giełdy). Aby komponenty te nie przeszkadzały użytkownikom w dostępie do informacji zamieszczonej na stronie, tworząc je należy pamiętać o kilku zasadach.

Dla kogo ruchome treści mogą być problematyczne?

Istnieje kilka grup użytkowników, dla których treści te mogą stanowić utrudnienie. Należą do nich:

  • osoby z zaburzeniami kognitywnymi, których ruchome treści mogą niepotrzebnie rozpraszać. Podczas gdy część użytkowników potrafi skoncentrować wyłącznie na tym, co w danym momencie czyta, niezależnie od tego co dzieje się dokoła, dla innych osób może być to znacznie trudniejsze, lub wręcz niemożliwe
  • osoby z zaburzeniami układu przedsionkowego, u których pewne rodzaje animacji i ruchu na stronie mogą wywołać zawroty głowy i nudności. Jest tak szczególnie w przypadku ruchu na dużą skalę, np. zmieniającego się tła pokrywającego cały ekran. Kilka lat temu zdało sobie z tego sprawę Apple, gdy okazało się, że animowane efekty przejścia w iOS7 powodowały u niektórych osób bóle głowy i objawy podobne do choroby lokomocyjnej (Why iOS 7 is making some users sick)
  • osoby chorujące na epilepsję – niektóre animacje (błyski) mogą spowodować atak padaczki
  • osoby cierpiące na migreny – ja zaliczam sie do tej grupy (i może dlatego nie jestem fanką niepotrzebnych animacji i wszelkiego rodzaju automatycznych sliderów na stronach internetowych). Jak sama miałam nieprzyjemność nie raz się przekonać, ruchome treści na stronie internetowej są w stanie wywołać atak migreny
  • osoby korzystające z czytników ekranu, dla których interakcja z pojawiającą się i znikającą treścią może być szczególnie trudna i dezorientująca.

Główne zasady stosowania ruchomych treści i animacji

W pierwszej kolejności sądzę, że warto zastanowić się, czy zamieszczenie ruchomych treści na stronie jest w danym przypadku w ogóle potrzebne. Czy naprawdę komponenty te pełnią jakąś rolę, służą realizacji jakiegoś celu?
Dla przykładu, strona internetowa mojej lokalnej przychodni została przed świętami Bożego Narodzenia przyozdobiona motywem padającego śniegu. Osoba, która na to wpadła, zapewne uznała to za świetny pomysł – ot, taki przyjemny świąteczny motyw. Z punktu widzenia użytkownika (czytaj: mnie) wyglądało to jednak zupełnie inaczej – padający nieprzerwanie śnieżek przesłaniał tekst, wskutek czego zmuszona byłam do rozszyfrowania godzin otwarcia przychodni na podstawie fragmentów tekstu sporadycznie wyłaniającego się spomiędzy płatków śniegu…
Tego typu animacja to dość skrajny przypadek. Ale weźmy pod uwagę choćby karuzele – odkąd kilka lat temu zapanowała na nie moda, mogłoby się wydawać, że żadna strona główna serwisu internetowego nie może się bez niej obejść. Coś, co początkowo wydawało się świetnym sposobem na zmieszczenie dużej ilości informacji na niewielkim obszarze strony, okazało się nie spełniać swojego zadania – niewielu użytkowników zadaje sobie trud obejrzenia kolejnych slajdów. Swojego czasu strona główna BBC składała się w przeważającej części z 4-panelowej karuzeli; każdy panel zawierał tekst oraz zdjęcia i prezentował najnowsze wiadomości z innej kategorii (sport, rozrywka, itd). Okazało się jednak, że jedynie bardzo znikomy procent użytkowników był zainteresowany treścią kolejnych paneli – znakomita większość poprzestawała na pierwszym. I tak w zeszłym roku karuzela zniknęła z głównej strony serwisu bbc.co.uk.

Załóżmy jednak, że zamieszczenie ruchomych treści jest uzasadnione – jak należy je zaimplementować? Wytyczne WCAG 2.0 zalecają, by pamiętać o kilku zasadach:

2.2.2 Wstrzymaj, zatrzymaj, ukryj: w przypadku ruchomych, migotających, przewijających się, bądź automatycznie aktualizowanych informacji obowiązują następujące zasady:

  • ruch, migotanie, przesuwanie: dla każdej ruchomej, migotającej bądź przewijącej się informacji, która 1. zaczyna się automatycznie, 2. trwa dłużej niż 5 sekund i 3. jest prezentowana równolegle z inną treścią, musi istnieć mechanizm, za pomocą którego użytkownik może wstrzymać, zatrzymać bądź też ukryć tę informację, chyba że ruch, migotanie bądź przewijanie jest nieodłączną częścią wykonywanej czynności;
  • automatyczna aktualizacja: dla każdej automatycznie aktualizowanej informacji, która 1. zaczyna się automatycznie i 2. jest prezentowana równolegle z inną treścią, istnieje mechanizm, za pomocą którego użytkownik może tę informację wstrzymać, zatrzymać lub ukryć, bądź też kontrolować częstotliwość aktualizacji, poza przypadkami, w których automatycznie aktualizowanie informacji jest niezbędne dla wykonywanej czynności.

Innymi słowy, w zależności od rodzaju ruchomej treści możemy:

  • ograniczyć animację w czasie (do 5 sekund). Jako przykład może służyć reklama, która miga, by przyciągnąć uwagę użytkowników, ale przestaje po 5 sekundach
  • dać użytkownikom kontrolę nad animacją – na przykład poprzez zapewnienie przycisków, które pozwolą na wstrzymanie animowanej treści i ponowne jej uruchomienie, bądź też poprzez unikanie automatycznego rozpoczynania animacji –np. karuzele lub slidery, które nie zmieniają samoistnie slajdów, lecz mają zapewnione kontrolki, za pomocą których użytkownicy mogą je sami zmieniać
  • pozwolić użytkownikom na ukrycie sekcji zawierającej ruchome treści (przycisk “pokaż” / “ukryj”)
  • zapewnić link do alternatywnej wersji strony, pozbawionej ruchomych treści
  • dodać przycisk, naciśnięcie którego spowoduje odświeżenie strony bez ruchomych treści
  • pozwolić użytkownikom na kontrolę częstotliwości automatycznie aktualizowanej informacji

Warto zwrócić uwagę na punkt 2. kryteria sukcesu 2.2.2 wytycznych WCAG. Wymagania te nie dotyczą ruchomych treści, które prezentowane są w odosobnieniu. Na przykład, wyobraźmy sobie stronę linii lotniczych, na której użytkownik wyszukuje loty. Po zatwierdzeniu szczegółów lotu otwiera się nowa tymczasowa strona, zawierająca animowaną ikonkę reprezentującą postęp wyszukiwania. Ponieważ animacja ta jest jedyną treścią na stronie i przekazuje istotną informację (postęp procesu wyszukiwania), zapewnienie mechanizmu służącego do zatrzymania bądź też ukrycia tej animacji jest zbyteczne, nawet jeśli animacja ta może czasem trwać dłużej niż 5 sekund.

Podsumowanie

Zanim zamieścimy na stronie ruchome treści czy też animację, upewnijmy się, że ma to swoje uzasadnienie i służy jakiemuś celowi, a nie jest jedynie kaprysem projektanta graficznego albo efektem eksperymentów dewelopera.
Jeśli ruch bądź animacja prezentowane są równolegle z inną treścią i trwają dłużej niż 5 sekund, zapewnijmy mechanizm, za pomocą którego użytkownik będzie mógł je kontrolować; pozwólmy na wstrzymanie, zatrzymanie lub ukrycie tych treści, bądź też zapewnijmy alternatywną wersję strony, która będzie ich pozbawiona. W przypadku automatycznie aktualizowanych treści możemy też pozwolić użytkownikom na zmianę częstotliwości aktualizacji.

Dodaj komentarz

Należy wypełnić wszystkie pola oznaczone asteryskiem (*).
Zanim komentarz zostanie opublikowany będzie musiał zostać zatwierdzony przez moderatora.

Możesz wykorzystać następujące elementy HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>