WCAG w sklepie PrestaShop: co widżet załatwia, a czego nie
Europejski akt o dostępności obejmuje handel elektroniczny, więc pytanie „czy mój sklep jest zgodny z WCAG” przestało być teoretyczne. Najczęstsza odpowiedź, jaką sklepy dostają od sprzedawców oprogramowania, brzmi „zainstaluj widżet”. Warto wiedzieć, w którym miejscu ta odpowiedź przestaje wystarczać.
Co widżet naprawdę robi
Widżet ułatwień dostępu to nakładka: pływający przycisk, spod którego odwiedzający włącza wysoki kontrast, powiększenie tekstu, skalę szarości, podkreślenie odnośników, wyraźne obramowanie elementu wybranego klawiaturą i zatrzymanie animacji.
To są prawdziwe udogodnienia i komuś realnie pomagają, zwłaszcza osobom słabowidzącym, które nie korzystają z czytnika ekranu, ale potrzebują większego tekstu albo mocniejszego kontrastu. Widżet jest też widocznym sygnałem, że sklep o dostępność dba.
Czego widżet nie zrobi
Audyt zgodności ocenia stronę bez nakładki. Sprawdza kod, nie przełączniki. Sześć rzeczy, które musi mieć motyw, a których widżet nie załatwi:
Opisy alternatywne zdjęć
Każde zdjęcie niosące informację potrzebuje opisu alternatywnego. W PrestaShop pole to wypełnia się przy
zdjęciu produktu; puste alt w katalogu z kilkuset produktami to najczęstsze pojedyncze uchybienie,
jakie widzimy u klientów.
Hierarchia nagłówków
Jeden H1 na stronie, bez przeskoków poziomów. Motywy PrestaShopa lubią skakać z H1
prosto na H4, bo tak wygodniej było ustawić rozmiar czcionki. Czytnik ekranu buduje z nagłówków
spis treści strony, więc dziura w hierarchii jest dziurą w nawigacji.
Etykiety pól formularzy
Każde pole musi mieć etykietę powiązaną atrybutem for. Placeholder nie jest etykietą: znika
po rozpoczęciu pisania i czytnik ekranu nie czyta go jako nazwy pola. Dotyczy to zwłaszcza kasy, gdzie pól jest
najwięcej i gdzie błąd kosztuje najdrożej.
Obsługa z klawiatury
Cały sklep musi dać się obsłużyć bez myszy: od wyszukiwarki, przez filtry, po złożenie zamówienia. Warto przejść tę ścieżkę samodzielnie. Otwórz sklep, odłóż mysz i spróbuj kupić produkt samym tabulatorem; miejsca, w których utkniesz, to lista rzeczy do poprawienia. Najczęstsze pułapki to rozwijane menu otwierane wyłącznie najechaniem i modale, z których nie da się wyjść klawiszem Escape.
Kontrast wynikający z palety
Kontrast tekstu do tła musi być odpowiedni domyślnie, a nie po włączeniu trybu kontrastowego. Jasnoszary tekst na białym tle jest niezgodny nawet wtedy, gdy widżet potrafi go pociemnić na życzenie. To zmiana w palecie motywu, nie w nakładce.
Komunikaty błędów
Błąd walidacji formularza musi być powiązany z polem i ogłaszany czytnikowi ekranu. Czerwona ramka to informacja wyłącznie dla osoby widzącej.
Od czego zacząć
Kolejność, która daje najwięcej przy najmniejszym nakładzie:
- Przejdź kasę samą klawiaturą i napraw to, co blokuje.
- Sprawdź kontrast podstawowych kolorów motywu.
- Uporządkuj hierarchię nagłówków na stronie głównej, listingach i karcie produktu.
- Uzupełnij opisy alternatywne, zaczynając od produktów, które sprzedają się najlepiej.
- Dopiero potem dołóż widżet.
Dokumentacja naszego widżetu opisuje wszystkie dziewięć ustawień i tę samą granicę, którą opisaliśmy wyżej. Kartę modułu znajdziesz tutaj. Jeśli potrzebujesz poprawek w samym motywie, to też robimy.