WCAG 2.2 AA: checklista dostępności dla sklepu internetowego

Checklista WCAG 2.2 AA dla sklepów Shopify i WooCommerce: tekst alternatywny, kontrast, etykiety, klawiatura, fokus, rozmiar celu i nowe kryteria 2.2.

Redakcja FixReports10 min czytania

Checklista WCAG 2.2 AA dla sklepu internetowego zaczyna się od błędów, które występują w większości szablonów sklepów: brakujących tekstów alternatywnych, tekstu o zbyt niskim kontraście, linków i przycisków bez dostępnej nazwy, pól formularzy bez etykiet, pułapek klawiaturowych i niewidocznego fokusu. WCAG 2.2 dodaje do tego kryteria poziomu AA, które szczególnie mocno dotykają sklepów: elementy z fokusem ukryte pod przyklejonymi paskami (2.4.11), cele dotykowe mniejsze niż 24 × 24 piksele CSS (2.5.8) oraz logowanie, które wymaga zapamiętywania lub przepisywania informacji (3.3.8). Przetestuj każdy typ strony (stronę główną, kolekcję, produkt, koszyk) za pomocą klawiatury i automatycznego narzędzia, a potem popraw szablony motywu, aby poprawka objęła każdą stronę.

Najważniejsze w skrócie

  • WCAG 2.2 uzyskały status rekomendacji W3C 5 października 2023 roku. Obecne wydanie pochodzi z 12 grudnia 2024 roku i zostało zatwierdzone jako norma ISO/IEC 40500:2025 (otwiera się w nowej karcie).
  • W raporcie WebAIM Million 2026 (otwiera się w nowej karcie) (dane z lutego 2026 roku) 95,9% stron głównych z pierwszego miliona witryn miało wykrywalne błędy WCAG 2.
  • Sześć najczęstszych błędów to tekst o niskim kontraście (83,9% stron), brak tekstu alternatywnego (53,1%), brak etykiet formularzy (51%), puste linki (46,3%), puste przyciski (30,6%) i brak określenia języka strony (13,5%).
  • 42 516 stron głównych sklepów Shopify w tej próbie miało średnio 75,1 wykrytego błędu, wobec 56,1 dla wszystkich stron.
  • WCAG 2.2 dodają cztery kryteria poziomu AA (2.4.11, 2.5.7, 2.5.8, 3.3.8) i dwa kryteria poziomu A (3.2.6, 3.3.7) oraz usuwają kryterium 4.1.1 Parsing.

Co zmieniło się w WCAG 2.2 dla sklepów internetowych?

WCAG 2.2 wprowadziły dziewięć nowych kryteriów sukcesu, z czego sześć na poziomie A lub AA, i usunęły kryterium 4.1.1 Parsing jako przestarzałe (W3C WAI (otwiera się w nowej karcie)).

Nowe kryteriumPoziomCo oznacza w sklepie
2.4.11 Focus Not Obscured (Minimum)AALink lub przycisk z fokusem nie może być całkowicie zasłonięty przez przyklejony nagłówek, przyklejony pasek „Dodaj do koszyka”, baner cookie ani widżet czatu
2.5.7 Dragging MovementsAAWszystko, co wymaga przeciągania, na przykład suwak zakresu cen, potrzebuje alternatywy obsługiwanej pojedynczym dotknięciem
2.5.8 Target Size (Minimum)AACele kliknięć i dotknięć mają co najmniej 24 × 24 piksele CSS albo są rozmieszczone tak, że okrąg o średnicy 24 px wokół każdego z nich nie styka się z sąsiednimi
3.2.6 Consistent HelpALinki do pomocy, dane kontaktowe lub czat pojawiają się na każdej stronie w tej samej względnej kolejności
3.3.7 Redundant EntryANie proś o te same informacje dwa razy w ramach jednego procesu; uzupełnij je automatycznie albo pozwól je wybrać
3.3.8 Accessible Authentication (Minimum)AALogowanie nie może zależeć od zapamiętywania lub przepisywania, chyba że istnieje alternatywa albo ułatwienie, takie jak wklejanie i menedżery haseł

Pozostałe trzy (2.4.12, 2.4.13 i 3.3.9) należą do poziomu AAA. Ponieważ wersja 2.2 zachowuje wszystkie kryteria z wersji 2.1 poza 4.1.1, spełnienie WCAG 2.2 AA oznacza także spełnienie WCAG 2.1 AA.

Które kryteria WCAG najczęściej nie są spełnione w szablonach sklepów?

Co roku pojawia się ta sama garstka: kontrast, tekst alternatywny, etykiety formularzy i nazwy linków oraz przycisków, a do tego problemy z klawiaturą i fokusem, które automatyczne narzędzia wychwytują tylko częściowo.

