Przejdź do treści
Pandus
pl Zmień język
Menu

Dostępność sklepu na WooCommerce, PrestaShop i Shopify: gdzie szukać błędów

· 4 min czytania

Na WooCommerce, PrestaShop i Shopify błędy dostępności rzadko pochodzą z samej platformy. Najczęściej powstają w czterech miejscach: w motywie (szablonie), we wtyczkach, modułach lub aplikacjach, w treściach dodawanych przez zespół i we własnym kodzie. Dobra wiadomość: ponieważ większość stron sklepu powstaje z kilku szablonów, jedna poprawka w szablonie usuwa błąd z setek lub tysięcy stron produktów naraz.

Skąd biorą się błędy

Motyw lub szablon

Motyw decyduje o kolorach, typografii, menu, kartach produktów, koszyku i często o wyglądzie formularzy. Typowe problemy:

  • niski kontrast szarego tekstu, cen przekreślonych, etykiet „promocja”,
  • niewidoczny fokus — przy obsłudze klawiaturą nie widać, który element jest aktywny,
  • menu i filtry rozwijane tylko po najechaniu myszą,
  • przyciski-ikony bez nazwy: koszyk, wyszukiwarka, ulubione, zamknij,
  • zbyt małe elementy dotykowe na telefonie, np. przełączniki ilości.

Wybierając lub zmieniając motyw, warto sprawdzić jego demo — choćby jedną stronę produktu i koszyk — zanim trafi do sklepu.

Wtyczki, moduły i aplikacje

Każde rozszerzenie dodaje własny kod: banery cookies, czaty, okna z rabatem, karuzele, opinie, porównywarki, wybór paczkomatu. Często to one blokują zakup:

  • baner cookies, którego nie da się zamknąć klawiaturą,
  • okno z kodem rabatowym, które przechwytuje fokus albo zasłania stronę,
  • karuzela, która przewija się sama i nie ma przycisku pauzy,
  • widżet wyboru punktu odbioru bez etykiet i bez obsługi klawiaturą.

Po instalacji każdego rozszerzenia warto przejść ścieżkę zakupu tylko klawiaturą.

Treści

Zespół codziennie dodaje produkty, banery i wpisy. Tu powstają błędy, których nie naprawi żaden motyw:

  • zdjęcia produktów bez tekstu alternatywnego albo z nazwą pliku zamiast opisu,
  • tekst na grafikach banerów (rabaty, terminy dostawy), niedostępny dla czytnika ekranu,
  • tabele rozmiarów jako obrazek,
  • nagłówki dobrane według wyglądu, a nie struktury,
  • linki typu „kliknij tutaj”.

Własny kod

Indywidualne modyfikacje — własny konfigurator, niestandardowy koszyk, przerobiony formularz zamówienia — nie były testowane przez autora motywu. Wymagają osobnej uwagi, zwłaszcza pola formularzy, komunikaty o błędach i elementy, które pojawiają się dynamicznie.

Co sprawdzić na każdej platformie

Niezależnie od platformy warto sprawdzić te same strony: kategorię z filtrami, kartę produktu z wariantami, koszyk, zamówienie do wyboru płatności, rejestrację i logowanie, formularz kontaktowy. Pełną listę kryteriów zawiera lista kontrolna WCAG 2.2.

WooCommerce

WooCommerce działa na WordPressie, więc o dostępności decydują głównie motyw WordPressa i wtyczki. Warto sprawdzić:

  • czy formularz zamówienia po zmianach (dodatkowe pola, wtyczki dostawy i płatności) nadal ma etykiety przy każdym polu,
  • czy komunikaty o błędach w formularzu są czytelne i powiązane z polem,
  • czy wtyczki filtrów działają klawiaturą,
  • czy teksty alternatywne zdjęć produktów są uzupełnione w bibliotece mediów.

Problemy widoczne bezpośrednio w panelu WordPressa, obok każdej strony i produktu, pokazuje wtyczka Pandus dla WordPress.

PrestaShop

W PrestaShop o wyglądzie decyduje szablon, a o wielu funkcjach — moduły. Warto sprawdzić:

  • czy moduły na stronie głównej (karuzele, bloki promocji) dają się obsłużyć klawiaturą i nie przewijają się bez kontroli,
  • czy przyciski w koszyku i przy produktach mają dostępne nazwy, a nie tylko ikony,
  • czy proces zamówienia, często rozbudowany modułami przewoźników i płatności, ma etykiety i widoczny fokus na każdym kroku,
  • czy zdjęcia produktów mają opis, a nie pusty tekst alternatywny.

Shopify

W Shopify o wyglądzie sklepu decyduje motyw, a o dodatkowych funkcjach — aplikacje. Warto sprawdzić:

  • kontrast i fokus w ustawieniach motywu,
  • czy aplikacje (opinie, wyskakujące okna, czaty, banery cookies) nie blokują klawiatury,
  • czy zdjęcia i filmy produktów mają teksty alternatywne,
  • czy sekcje dodane w edytorze motywu zachowują logiczną strukturę nagłówków.

Poprawiaj w szablonie, nie na stronie

Raport, który pokazuje „120 błędów na 120 stronach produktów”, zwykle oznacza jeden błąd w szablonie karty produktu. Dlatego:

  1. Grupuj błędy według szablonu, a nie według strony.
  2. Poprawiaj najpierw szablony ścieżki zakupu: koszyk, zamówienie, karta produktu.
  3. Treści poprawiaj procesem: zasada, że nowy produkt nie jest publikowany bez tekstu alternatywnego, działa lepiej niż jednorazowe porządki.
  4. Po aktualizacji motywu lub rozszerzenia sprawdź ponownie — aktualizacja może nadpisać poprawki.

Nie zastępuj poprawek nakładką. Widżet nie zmienia kodu sklepu; więcej we wpisie Nakładki dostępności – dlaczego nie działają.

Czego nie wykryje narzędzie

Automatyczna kontrola znajdzie brakujące etykiety, niski kontrast czy przyciski bez nazwy. Nie oceni, czy tekst alternatywny dobrze opisuje produkt, czy kolejność fokusu jest logiczna ani czy komunikat o błędzie jest zrozumiały. W teście brytyjskiej służby cyfrowej GDS najlepsze narzędzie wykryło około 40% celowo wprowadzonych błędów, a wszystkie narzędzia razem 71%. Dlatego po poprawkach warto przejść ścieżkę zakupu ręcznie; różnice opisuje wpis Badanie dostępności strony: automatycznie czy ręcznie?.

Jak pomagamy

Pandus sprawdza sklep automatycznie według WCAG 2.2 AA i opisuje każdy problem z instrukcją dla Shopify, WooCommerce, PrestaShop i Shoptet. Monitoring co tydzień pokazuje nowe błędy po aktualizacji motywu lub wtyczki. To automatyczna kontrola, nie pełny audyt, i nie porada prawna. Czy przepisy dotyczą Państwa sklepu, pomoże ustalić sprawdzenie sklepu pod kątem EAA. Najczęstsze błędy z przykładami opisuje wpis o błędach dostępności w sklepach.

Źródła

Czytaj także