W poprzednim wpisie przedstawiliśmy, czym właściwie jest standard WCAG 2.1 AA. Poniżej przedstawiamy konkretne rozwiązania dostosowania sklepu internetowego zgodnie z czterema zasadami dostępności.
Postrzegalność i opisy alternatywne
WCAG 2.1 opiera się na czterech głównych zasadach: Postrzegalności, Funkcjonalności, Zrozumiałości i Solidności, a ta część dotyczy pierwszej z nich.
- Teksty alternatywne: Każdy obraz produktu powinien mieć opis alternatywny w tagu alt (np. „Czerwona torebka skórzana z srebrną klamrą”). Dotyczy to również ikon koszyka czy logo, a takie opisy są ważne także dla osób niewidomych.
- Kontrast kolorów: Tekst na stronie musi mieć minimalny współczynnik kontrastu 4.5:1 względem tła dla tekstu podstawowego (np. czarny tekst na białym tle).
- Skalowalność tekstu: Strona powinna umożliwiać powiększenie tekstu do 200% bez utraty funkcjonalności.
- Odstępy w tekście: Użytkownicy powinni mieć możliwość dostosowania odstępów między wierszami i akapitami.
Funkcjonalność
- Obsługa klawiatury: Wszystkie funkcje sklepu, takie jak dodawanie produktów do koszyka czy finalizacja zakupu, muszą działać za pomocą klawiatury, a cały proces zakupowy powinien być dostępny bez użycia myszki, co ułatwia obsługę osobom z ograniczeniami ruchowymi.
- Pułapka na klawiaturę: Należy unikać sytuacji, w których użytkownik nie może opuścić elementu za pomocą klawiatury, bo utrudnia to obsługę interfejsu i może blokować proces płatności.
- Widoczny fokus: Elementy interaktywne powinny mieć wyraźny wskaźnik fokusu (np. obramowanie). Ważne też, aby elementy interfejsu miały co najmniej 24 × 24 piksele.
- Pomijanie bloków treści: Dodanie linku „Przejdź do głównej treści” ułatwia nawigację. Użytkownik powinien też być informowany o ograniczeniach czasowych, jeśli występują np. w koszyku lub podczas sesji, tak aby treści poprawnie obsługiwały różne programy użytkownika i potrzeby użytkowników czytników ekranu.
Zrozumiałość
- Język strony: Język strony powinien być określony programowo (np. „pl” dla języka polskiego), w celu ułatwienie korzystania osobom z różnymi ograniczeniami i trudnościami poznawczymi.
- Etykiety formularzy: Pola formularzy (np. dane adresowe) muszą mieć jasne etykiety powiązane z odpowiednimi polami oraz poprawnie przypisane etykiety tekstowe dla czytników ekranowych, tak aby były zrozumiałe dla osób z różnymi rodzajami niepełnosprawności. Nieczytelne formularze utrudniają zakupy i obniżają dostępność.
- Spójna nawigacja: Układ menu i komponentów powinien być jednolity na wszystkich podstronach sklepu, aby zapewnić przewidywalność.
Solidność
- Poprawny kod HTML: Kod strony musi być wolny od błędów, aby technologie wspomagające mogły go poprawnie interpretować, a treść była zgodna z wymaganiami dostępności i czytelna dla różnych programów użytkownika.
- Interaktywne elementy: Każdy przycisk czy link musi mieć określoną nazwę i rolę programową (np. za pomocą ARIA). Wdrożenie dostępności to proces, który wymaga regularnych aktualizacji. Audyt dostępności to pierwszy krok do dostosowania sklepu i zgodności z EAA. Możesz wykonać go samodzielnie albo zlecić jako profesjonalny audyt lub szczegółowy audyt; jego wyniki pokazują obszary do poprawy, takie jak brak tekstów alternatywnych, błędy w procesie płatności czy formularzach oraz brak zgodności z WCAG.
Sklep powinien też zawierać deklarację dostępności z danymi kontaktowymi — jeśli potrzebujesz wsparcia, warto skonsultować zakres zmian przed wdrożeniem.
Dostosowanie strony internetowej do standardów WCAG 2.1 AA nie tylko zwiększa jej dostępność dla osób z niepełnosprawnościami, ale także poprawia ogólną użyteczność i SEO. Dzięki temu sklep staje się łatwiejszy w obsłudze, może zwiększyć konwersję, wzmacnia obsługę klienta, buduje przewagę konkurencyjną i pozytywny wizerunek marki. Użyteczność = korzyść.
