Zapewne nawet nie zdajesz sobie sprawy z tego jak wiele osób z zaburzeniami wzroku, słuchu, ruchu czy funkcji poznawczych może korzystać z Twojej strony. Z danych statystycznych wynika, że w Polsce liczba osób niepełnosprawnych wynosi około 4,7 mln, czyli 12,2% ludności! Badanie przeprowadzone pod koniec 2014 r. pokazuje, że 42% osób jest umiarkowanie niepełnosprawnych, 28% znacznie niepełnosprawnych a 25% posiada orzeczenie o lekkim stopniu niepełnosprawności. Duży odsetek ludzi na świecie ma także różnego typu zaburzenia związane ze ślepotą kolorów. Cierpi na nią średnio 1 na 12 mężczyzn i 1 na 200 kobiet.
WCAG czyli Web Content Accessibility Guidelines to zbiór dokumentów opracowanych i opublikowanych przez Web Accessibility Initiative, w których zawarto wytyczne dotyczące projektowania produktów cyfrowych z uwzględnieniem potrzeb osób z niepełnosprawnościami i zaburzeniami różnego typu. Obecnie obowiązujący standard to WCAG 2.1, który pod koniec 2019 r. wprowadzono także w Polsce. Osoby korzystające z internetu, często czynne zawodowo, ale posiadające pewne niepełnosprawności powinny mieć możliwość bezproblemowego poruszania się w sieci, na każdej stronie internetowej, w tym również Twoim sklepie. Sprawdź jak możesz zapewnić podstawową wygodę korzystania dzięki 10 zasadom, które powinieneś zastosować w swoim sklepie.
1. Informacje nietekstowe
Każda informacja nietekstowa powinna zapewnić alternatywną metodę zapoznania się z treścią. Wyjątkiem są elementy, które pełnią rolę wyłącznie dekoracyjną. Pozostałe grafiki, zdjęcia, banery, ilustracje powinny zawierać tzw. atrybut ALT (alternatywny), który zazwyczaj umieszcza się w kodzie strony. Tego typu opis pomaga w zapoznawaniu się z treścią strony osobom korzystającym z czytników. Jeżeli grafika potrzebna jest do wyjaśnienia kontekstu, wówczas koniecznie należy uzupełnić atrybut ALT.
Częstym błędem w sklepach jest zamieszczanie grafiki z gotowym tekstem na banerze – niestety żaden czytnik nie zidentyfikuje, że dana grafika zawiera tekst, lecz potraktuje ją jak jeden obraz. Pamiętaj, że dobrze umieszczony baner to grafika, zdjęcie lub ilustracja oraz odpowiednio zakodowany tekst na nim (nie stanowiący części grafiki). Element graficzny w takim wypadku nie musi posiadać uzupełnionego tekstu alternatywnego, jeśli będzie pełnił funkcję dekoracyjną. Natomiast tekst na nim będzie bez problemu czytelny dla specjalnych programów dla osób niewidomych i niedowidzących.
2. Materiały video
Muszą zawierać napisy lub transkrypcje, które przedstawiają nie tylko dialogi, ale także opisują informacje dźwiękowe, np. śmiech, szum morza, dźwięk samochodu. Użytkownik musi mieć możliwość włączenia lub zatrzymania video lub dźwięku oraz kontrolowania głośności odtwarzania.
Pamiętaj, aby film video nie odtwarzał się automatycznie, tym bardziej z dźwiękiem. Użytkownicy powinni mieć pełną kontrolę nad stroną i doskonale wiedzieć, co się na niej dzieje. Jeśli natomiast chodzi o inne efekty na stronie, jak na przykład animacje, nie powinny one migać częściej niż 3 razy na sekundę, aby nie dezorientować użytkowników i powodować dyskomfortu u osób cierpiących na epilepsję fotogenną.
3. Mapa strony
Struktura informacji na stronie powinna być dostępna w formie tekstowej. Dzięki temu użytkownik będzie mógł zapoznać się ze wszystkimi kategoriami i podkategoriami dostępnymi w sklepie, poprzez szybkie przejście przez jej treść za pomocą klawiatury lub czytnika.
4. Wyróżnione informacje
Zaplanuj treści tak, aby najważniejsze informacje były dobrze widoczne. Użycie koloru nie może być jedyną formą podkreślenia pewnej informacji, wskazania akcji, wymuszenia odpowiedzi czy rozróżnienia elementów.
Komunikaty powinny być jasne w przekazie i tekstowo sygnalizować skutek wyboru danej opcji, np. po dodaniu produktu do koszyka nie wystarczy jedynie krótki komunikat, znikający po pewnym czasie i zmiana koloru nazwy produktu na zielony, ale warto także jasno zakomunikować poprzez treść: “Produkt został dodany do koszyka”. Informacja ta nie powinna także automatycznie znikać, tylko dać możliwość wyłączenia jej lub przejścia do koszyka, aby użytkownik mógł się w pełni zapoznać z komunikatem i zadecydować o dalszym działaniu w sklepie.
5. Poruszanie się po stronie za pomocą klawiatury
Wszystkie funkcjonalności strony muszą być dostępne dla użytkowników posługujących się wyłącznie klawiaturą. Jeżeli posługiwanie się stroną za pomocą klawiatury jest możliwe poprzez inne metody niż przyjęte (za pomocą strzałek, tab, innych skrótów), użytkownik powinien być poinformowany o tym, jak powinien się po danej stronie poruszać. Upewnij się także, czy w Twoim sklepie działają wszystkie ogólnie przyjęte skróty klawiszowe.
6. Limity czasowe
Jeżeli pewien proces jest ograniczony w czasie (np. proces składania zamówienia czy czas na dokonanie płatności), użytkownik może ten czas wydłużyć lub wyłączyć limit. Pamiętaj o osobach, które wolniej obsługują strony i daj im komfort zakupów w Twoim sklepie, aby nie stresowali się ograniczeniami czasowymi. Jeśli nie chcesz jednak, aby limit czasu był wyłączony zupełnie, zastosuj ograniczenie do minimum 20 godzin.
7. Kolor i kontrast
Elementy na stronie takie jak tekst czy przyciski powinny mieć kontrast 4,5:1 w stosunku do ich tła. Dla większych rozmiarów grafik lub tekstów o foncie wielkości między 14 a 18 pkt kontrast może wynosić 3:1. Własność tą sprawdzisz za pomocą różnych narzędzi (np. plugin Stark dla programów do projektowania) lub stron (np. webaim.org, contrast-ratio.com). Możesz także niektóre elementy na swojej stronie zbadać dzięki narzędziu dla programistów w dowolnej przeglądarce.
8. Oznaczenia
Aby nawigacja na stronie była zrozumiała, zamieść tytuły na każdej podstronie. Dzięki temu użytkownik będzie wyraźnie widział na jakiej stronie się znajduje, nie tylko za pomocą mało widocznych okruszków (tzw. breadcrumbs). Linki opisuj tekstowo (np. “Czytaj dalej” przy skrócie artykułu z bloga zamiast “Kliknij tutaj”) lub zamieszczaj je w takim kontekście, który pozwoli użytkownikom zrozumieć jego przeznaczenie. Pamiętaj też, aby ikony były odpowiednio podpisane, powinny posiadać etykiety. Zadbaj o to, by wszystkie elementy na stronie miały swoje miejsce, nie powielały się, były konsekwentne, zamieszczone w odpowiednim kontekście.
9. Przejścia na stronie
Sprawdź, czy w Twoim sklepie nie ma niejasnych przejść między podstronami. Zwróć uwagę na to, jak rozwijają się elementy typu dropdown, w jaki sposób działają w wersji desktopowej treści dostępne w stanie hover. Ważne, aby najechanie na element interfejsu nie oznaczało zmiany kontekstu. Użytkownicy powinni za pomocą kliknięcia, jasnego wyboru, przechodzić na daną podstronę. W innym wypadku może to spowodować ich dezorientację i zbyt szybką oraz niezrozumiałą zmianę kontekstu.
10. Informacja o błędach
Zastosuj walidacje w formularzach. Opisz odpowiednio pole w formularzu, nie tylko za pomocą wskazania miejsca błędu. Dobrze opisany błąd posiada odpowiednią etykietę i wskazuje sposób prawidłowego naprawienia go. Nie stosuj tego samego komunikatu do wszystkich pól, lecz opisz każde pole osobno. Przykładowo, w wypadku błędu w adresie e-mail przekaż użytkownikowi informację, że w danym polu jest błąd, który należy naprawić a prawidłowy format adresu to nazwa@email.com.
Jako projektanci UX zawsze podkreślamy ważność dostępności strony. Zależy nam na tym, aby była ona bez problemu obsługiwana przez wszystkich użytkowników, dlatego przekazujemy kluczowe wytyczne programistom wdrażającym strony. Wiesz już jak duża część Twoich potencjalnych klientów może mieć problemy podczas dokonywania zakupów, jeśli nie zastosujesz chociaż podstawowych zasad standardu WCAG. Pamiętaj, że problemy mogą mieć nawet osoby tymczasowo unieruchomione, np. ze złamaniem ręki, które jeszcze dotkliwiej odczują brak możliwości swobodnego korzystania ze sklepu, w którym wcześniej bez problemu dokonywali zakupów. Dzięki wdrożeniu zaleceń satysfakcja z korzystania z Twojej strony wzrośnie, wybijesz się na tle konkurencji, która jeszcze nie stosuje się do zasad (niestety nadal jest to przeważający odsetek sklepów) oraz zyskasz lojalnych klientów, którzy docenią Twój wkład na rzecz ułatwienia im poruszania się w sieci.
