Jak zapewnić dostępność sklepu WooCommerce: praktyczny przewodnik

9 czerwca 2026

Krótka odpowiedź. Sam WooCommerce całkiem nieźle trzyma się wytycznych dostępności WordPressa, ale Twój sklep dziedziczy dostępność przede wszystkim po motywie, wtyczkach i treściach — i to tam zwykle leży problem. Przejdź przez sześć punktów poniżej (kontrast, teksty alternatywne, nagłówki, wtyczki i page buildery, klawiatura, język) i zwróć szczególną uwagę na blokową kasę oraz filtry produktów; wtedy większość problemów masz z głowy.

Dlaczego sam WooCommerce nie wystarczy?

WooCommerce to wtyczka na WordPressie. To, czy Twój sklep spełnia WCAG, zależy od tego, jak zbudowany jest motyw, jakie kolory wybrałeś, jakich wtyczek i page buildera używasz i jak uzupełniłeś produkty. Dwa sklepy na tej samej wersji WooCommerce mogą więc wypaść zupełnie inaczej. Dobra wiadomość: ponieważ wiele elementów powtarza się przez motyw i szablony, jedna poprawka często pokrywa setki stron.

1. Sprawdź kontrast kolorów

Najczęstszy błąd. W motywie blokowym (Full Site Editing) wejdź w Wygląd → Edytor → Style → Kolory; w motywie klasycznym w Wygląd → Dostosuj → Kolory. Zadbaj, by tekst i tło miały kontrast co najmniej 4,5:1 (3:1 dla dużego tekstu). Zwróć szczególną uwagę na tekst na przycisku Do koszyka, etykiety cen i promocji oraz linki. Raz dobrze ustawione działa w całym sklepie. Zobacz kontrast kolorów: wymóg WCAG i jak go mierzyć.

2. Dodaj zdjęciom produktów teksty alternatywne

Otwórz produkt w Produkty, kliknij w Obrazek produktu (i Galerii produktu) na zdjęcie → wypełnij w bibliotece mediów pole Tekst alternatywny. Opisz krótko i rzeczowo, co widać na zdjęciu (np. "Czarny zamszowy męski but sznurowany"), bez języka marketingowego. Zacznij od najlepiej sprzedających się produktów i bannerów na stronie głównej. Obrazy dekoracyjne dostają pusty alt (alt=""). Więcej w artykule jak pisać teksty alternatywne, które działają.

3. Sprawdź strukturę nagłówków

Używaj nagłówków w logicznej kolejności (H1 → H2 → H3), a nie tylko dla wyglądu. W edytorze blokowym (Gutenberg) przy każdym bloku nagłówka widzisz jego poziom; nie przeskakuj poziomów. Uważaj na page buildery, takie jak Elementor czy Divi: pozwalają powiększyć dowolny tekst bez robienia z niego prawdziwego nagłówka — wybieraj tam świadomie właściwy poziom nagłówka.

4. Uważaj na wtyczki i page builder

To często największe źródło problemów. Wtyczki do recenzji, czatu, pop-upów, sliderów i filtrów — oraz ciężkie page buildery — wstrzykują własny kod do Twojego motywu, a w nim regularnie trafiają się przyciski bez nazwy, błędna ARIA albo elementy nieobsługiwalne klawiaturą. Nie instaluj więc każdej wtyczki w ciemno i zawsze testuj stronę ze wszystkim włączonym. Jeśli wtyczka okaże się niedostępna, przejdź na alternatywę, która normy WCAG respektuje. Tam, gdzie się da, wybieraj nowe bloki WooCommerce dla koszyka i kasy (zobacz punkt 6).

5. Przetestuj z klawiaturą

Spróbuj obsłużyć stronę całkowicie bez myszy: tylko klawiszem Tab i Enterem. Czy dotrzesz do wszystkiego — menu, filtrów produktów, wyboru wariantów, koszyka, kasy — i czy zawsze widzisz, gdzie jest fokus? W WooCommerce zwróć szczególną uwagę na listy rozwijane wariantów, stepper ilości (+/−) i widgety filtrów w pasku bocznym; to miejsca, gdzie klawiatura najczęściej utyka.

6. Sprawdź ustawienie języka i swoją kasę

Zadbaj, by motyw ustawiał właściwy atrybut języka, dzięki czemu czytnik ekranu wybierze poprawną wymowę. W motywie klasycznym w header.php znajduje się linijka <html <?php language_attributes(); ?>> — to ona powinna nadawać atrybut języka. Jeśli używasz WPML lub Polylang dla wielu języków, sprawdź, że każda wersja językowa dostaje właściwy atrybut lang. Najlepiej przejdź na blokowe bloki Cart i Checkout WooCommerce: są dostępniejsze niż stara kasa na shortcode i są aktywnie utrzymywane pod kątem dostępności.

Częste błędy w WooCommerce i ich naprawa

Element WooCommerce	Częsty błąd	Naprawa
Przycisk "Do koszyka"	zbyt jasna czcionka / niski kontrast	kontrast w stylach motywu do co najmniej 4,5:1
Zdjęcia produktów	nazwa pliku jako opis (`IMG_2043.jpg`)	funkcjonalny tekst alternatywny w bibliotece mediów
Stepper ilości (`+`/`−`)	przyciski bez etykiety, nieobsługiwalne klawiaturą	dodać label/`aria-label` lub użyć dostępnego wariantu
Widget filtrów produktów	filtry działają tylko myszą	dostępna wtyczka filtrów lub bloki filtrów WooCommerce
Wtyczka dostępności	instalacja widgetu overlay	unikać — nie naprawia kodu i nie chroni przed roszczeniami

Czy pomoże wtyczka dostępności z katalogu WordPressa?

Nie. Gdy wyszukasz "accessibility", znajdziesz dziesiątki wtyczek obiecujących zgodność sklepu jednym kliknięciem, za pomocą widgetu. Nie daj się nabrać: nie naprawiają one motywu ani szablonów, a organy nadzoru sprawdzają surowy kod źródłowy sklepu. Systematyczna naprawa w motywie i treściach to jedyna droga, która się obroni — a do tego daje lepsze SEO i szybsze ładowanie strony. Więcej w artykule dlaczego widget overlay Cię nie chroni.

Czy mój sklep WooCommerce spełnia tym samym wymogi prawa?

Te sześć punktów pokrywa większość tego, co stwierdza zautomatyzowany test, ale "spełnianie wymogów" sięga dalej: zależy od całego motywu, wtyczek i treści razem wziętych. Czy European Accessibility Act dotyczy Ciebie, sprawdzisz w naszej liście kontrolnej. Pracujesz też na Shopify? Wtedy dalej poprowadzi Cię nasz przewodnik po Shopify.

Skąd mam wiedzieć, na czym mój sklep WooCommerce stoi teraz?

Najszybsza droga: zeskanuj bezpłatnie jedną stronę. Przy każdym wykryciu zobaczysz, co jest nie tak i jak to naprawić — a ponieważ wiele idzie przez motyw i szablony, często naprawiasz to raz dla całego sklepu. W mniej niż 60 sekund, bez konta.