Od 28 czerwca 2025 r. sklepy internetowe i platformy e-commerce w Polsce (i całej UE) muszą spełniać wymagania dostępności zgodne ze standardem WCAG 2.1 na poziomie AA (w praktyce wg normy EN 301 549). To nie tylko „ładny gest” wobec osób z niepełnosprawnościami — to realne ryzyko kar, skarg klientów i utraconych konwersji. Dobra wiadomość? Dużą część braków da się wychwycić i naprawić dość szybko, bez wywracania całej platformy.
Poniżej: krótkie dopasowanie zaleceń do realiów e-commerce oraz szybki plan audytu + checklisty do użycia od ręki.
Na co wpływa dostępność w sklepie online i jak wygląda ona w praktyce?
- Karta produktu – obrazy muszą mieć sensowne alt-texty (np. „buty do biegania, model X, kolor czarny”), warianty (rozmiar/kolor) muszą być dostępne z klawiatury i czytelne dla czytników ekranu; cena i promocja powinny być przekazane tekstowo (nie tylko kolorem).
- Nawigacja i filtry – faceted search (checkboxy, suwaki) muszą być obsługiwane także klawiaturą, z poprawnym focus order i widocznym wskaźnikiem fokusu.
- Koszyk i mini-koszyk – dodanie do koszyka aktualizuje stan w sposób anonsowany (aria-live polite), a okienka modalne mają prawidłowy focus trap i nagłówek.
- Checkout – etykiety pól, podpowiedzi, walidacja i błędy (np. „Nieprawidłowy numer NIP”) są odczytywane przez czytniki; kolejność TAB nie gubi użytkownika; jeśli używasz iframe płatności, upewnij się, że ma on etykiety, a komunikaty błędów są dostępne.
- Promocje i timery – liczniki czasu i badge’e typu „-30%” nie mogą opierać się wyłącznie na kolorze/ikonce; unikaj migotania; przekazuj informację również tekstem.
- Captcha & logowanie – oferuj alternatywy przyjazne dostępności (np. reCAPTCHA z trybem dostępności, e-mail magic link), a nie tylko zadania obrazkowe.
Szybki plan audytu (5–7 dni roboczych)
Kiedy już wiesz, jak wygląda dostępność w praktyce w sklepie internetowym i czego szukać, wystarczy ułożyć audyt sklepu w plan. Zaprezentowany plan poniżej to oczywiście jedna z propozycji, którą możesz dowolnie modyfikować.
Dzień 1 – Zakres i ścieżki krytyczne
Zmapuj 3–5 kluczowych ścieżek, np.:
– Strona główna → Kategoria → Produkt → Koszyk → Checkout → Potwierdzenie.
– Rejestracja → Logowanie → Historia zakupów → Znalezienie faktury → Zgłoszenie reklamacji.
Dzień 2 – Testy automatyczne (baseline)
Uruchom np. Lighthouse, axe DevTools/WAVE na reprezentatywnych ekranach, następnie zapisz wyniki + zrzuty. Wylistuj błędy: kontrast, brak label, błędne role/ARIA, brak lang, itd.
Dzień 3 – Testy manualne klawiaturą
Przejdź całe ścieżki bez myszy (TAB/SHIFT+TAB/SPACE/ENTER/ESC). Zanotuj pułapki fokusu, elementy nieosiągalne, ukryte „skip linki”, problemy z modalami i rozwijanymi filtrami.
Dzień 4 – Czytniki ekranu
Minimum: NVDA + Firefox (Windows) i VoiceOver + Safari (macOS/iOS). Sprawdź: nazwy kontrolek, hierarchię nagłówków (H1–H3), odczyt błędów formularzy, anonsowanie zmian w koszyku.
Dzień 5 – Kontrast i grafika
Zweryfikuj kontrasty (4.5:1 tekst zwykły, 3:1 duży). Sprawdź czy alt-texty opisują sens (nie „img123.jpg”). Slidery/karuzele: możliwość pauzy, strzałki dostępne klawiaturą.
Dzień 6 – Raport i priorytety
Oceń wpływ na konwersję i ryzyko prawne. Ustal P1 (must-fix) dla checkoutu i koszyka, P2 dla karty produktu/nawigacji, P3 dla elementów informacyjnych. Złóż backlog w Jirze.
Dzień 7 – Proof-fix + re-test
Napraw wybrane P1 (np. focus trap, etykiety pól, kontrast przycisku CTA), wykonaj re-test i ustal harmonogram pozostałych poprawek (2–6 tyg.).
Checklista dla reprezentatywnych ekranów
Dalej nie wiesz, czy sobie poradzisz z zauważeniem wszystkich “smaczków”? Przejdź poniższą listę dla każdego z reprezentatywnych ekranów.
Podstawy (must-have)
- Każda strona ma lang=”pl” (lub właściwy język) i unikalny <title>.
- Hierarchia nagłówków logiczna (H1 → H2 → H3), bez przeskoków „dla stylu”.
- Kontrast tekstu i CTA spełnia min. 4.5:1 (3:1 dla dużych czcionek).
- Wszystkie obrazy informacyjne mają sensowne alt-texty; dekoracyjne alt=””.
- Formularze mają widoczne label (powiązane for/id) i treściwe komunikaty błędów (po wysłaniu i „na żywo”).
- Na początku strony działa link „Przejdź do treści” (skip link).
- Cały koszyk/checkout obsługiwalny klawiaturą, z widocznym fokusem.
- Modal blokuje tło, skupia fokus, ma nagłówek, zamyka się ESC.
- Dynamiczne aktualizacje (np. „Dodano do koszyka”) są ogłaszane przez ARIA live.
- Multimedia (wideo z instrukcjami) mają napisy; autoplay można wstrzymać.
E-commerce „trudne miejsca”
- Filtry (range, checkboxy, sortowanie) działają z klawiaturą i są opisane (role/aria-label).
- Warianty produktu (rozmiar/kolor) mają dostępne kontrolki i komunikaty o błędach (np. „Wybierz rozmiar”).
- Zmiana ceny/promocji nie polega wyłącznie na kolorze (jest też tekst).
- Integracje płatności (iframe) mają poprawne etykiety i zgłaszają błędy.
- Captcha ma alternatywę przyjazną dostępności (lub tryb dostępny).
Organizacja i ciągłość
- Publiczna deklaracja dostępności i kanał zgłaszania barier (formularz/e-mail).
- Procedura testów regresji (Lighthouse/axe w CI/CD) dla nowych wdrożeń.
- Przegląd kontrastów i stanu komponentów design systemu co kwartał.
Masz dalej wątpliwości czy poradzisz sobie z audytem? Odezwij się do nas i spotkajmy się na niezobowiązującej rozmowie online, podczas której przeanalizujemy Twój sklep i wskażemy obszary do poprawy :).