KryteriumCo zawodzi w sklepachJak to naprawić
1.1.1 Non-text Content (A)Zdjęcia produktów bez tekstu alternatywnego lub z nazwą pliku jako tekstem alternatywnym; obrazy-linki bez tekstuOpisz pokazany produkt (kolor, fason, ujęcie). Używaj alt="" tylko dla elementów dekoracyjnych. Motywy Shopify powinny wypisywać image.alt
1.4.3 Contrast (Minimum) (AA)Jasnoszary tekst główny, tekst zastępczy (placeholder), plakietki promocji, tekst na zdjęciach w sekcji hero4,5:1 dla zwykłego tekstu, 3:1 dla dużego tekstu (około 24 px lub 18,5 px pogrubionego) (W3C (otwiera się w nowej karcie))
2.4.4 Link Purpose (A), 4.1.2 Name, Role, Value (A)Linki do koszyka, wyszukiwarki i mediów społecznościowych w postaci samych ikon; strzałki slidera; przyciski zamykania „X” bez nazwyDaj każdemu elementowi sterującemu widoczny tekst albo aria-label, na przykład „Koszyk, 2 produkty”
1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A)Pola newslettera i wyszukiwarki z samym tekstem zastępczym; pola ilości bez etykietUżyj elementu <label for> zgodnego z id pola; pogrupuj próbki wariantów oparte na przyciskach radiowych w fieldset z legend
2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A)Menu działające tylko po najechaniu kursorem, próbki zbudowane z elementów div, wyskakujące okna, których nie da się zamknąć z klawiaturyUżywaj prawdziwych elementów button i a; klawisz Escape zamyka nakładki i przywraca fokus
2.4.7 Focus Visible (AA)outline: none w CSS motywuDodaj styl :focus-visible, który wyraźnie odcina się od tła

WebAIM ustalił też, że co czwarty obraz będący linkiem nie miał tekstu alternatywnego, a 45% obrazów bez tekstu alternatywnego stanowiły linki (WebAIM (otwiera się w nowej karcie)). W siatce kolekcji chodzi zwykle o link na zdjęciu produktu.

Co sprawdzić na stronie głównej?

Sprawdź nagłówek, sekcję hero i wszystko, co wyskakuje, bo z tymi elementami każdy odwiedzający styka się najpierw.

  • Link pomijania. Link „Przejdź do treści” jako pierwszy element, który może otrzymać fokus (2.4.1 Bypass Blocks, A).
  • Ikony w nagłówku. Ikony wyszukiwarki, konta i koszyka mają dostępne nazwy, a nazwa koszyka zawiera liczbę produktów.
  • Menu. Otwiera się klawiszem Enter lub spacją, podpozycje są osiągalne klawiszem Tab, zamyka się klawiszem Escape i nie wymaga najechania kursorem (2.1.1). Wymagania Theme Store (otwiera się w nowej karcie) Shopify mówią, że wszystkie części strony, w tym menu rozwijane, muszą być dostępne z klawiatury.
  • Slider w sekcji hero. Jeśli slajdy przesuwają się automatycznie dłużej niż pięć sekund, zapewnij przycisk pauzy (2.2.2 Pause, Stop, Hide, A).
  • Pasek ogłoszeń i tekst na zdjęciach. Zmierz kontrast; kolory marki często nie osiągają 4,5:1.
  • Wyskakujące okna i banery cookie. Przenieś fokus do wyskakującego okna, dodaj etykietę do pola e-mail, pozwól zamknąć okno klawiszem Escape i upewnij się, że przyklejony baner nigdy całkowicie nie zasłania elementu z fokusem (2.4.11). W3C wymienia właściwość CSS scroll-padding jako jeden ze sposobów, aby przyklejone paski nie zasłaniały elementów z fokusem (W3C (otwiera się w nowej karcie)).
  • Język strony. Element html ma poprawny atrybut lang (3.1.1 Language of Page, A).

Co sprawdzić na stronach kolekcji?

Strony kolekcji zwykle zawodzą na kartach produktów, filtrach i próbkach kolorów.

  • Karty produktów. Link na zdjęciu ma tekst alternatywny albo zdjęcie jest ukryte przed technologiami wspomagającymi, a nazwę niesie link z tytułem produktu.
  • Filtry. Każde pole wyboru ma etykietę, a każda grupa ma nagłówek lub legendę. Panel filtrów da się otworzyć, obsłużyć i zamknąć z klawiatury. Ogłaszaj zaktualizowaną liczbę wyników jako komunikat o stanie (4.1.3 Status Messages, AA).
  • Suwaki cen. Dodaj pola liczbowe na cenę minimalną i maksymalną, aby filtr działał bez przeciągania (2.5.7) i bez myszy (2.1.1).
  • Próbki kolorów. Każda próbka ma nazwę tekstową, a informacja „wyprzedane” nie jest przekazywana wyłącznie kolorem (1.4.1 Use of Color, A). Próbki mają co najmniej 24 × 24 piksele CSS albo spełniają regułę odstępów (2.5.8).
  • Sortowanie i paginacja. Lista rozwijana sortowania ma etykietę; linki do kolejnych stron i przyciski „Pokaż więcej” spełniają wymóg rozmiaru celu.

