Dostępność sklepu sprawdza się przez wykonanie realnych zadań różnymi sposobami, nie przez obejrzenie strony ani uruchomienie jednego automatycznego skanera. Przejdź klawiaturą od strony głównej przez kategorię, produkt i koszyk do bezpiecznego końca testowego checkoutu. Powtórz próbę przy powiększeniu, sprawdź komunikaty błędów i statusów, a reprezentatywne ekrany przetestuj czytnikiem ekranu. Każda bariera blokująca wybór produktu, poznanie ceny, zmianę koszyka lub złożenie zamówienia wstrzymuje publikację.

Ta lista pomaga znaleźć bariery, ale nie jest poradą prawną, pełnym audytem ani gwarancją zgodności z WCAG lub przepisami. Nie daje też certyfikatu ani odpowiedzi na pytanie, jakie obowiązki dotyczą konkretnego sklepu.

Najpierw oddziel test użyteczności od oceny prawnej

WCAG 2.2 to standard W3C zawierający sprawdzalne kryteria dostępności treści internetowych. Poziom zgodności dotyczy całej strony w określonym zakresie, a nie kilku wybranych ekranów. W3C wyjaśnia też, że dokumenty „Understanding” pomagają interpretować kryteria, lecz same nie są normatywną częścią standardu (Understanding WCAG 2.2). Dlatego wynik „sprawdzono 20 punktów” nie oznacza „sklep jest zgodny z WCAG”.

W Polsce od 28 czerwca 2025 roku obowiązuje ustawa z 26 kwietnia 2024 roku o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze, nazywana Polskim Aktem o Dostępności. Wdraża ona Europejski Akt o Dostępności, czyli dyrektywę (UE) 2019/882. Oficjalne objaśnienie rządowe wskazuje, że zakres usług handlu elektronicznego obejmuje oferowanie i świadczenie usług przez internet, w tym sprzedaż produktów online, a zarazem wymienia wyłączenie usług oferowanych lub świadczonych przez mikroprzedsiębiorcę (gov.pl: PAD i usługi handlu elektronicznego). Ustawa przewiduje też obowiązki informacyjne dotyczące dostępności usługi (gov.pl: obowiązki informacyjne w PAD).

Nie ustalaj zastosowania prawa wyłącznie z liczby pracowników ani z tej krótkiej listy. Znaczenie mają definicje, rola podmiotu, usługa, rynek, daty, wyjątki i przepisy przejściowe. Sprawdź je dla swojej działalności w aktualnym tekście ustawy, Dz.U. 2024 poz. 731. Nawet gdy wyłączenie prawne ma zastosowanie, usuwanie barier poszerza grupę osób, które mogą kupić bez pomocy.

Ustal próbkę i zapisuj dowody

Wybierz dane, które obciążą układ: długą nazwę kategorii, produkt z ceną promocyjną, kilka zdjęć, brakujący wariant informacji, dwa produkty w koszyku i formularz z polskim adresem. Zapisuj: adres ekranu, urządzenie i przeglądarkę, sposób obsługi, krok, wynik oczekiwany, wynik rzeczywisty, wagę błędu, właściciela poprawki i wynik ponownego testu.

Testuj co najmniej stronę główną, ważną kategorię, reprezentatywną stronę produktu, koszyk oraz każdy krok checkoutu. Szczegółową kolejność treści strony wejściowej zaplanujesz z poradnikiem projektowania strony głównej sklepu, a dobór urządzeń uzupełnisz listą mobile UX. To są testy uzupełniające, nie zamienniki przeglądu dostępności.

Struktura: nagłówki, obszary i kolejność

Wyłącz style albo użyj widoku struktury w narzędziach dostępności. Każda strona powinna mieć opisowy tytuł i jeden jasny nagłówek główny. Kolejne nagłówki mają nazywać sekcje, a nie służyć wyłącznie do powiększania tekstu. Cena, warianty, dostawa i opis produktu muszą zachować sensowną kolejność także wtedy, gdy układ wizualny znika.

Sprawdź, czy nagłówek, nawigacja, główna treść i stopka mają właściwe elementy semantyczne lub role obszarów. Powtarzalną nawigację powinien omijać działający link „Przejdź do treści”. Listy produktów powinny być rzeczywistymi listami, a tabela — jeśli jest potrzebna — mieć nagłówki komórek. WCAG 2.2 wymaga, aby informacje, struktura i relacje przekazywane wyglądem były również określone programowo lub dostępne tekstowo (kryterium 1.3.1).

Klawiatura i widoczny fokus

Odłóż mysz. Używaj Tab, Shift+Tab, Enter, spacji, klawiszy strzałek i Esc zgodnie z typem kontrolki. Musisz móc otworzyć i zamknąć menu, przejść do kategorii, obsłużyć galerię, wybrać opcję produktu, dodać go do koszyka, zmienić ilość, usunąć pozycję i wypełnić checkout. Fokus nie może utknąć ani zniknąć za oknem, banerem lub stałym paskiem.

