Dostępność na Shopify, WooCommerce, PrestaShop, Shoperze i IdoSell. Co poprawić na każdej platformie

Zasada ogólna: platforma to nie wszystko

Każda z popularnych platform pozwala zbudować dostępny sklep, ale żadna nie gwarantuje go „z pudełka”. Typowy sklep to: rdzeń platformy (zwykle w niezłym stanie), motyw (różnie), wtyczki i aplikacje (najczęściej źródło błędów) oraz treści dodawane przez zespół. W naszym przeglądzie polskich sklepów większość błędów powtarzała się w szablonie, więc jedna poprawka usuwała problem na setkach stron.

Shopify

• Motyw: oficjalne motywy Shopify są projektowane z myślą o dostępności, a sklep z motywami ma własne wymagania jakościowe. Problem zaczyna się przy mocno modyfikowanych motywach i motywach spoza oficjalnego sklepu.
• Aplikacje: recenzje, wyskakujące okna z rabatem, czaty, quizy i „szybki podgląd” często wprowadzają przyciski bez nazw i pułapki fokusu.
• Gdzie poprawiać: edytor kodu motywu (pliki Liquid i CSS), teksty alternatywne w panelu produktów i plików.
• Checkout: kasa Shopify jest zarządzana przez platformę, ale własne rozszerzenia i skrypty w kasie musisz sprawdzić sam.

WooCommerce (WordPress)

• Motyw: wybieraj motywy z oznaczeniem „accessibility ready” w katalogu WordPress i sprawdzaj je po instalacji.
• Kreatory stron: rozbudowane page buildery potrafią generować głęboko zagnieżdżony kod bez semantyki. Nagłówki ustawiane „na oko” rozmiarem czcionki zamiast poziomem to częsty błąd.
• Wtyczki: filtry produktów, formularze, czaty i bramki płatności sprawdzaj osobno. Każda aktualizacja może zmienić ich kod.
• Gdzie poprawiać: motyw potomny (child theme), szablony WooCommerce nadpisane w motywie, ustawienia wtyczek.

PrestaShop

• Motyw: domyślny motyw Classic jest dobrą bazą, a nowszy motyw Hummingbird z PrestaShop 9 stawia na nowocześniejszy kod. Motywy kupione w marketplace bywają bardzo różnej jakości.
• Moduły: mega menu, karuzele, filtry fasetowe i moduły opinii to najczęstsze źródła błędów.
• Gdzie poprawiać: pliki szablonów Smarty (.tpl) w motywie potomnym, ustawienia modułów, teksty alternatywne obrazów w panelu.

Shoper

• Szablon: sklep działa w modelu SaaS, więc zakres zmian zależy od szablonu i trybu edycji. Wybieraj szablony, które możesz edytować w zakresie HTML i CSS.
• Treści: uzupełnij teksty alternatywne zdjęć produktów i banerów oraz unikaj tekstu wpisanego w grafikę.
• Gdzie poprawiać: edycja szablonu (style i fragmenty HTML), ustawienia modułów, a w sprawach rdzenia platformy zgłoszenie do supportu.

IdoSell

• Szablon: IdoSell pozwala na rozbudowane modyfikacje szablonów graficznych. Poprawki semantyki (nagłówki, nazwy przycisków, etykiety) wprowadza się w kodzie szablonu.
• Gdzie poprawiać: edytor szablonu i ustawienia elementów sklepu. Warto przekazać raport z audytu wdrożeniowcowi lub działowi wsparcia.

Magento (Adobe Commerce)

• Motyw: domyślny motyw Luma ma znane problemy z dostępnością, więc wiele wdrożeń korzysta z własnych frontendów. Dostępność zależy więc w dużej mierze od agencji, która budowała sklep.
• Gdzie poprawiać: szablony i komponenty frontendu, ze ścisłym testowaniem po każdym wdrożeniu.

Sky-Shop i sklepy na zamówienie

Na mniejszych platformach SaaS zasada jest ta sama co na Shoperze: popraw to, co możesz w szablonie i treściach, a resztę zgłoś dostawcy z konkretnym raportem. W sklepie pisanym na zamówienie pełną odpowiedzialność za kod ma Twój zespół lub agencja, więc wpisz wymaganie WCAG 2.1/2.2 AA do umowy.

Lista kontrolna dla każdej platformy

1. Przeskanuj sklep i zapisz wynik wyjściowy.
2. Napraw błędy szablonu: nagłówki, nazwy przycisków i linków, etykiety pól, kontrast, widoczny fokus.
3. Sprawdź każdą wtyczkę lub aplikację osobno. Usuń te, których nie da się poprawić.
4. Uzupełnij teksty alternatywne zdjęć produktów, zaczynając od najlepiej sprzedających się.
5. Przejdź ścieżkę zakupu klawiaturą aż do płatności.
6. Ponownie przeskanuj sklep i opublikuj informację o dostępności.