Co sprawdzić na stronach produktów?

Na stronie produktu zapada decyzja o zakupie, więc przetestuj każdy element sterujący między zdjęciami a przyciskiem „Dodaj do koszyka”.

  • Galeria. Każde zdjęcie ma tekst alternatywny, miniatury są przyciskami z nazwami w rodzaju „Pokaż zdjęcie 2”, a strzałki działają bez przeciągania (2.5.7).
  • Wybór wariantu. Opcje rozmiaru i koloru znajdują się w grupie z etykietą (1.3.1), wybrana opcja jest udostępniana czytnikom ekranu (4.1.2), a niedostępne rozmiary są oznaczone tekstem.
  • Ilość. Pole ma etykietę, a przyciski minus i plus mają nazwy i spełniają kryterium 2.5.8. Theme Store Shopify wymaga obecnie celów dotykowych o rozmiarze co najmniej 24 × 24 piksele CSS, a dobre praktyki dostępności (otwiera się w nowej karcie) Shopify zalecają 44 × 44 dla głównych elementów sterujących.
  • Dodaj do koszyka. Komunikaty o powodzeniu i błędach są ogłaszane (4.1.3). Skarga FTC przeciwko dostawcy nakładki dostępności wskazywała witrynę, na której czytnik ekranu nie ogłaszał dodania produktu do koszyka, a grafika z oceną 5 gwiazdek była odczytywana jako przycisk „previous” (skarga FTC (otwiera się w nowej karcie)).
  • Oceny, zakładki i akordeony. Oceny mają tekst w rodzaju „4,5 na 5 gwiazdek”. Akordeony informują, czy są rozwinięte.
  • Przyklejony pasek „Dodaj do koszyka”. Nie może całkowicie zasłaniać elementu z fokusem, gdy użytkownik klawiatury przechodzi klawiszem Tab w dół strony (2.4.11).
  • Wideo. Filmy produktowe z mową mają napisy (1.2.2 Captions (Prerecorded), A).

Co sprawdzić w koszyku i przy logowaniu?

Koszyk to ostatnia strona, nad którą większość motywów ma pełną kontrolę, więc przetestuj go aż do przycisku przejścia do kasy, a potem sprawdź, czy logowanie do konta nie zależy od pamięci ani przepisywania.

  • Wysuwany panel koszyka. Fokus przechodzi do panelu, pozostaje w nim, dopóki panel jest otwarty, i wraca na przycisk koszyka, gdy klawisz Escape go zamknie, tak jak opisują to dobre praktyki Shopify.
  • Pozycje w koszyku. Każde pole ilości ma etykietę z nazwą produktu, a każdy przycisk usuwania mówi, co usuwa, na przykład „Usuń: Lniana koszula, rozmiar M”.
  • Pola kodu rabatowego i uwag. Mają etykiety, a błędy są opisane tekstem (3.3.1 Error Identification, A).
  • Przycisk przejścia do kasy. Osiągalny klawiszem Tab, z widocznym fokusem i niezasłonięty przez przyklejone elementy.
  • Logowanie (3.3.8). Konta klientów w Shopify domyślnie korzystają z logowania bez hasła za pomocą jednorazowego kodu (otwiera się w nowej karcie). Według W3C kody muszą dać się wkleić lub uzupełnić automatycznie, a blokowanie wklejania lub menedżerów haseł oznacza niespełnienie kryterium; CAPTCHA oparte na rozpoznawaniu obiektów są dopuszczalne na poziomie AA, ale CAPTCHA w formie łamigłówek lub zadań matematycznych wymagają innej metody (W3C (otwiera się w nowej karcie)).

Tu liczą się różnice między platformami. W Shopify plik checkout.liquid nie jest już obsługiwany (otwiera się w nowej karcie) w krokach informacji, wysyłki i płatności, więc większość kodu kasy pochodzi od Shopify, a nie z Twojego motywu; przetestuj aplikacje i modyfikacje kasy, które dodajesz. W WooCommerce kasa jest stroną w Twojej witrynie WordPress. WooCommerce deklaruje, że front-end jego rdzenia jest w znacznym stopniu zgodny z WCAG 2.2 AA (deklaracja zaktualizowana ostatnio 1 kwietnia 2025 roku), ale Twój motyw i wtyczki nadal mogą tę zgodność zepsuć (WooCommerce (otwiera się w nowej karcie)).