Wskaźnik fokusu ma być zawsze widoczny, a jego kolejność powinna odpowiadać znaczeniu i obsłudze ekranu. Po otwarciu okna dialogowego fokus powinien trafić do niego, pozostać w nim podczas obsługi i wrócić do elementu, który je otworzył. Po błędzie formularza użytkownik musi dotrzeć do podsumowania lub pierwszego błędnego pola bez szukania. Zobacz kryteria W3C dotyczące obsługi klawiaturą, kolejności fokusu, widocznego fokusu i fokusu niezasłoniętego.

Kontrast, kolor i ruch

Zmierz kontrast narzędziem, nie „na oko”. WCAG 2.2 na poziomie AA wskazuje co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu, z opisanymi wyjątkami. Informacja wizualna potrzebna do rozpoznania kontrolek i ich stanów wymaga co najmniej 3:1 względem kolorów sąsiednich. Sprawdź tekst, linki, ceny promocyjne, placeholdery, obrysy pól, ikony, fokus oraz stany błędu, zaznaczenia i wyłączenia. Kolor nie może być jedynym nośnikiem informacji: do czerwonego obrysu dodaj tekst, a do aktywnego wariantu czytelną nazwę lub znak.

Karuzele, animowane banery i ruch po interakcji muszą być ocenione osobno. Daj możliwość zatrzymania automatycznie zmieniającej się treści, nie uruchamiaj niepotrzebnej animacji po ruchu kursora i respektuj preferencję ograniczenia ruchu. Materiał W3C o ruchu wywołanym interakcją opisuje kryterium poziomu AAA; to nie czyni problemu nieistotnym na niższym poziomie, zwłaszcza gdy ruch utrudnia zakup.

Zdjęcia produktów i tekst alternatywny

Opis alternatywny ma pełnić funkcję obrazu w danym miejscu. Dla głównego zdjęcia produktu nazwij przedmiot i istotną cechę widoczną na zdjęciu, której klient potrzebuje do wyboru. Kolejne ujęcia mogą opisywać tył, fakturę, skalę lub sposób użycia. Nie kopiuj nazwy produktu do każdego zdjęcia i nie zaczynaj od „zdjęcie przedstawia”. Obraz czysto dekoracyjny powinien mieć pusty tekst alternatywny, aby czytnik go pominął.

Jeżeli grafika zawiera rozmiary, skład albo zasady promocji, podaj tę samą informację jako dostępny tekst. Nie ukrywaj krytycznych danych wyłącznie na obrazie. Przygotowanie kadrów, praw i formatów obejmuje osobna lista zdjęć produktów i materiałów marki. Opisy produktów powinny natomiast nazywać cechy i ograniczenia w treści; pomaga w tym poradnik SEO opisów produktów, choć jego celem nie jest audyt dostępności.

Formularze, błędy i komunikaty statusu

Każde pole powinno mieć trwałą, programowo powiązaną etykietę. Placeholder nie zastępuje etykiety, bo znika po wpisaniu danych. Dodaj instrukcję tam, gdzie wymagany format nie jest oczywisty. Nazwa dostępna przycisku lub pola powinna zawierać widoczną etykietę; inaczej osoba używająca sterowania głosem może nie wywołać kontrolki wypowiadanym tekstem.

Wyślij pusty formularz, błędny e-mail i niepełny kod pocztowy. Błąd powinien być opisany tekstem, wskazywać pole, proponować poprawę, gdy jest znana, i nie usuwać prawidłowych danych. Przy zamówieniu sprawdź możliwość przejrzenia oraz poprawienia danych przed ostatecznym zatwierdzeniem. W3C opisuje te wymagania w kryteriach etykiet i instrukcji, identyfikacji błędów oraz zapobiegania błędom prawnym, finansowym i dotyczącym danych.

Po dodaniu produktu, zmianie ilości lub zastosowaniu kodu rabatowego czytnik ekranu powinien otrzymać komunikat statusu bez nieoczekiwanego przenoszenia fokusu. Przetestuj także ładowanie, brak wyników, odrzucenie formularza i potwierdzenie. Kryterium Status Messages wymaga programowego określenia takich komunikatów tak, aby technologia asystująca mogła je przedstawić bez przejmowania fokusu.

Powiększenie, reflow i czytnik ekranu

Powiększ tekst do 200% i stronę do 400%. Przy szerokości odpowiadającej 320 CSS px treść przewijana pionowo nie powinna wymagać przewijania w dwóch kierunkach ani tracić informacji lub funkcji, poza elementami, które ze względu na znaczenie wymagają układu dwuwymiarowego. Tak opisują to kryteria Resize Text i Reflow. Sprawdź szczególnie nagłówek, menu, długie nazwy, selektory, tabelę parametrów, koszyk, komunikaty i stałe przyciski.

Następnie wykonaj reprezentatywną ścieżkę czytnikiem ekranu w kombinacji system–przeglądarka, którą zna tester. Słuchaj tytułów stron, nagłówków, nazw i stanów kontrolek, tekstów alternatywnych, ceny, błędów oraz potwierdzenia zmiany koszyka. Sama próba wykonana przez początkującą osobę nie zastępuje badania z doświadczonym użytkownikiem technologii asystującej.

