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ść
- Teksty alternatywne: Każdy obraz produktu powinien mieć opis alternatywny (np. „Czerwona torebka skórzana z srebrną klamrą”). Dotyczy to również ikon koszyka czy logo.
- Kontrast kolorów: Tekst na stronie musi mieć minimalny współczynnik kontrastu 4.5:1 względem tła (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.
- Pułapka na klawiaturę: Należy unikać sytuacji, w których użytkownik nie może opuścić elementu za pomocą klawiatury.
- Widoczny fokus: Elementy interaktywne powinny mieć wyraźny wskaźnik fokusu (np. obramowanie).
- Pomijanie bloków treści: Dodanie linku „Przejdź do głównej treści” ułatwia nawigację.
Zrozumiałość
- Język strony: Język strony powinien być określony programowo (np. „pl” dla języka polskiego).
- Etykiety formularzy: Pola formularzy (np. dane adresowe) muszą mieć jasne etykiety powiązane z odpowiednimi polami.
- Spójna nawigacja: Układ menu i komponentów powinien być jednolity na wszystkich podstronach sklepu.
Solidność
- Poprawny kod HTML: Kod strony musi być wolny od błędów, aby technologie wspomagające mogły go poprawnie interpretować.
- Interaktywne elementy: Każdy przycisk czy link musi mieć określoną nazwę i rolę programową (np. za pomocą ARIA).
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. To inwestycja w bardziej inkluzywną przyszłość internetu i… lepszą konwersję Twojego e-commerce. Użyteczność = korzyść.
