Fałszywa dychotomia – estetyka a dostępność

W webdevie pokutuje przekonanie, że strona może być albo ładna, albo dostępna. Myślą tak nawet laureaci Awwwards 2020. Problem w tym, że przekonanie to jest całkowicie błędne i często drobne zmiany mogą sprawić, że ładna strona stanie się także o wiele bardziej dostępna.

Animacja, czyli słoń w składzie porcelany

Najczęściej pojawiającym się błędem jest nierespektowanie ustawień użytkownika w zakresie animacji – a dokładniej: animowanie elementów strony nawet wówczas, gdy na poziomie systemu użytkownik ustawił ograniczenie ruchu. Strony internetowe mogą wykrywać tego typu ustawienie przy pomocy media query prefers-reduced-motion. To w połączeniu z funkcją matchMedia pozwala na choćby wczytanie alternatywnej, mniej wodotryskowej wersji witryny, gdy okaże się, ze użytkownik chce bardziej statyczną stronę.

Taka alternatywna wersja nie musi być jakoś mocno odmienna. Strona wciąż może wyglądać bardzo podobnie po usunięciu animacji. Weźmy taką stronę Active Theory. W alternatywnej wersji na ekranie wyświetlałby się po prostu wybrany screen z projektu, najechanie myszką na przycisk nie powodowałoby efektu fali, a tło nie miałoby efektu paralaksy. I to w sumie tyle. Podbić jeszcze kontrast i dodać wyraźniejsze style dla focusu i mamy całkiem dostępną stronę.

Że niby traci się to specyficzne doświadczenie osiągnięte dzięki animacjom? Może – ale równocześnie niskim kosztem pozwalamy ze strony skorzystać o wiele większej liczbie osób, przy jednoczesnym zapewnieniu im porównywalnego doświadczenia (korzystania z takiej samej strony, tyle że bez animacji).

Accessible First

Niemniej myślę, że istnieje lepszy sposób, niż przygotowywanie alternatywnej, bardziej dostępnej wersji – podejście, które można by nazwać Accessible First (z ang. dostępność jako pierwsza). Tak, jak najczęściej zaleca się, by responsywność przygotowywać w podejściu [mobile/content first](mobile/content first), tak być może czas zalecać, by strony tak ogólnie tworzyło się w podejściu priorytetyzującym dostępność.

Założenie jest bardzo proste: zaczynamy od jak najprostszej wersji strony, która po prostu przekazuje treść w dostępny sposób (czyli tak naprawdę zaczynamy w tym samym miejscu, co w mobile/content first). Następnie dodajemy nowe funkcje, przez cały czas pozostając w zgodzie ze standardem WCAG. Tego typu podejście sprawia, że sposób myślenia o stronie przez cały okres jej powstawania skupia się wokół jej dostępności, co pozwala w łatwiejszy sposób ominąć typowe problemy z nią związane. Przykładem mogą być animacje, które nie będą stanowić już niezbędnego elementu doświadczenia użytkownika, ale będą tylko opcjonalnym dodatkiem dla użytkowników, którzy sobie ich życzą. Znów: bardzo podobnie do mobile/content first, w którym poszczególne nowe elementy strony dodawane są w zależności od możliwości urządzenia użytkownika. A w obydwu przypadkach bardzo podobnie do Progressive Enhancement. Cebula w cebuli w cebuli. I z tego cebulowego gulaszu wychodzi pyszne danie. Warte w sumie swojej własnej książki kucharskiej.