Jak przetestować sklep według tej checklisty?

Na każdym typie strony połącz automatyczny skan z zakupem wykonanym wyłącznie za pomocą klawiatury i krótkim sprawdzeniem czytnikiem ekranu.

  1. Automatyczny skan. Narzędzia takie jak axe, WAVE czy Lighthouse wychwytują problemy z kontrastem, tekstem alternatywnym, etykietami i pustymi linkami. Theme Store Shopify wymaga średniego wyniku dostępności w Lighthouse na poziomie co najmniej 90 na stronie głównej, stronach kolekcji i stronach produktów. To minimum, a nie zgodność: W3C podkreśla, że narzędzia nie są w stanie samodzielnie ocenić dostępności (otwiera się w nowej karcie).
  2. Zakup tylko z klawiatury. Bez użycia myszy przejdź ze strony głównej do produktu przez menu lub wyszukiwarkę, użyj filtrów, wybierz wariant, dodaj produkt do koszyka, otwórz koszyk i dotrzyj do przycisku przejścia do kasy.
  3. Wyrywkowe sprawdzenie czytnikiem ekranu. Za pomocą VoiceOver lub NVDA odsłuchaj nazwę produktu, cenę, stan wariantu i potwierdzenie dodania do koszyka.
  4. Ponowny test po zmianach. Aktualizacje motywu i nowe aplikacje mogą cofnąć poprawki.

Nasz bezpłatny skan obejmuje krok 1 na stronie głównej, stronie kolekcji, stronie produktu, koszyku i stronie z treścią, w prawdziwej przeglądarce Chromium z axe-core. Raport naprawy dostępności testuje do 25 stron, dodaje krok 2 w postaci testu zakupów wyłącznie z klawiatury aż do przycisku przejścia do kasy, podaje kod w wersji przed i po poprawce oraz zawiera checklistę do kroku 3, który wymaga człowieka z czytnikiem ekranu. Żadne z nich nie gwarantuje zgodności z ADA ani z WCAG.

Najczęściej zadawane pytania

Czy WCAG 2.2 są prawnie wymagane w sklepach internetowych w USA?

Departament Sprawiedliwości USA nie ma rozporządzenia wydanego na podstawie ADA, które określałoby standard internetowy dla prywatnych firm, a jego wytyczne dotyczące stron internetowych z 2022 roku (otwiera się w nowej karcie) wskazują WCAG jako pomocne źródło wskazówek. Pisma z żądaniami (demand letters) często powołują się na WCAG 2.1 lub 2.2 AA, więc o swoich konkretnych obowiązkach porozmawiaj z prawnikiem.

Czy spełnienie WCAG 2.2 AA oznacza też spełnienie WCAG 2.1 AA?

Tak, w praktyce tak. WCAG 2.2 zachowują wszystkie kryteria sukcesu WCAG 2.1 z wyjątkiem 4.1.1 Parsing, które W3C usunęło jako przestarzałe.

Jaki jest minimalny rozmiar celu w WCAG 2.2?

Zgodnie z kryterium 2.5.8 cele muszą mieć co najmniej 24 × 24 piksele CSS, chyba że okrąg o średnicy 24 px wyśrodkowany na każdym mniejszym celu nie styka się z innymi celami ani z ich okręgami. Wyjątki obejmują linki w zdaniach, niestylizowane elementy sterujące przeglądarki, prezentacje, w których dany wygląd jest niezbędny, oraz cele, dla których istnieje równoważny element sterujący spełniający wymóg.

Czy wynik 100 w audycie dostępności Lighthouse oznacza, że mój sklep jest zgodny z WCAG?

Nie. Automatyczne narzędzia wykrywają tylko część błędów, a WebAIM zaznacza, że brak wykrytych błędów nie oznacza, że strona jest dostępna lub zgodna.

Czy logowanie hasłem narusza kryterium 3.3.8?

Samo w sobie nie. Pole hasła spełnia kryterium, gdy można do niego wkleić tekst i użyć menedżera haseł; naruszeniem jest dopiero blokowanie wklejania lub autouzupełniania.

Jak często należy ponownie testować sklep?

Testuj ponownie po każdej aktualizacji motywu, instalacji nowej aplikacji lub większej zmianie szablonu i regularnie sprawdzaj wyrywkowo ścieżkę zakupu, bo aplikacje mogą bez ostrzeżenia dodawać nowy kod.

Źródła

Wszystkie poradniki