Checklista WCAG AA dla sklepu internetowego: 15 punktów do sprawdzenia
Poniższa lista to najczęstsze problemy dostępności, które widzimy w polskich sklepach internetowych. Większość z nich możesz sprawdzić samodzielnie, bez specjalistycznej wiedzy — a część wykryje za Ciebie nasz darmowy skaner. Punkty są uporządkowane od najprostszych do najtrudniejszych.
Tekst i obrazy
1. Kontrast tekstu (WCAG 1.4.3)
Jasnoszary tekst na białym tle to klasyka polskich sklepów — i jeden z najczęstszych błędów. Zwykły tekst musi mieć kontrast min. 4,5:1, duży (nagłówki powyżej ok. 24 px) — 3:1. Sprawdź szczególnie: ceny, opisy produktów, teksty w stopce, komunikaty o promocjach.
2. Teksty alternatywne zdjęć produktów (WCAG 1.1.1)
Każde zdjęcie produktu potrzebuje atrybutu alt z opisem, np. alt="Czarny plecak miejski 20 l z kieszenią na laptopa".
Osoba niewidoma „ogląda” sklep czytnikiem ekranu — bez opisów kupuje w ciemno.
Zdjęcia czysto dekoracyjne oznacz pustym alt="".
3. Powiększanie tekstu do 200% (WCAG 1.4.4)
Osoba słabowidząca powiększa stronę w przeglądarce (Ctrl i +). Sprawdź, czy przy 200%
nic się nie „rozjeżdża”: ceny nie uciekają poza ekran, przyciski „Kup” są widoczne.
Nie blokuj pinch-zoomu na telefonie (user-scalable=no to naruszenie).
Nawigacja i klawiatura
4. Cały zakup bez myszki (WCAG 2.1.1)
Odłóż myszkę i przejdź klawiszem Tab przez cały proces: wyszukanie produktu → karta produktu → koszyk → formularz dostawy → płatność. Jeśli w którymś miejscu „utkniesz” — klient z niepełnosprawnością też utknie.
5. Widoczny fokus (WCAG 2.4.7)
Przechodząc klawiszem Tab, musisz wyraźnie widzieć, który element jest aktywny
(obramowanie, podświetlenie). Wiele szablonów usuwa outline „bo brzydko wygląda” —
to błąd. Możesz go ładnie ostylować, ale nie usuwaj.
6. Link „Przejdź do treści” (WCAG 2.4.1)
Użytkownik klawiatury nie powinien przechodzić przez 30 pozycji menu na każdej podstronie. Pierwszy element na stronie powinien pozwalać przeskoczyć prosto do treści głównej.
7. Sensowne tytuły stron (WCAG 2.4.2)
Każda podstrona powinna mieć unikalny <title>: „Plecaki miejskie – Sklep X”,
a nie wszędzie „Sklep X”. Tytuł to pierwsze, co słyszy użytkownik czytnika ekranu.
Formularze i proces zakupu
8. Etykiety pól formularzy (WCAG 3.3.2)
Każde pole (imię, adres, kod pocztowy, e-mail) musi mieć powiązaną etykietę
(<label>), a nie tylko placeholder — placeholder znika po wpisaniu tekstu
i nie jest czytany poprawnie przez wszystkie czytniki.
9. Czytelne komunikaty błędów (WCAG 3.3.1, 3.3.3)
„Błąd formularza” to za mało. Napisz, co jest nie tak i jak poprawić: „Kod pocztowy powinien mieć format 00-000”. Błąd nie może być zakomunikowany samym kolorem (czerwona ramka nic nie powie osobie niewidomej).
10. Przyciski z czytelną nazwą (WCAG 4.1.2)
Ikona koszyka bez żadnego tekstu to dla czytnika ekranu „przycisk” — bez informacji, co robi.
Dodaj aria-label="Dodaj do koszyka" lub tekst widoczny.
Struktura i multimedia
11. Hierarchia nagłówków (WCAG 1.3.1)
Nagłówki to spis treści strony: jeden <h1>, potem <h2>,
<h3> — bez przeskakiwania poziomów „bo tak ładniej wygląda”.
Wygląd zmieniaj w CSS, nie poziomami nagłówków.
12. Język strony (WCAG 3.1.1)
Upewnij się, że masz <html lang="pl">. Bez tego czytnik ekranu
przeczyta polską ofertę z angielskim akcentem — brzmi komicznie, ale jest realnym problemem.
13. Napisy i transkrypcje do wideo (WCAG 1.2.2)
Film prezentujący produkt? Dodaj napisy. To pomaga nie tylko osobom niedosłyszącym — większość użytkowników ogląda wideo bez dźwięku.
14. Rozmiar elementów dotykowych (WCAG 2.5.8)
Przyciski i linki na telefonie powinny mieć min. 24×24 px (zalecane 44×44 px). Drobne „×” zamykające popup czy maleńkie linki w stopce frustrują wszystkich — nie tylko osoby z niepełnosprawnościami.
15. Deklaracja dostępności
Poinformuj użytkowników o stanie dostępności swojej strony i daj im kanał zgłaszania problemów. To buduje zaufanie i pokazuje dobrą wolę — wygeneruj deklarację za darmo.
Od czego zacząć?
Nie musisz naprawiać wszystkiego naraz. Zacznij od darmowego skanu, który wskaże punkty z tej listy występujące u Ciebie, potem popraw kontrasty i atrybuty alt (najczęstsze i najtańsze naprawy), a na końcu zabierz się za klawiaturę i formularze. Pełny raport PDF dla całej domeny (do 20 stron) zamówisz za 149 zł.
Sprawdź punkty 1–12 automatycznie
Nasz skaner sprawdza większość technicznych punktów z tej listy w 60 sekund.