Zwarta lista kontroli przed publikacją

Przy każdym punkcie wpisz: zaliczone, poprawić i powtórzyć albo nierozstrzygnięte.

  • Każdy ekran ma trafny tytuł, H1 i logiczną hierarchię nagłówków.
  • Nagłówek, nawigacja, główna treść i stopka są rozpoznawalnymi obszarami; działa pominięcie nawigacji.
  • Klawiaturą da się przejść stronę główną, kategorię, produkt, koszyk i cały testowy checkout.
  • Fokus jest widoczny, ma logiczną kolejność, nie zostaje uwięziony ani zasłonięty.
  • Tekst, kontrolki, stany i fokus spełniają przyjęte wymagania kontrastu; znaczenie nie zależy wyłącznie od koloru.
  • Każdy informacyjny obraz ma użyteczny odpowiednik tekstowy, a dekoracyjny jest pomijany.
  • Każde pole ma etykietę i potrzebną instrukcję; widoczna etykieta zgadza się z nazwą dostępną.
  • Błędy są wskazane tekstem, powiązane z polami i możliwe do odnalezienia bez wzroku.
  • Zmiany koszyka, ładowanie i potwierdzenia są przekazywane jako dostępne komunikaty statusu.
  • Przy 200% tekstu i 400% zoomu nie ginie treść ani działanie; reflow działa w reprezentatywnych widokach.
  • Automatyczny ruch można zatrzymać, a niepotrzebne animacje nie blokują czytania i obsługi.
  • Czytnik ekranu pozwala rozpoznać produkt, cenę, opcje, sumę, błędy i wynik testowego zamówienia.
  • Strona główna prowadzi do oferty bez bariery w menu, banerze lub karuzeli.
  • Kategoria pozwala rozpoznać i otworzyć karty produktów, także przy długich nazwach i promocjach.
  • Strona produktu udostępnia zdjęcia, cenę, ważne cechy i działanie zakupowe bez myszy.
  • Koszyk pozwala zmienić ilość, usunąć produkt i poznać aktualną sumę.
  • Checkout zachowuje dane po błędzie, umożliwia poprawę i nie ogłasza sukcesu bez potwierdzonego wyniku.
  • Każda poprawka przeszła ponowny test na tym samym ekranie i pełnej ścieżce.

Kiedy wstrzymać publikację

Wstrzymaj publikację, jeśli bez myszy lub przy technologii asystującej nie można znaleźć produktu, poznać ceny, dodać go do koszyka, poprawić formularza, ustalić kosztu albo zakończyć zamówienia. Tak samo potraktuj pułapkę klawiaturową, niewidoczny fokus, utratę danych, krytyczny komunikat dostępny tylko kolorem oraz ruch wywołujący poważne objawy.

Popraw i powtórz test, gdy błąd jest zrozumiały i ma właściciela, lecz nie blokuje zasadniczego zadania. Nie zaliczaj punktu na podstawie obietnicy poprawki. Po zmianie sprawdź komponent wszędzie, gdzie występuje, oraz ponownie całą ścieżkę.

Oznacz wynik jako nierozstrzygnięty, gdy nie potrafisz ocenić niestandardowego komponentu, zarządzania fokusem, dynamicznego statusu, złożonej galerii, modala, uwierzytelnienia albo działania czytnika ekranu. Nie zamieniaj braku pewności w zaliczenie. Automatyczny skaner może znaleźć część błędów, ale nie oceni sensu tekstu alternatywnego, kolejności zadania ani całej obsługi. W badaniach najważniejszych zadań uwzględnij osoby z niepełnosprawnościami, gdy masz taką możliwość.

Jak wykorzystać Setkę bez mylenia generowania z audytem

Setka generuje responsywne strony i elementy sklepu — stronę główną, kategorie, strony produktów, nawigację i koszyk — jako połączoną całość. Sprzedawca może sprawdzać, poprawiać i publikować sklep bez utrzymywania kodu motywu. Dzięki temu łatwiej wychwycić ten sam problem na kilku stronach niż przy kontroli osobno składanych ekranów.

Generowanie nie zastępuje testu dostępności i nie gwarantuje zgodności z WCAG ani poprawnego wyniku na każdym urządzeniu. Sprzedawca nadal odpowiada za testy, treści i teksty alternatywne, materiały, konfigurację oraz sprawdzenie elementów zewnętrznych. Konto, walutę i metody płatności przygotujesz z przewodnikiem po Stripe w Setce, a samą finalizację zamówienia uwzględnij w manualnym teście opisanym tutaj. Obowiązki właściwe dla danej działalności i rynku pozostają po stronie sprzedawcy.

Wybierz jeden reprezentatywny produkt i przejdź całą ścieżkę bez myszy. Zapisz pierwszą blokadę, przypisz właściciela, popraw ją i dopiero po ponownym teście przejdź dalej. Jeśli nie potrafisz jednoznacznie ocenić komponentu, zostaw wynik jako nierozstrzygnięty zamiast zaliczać go na wyczucie.