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

5 czerwca 2026

Krótka odpowiedź. Shopify kładzie dobre fundamenty, ale nie dostarcza dostępnego sklepu "z pudełka". Większość błędów siedzi w Twoim motywie, Twoich treściach i Twoich aplikacjach — a właśnie je możesz często naprawić raz, na poziomie całego motywu. Przejdź przez sześć punktów poniżej (kontrast, teksty alternatywne, nagłówki, aplikacje, klawiatura, język), a większość problemów masz z głowy.

Dlaczego sam Shopify nie wystarczy?

Motyw Shopify to szablon. To, czy Twoja strona spełnia WCAG, zależy od tego, jak ten motyw został zbudowany, jakie kolory wybrałeś, jakie aplikacje zainstalowałeś i jak uzupełniłeś produkty. Dwa sklepy na tym samym motywie mogą więc wypaść zupełnie inaczej. Dobra wiadomość: ponieważ wiele elementów powtarza się przez motyw, jedna poprawka często pokrywa setki stron.

1. Sprawdź kontrast kolorów

Najczęstszy błąd. Wejdź w panelu do Online Store → Themes → Customize → Theme settings (koło zębate) → Colors i 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 teksty przycisków, etykiety cen, linki — i na tekst na samym przycisku Add to cart. 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

Wejdź w Products, kliknij produkt i przewiń do Media → kliknij zdjęcie → Add alt text. 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="").

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 Shopify nagłówki widzisz w sekcjach i blokach rich text; nie przeskakuj poziomów.

4. Uważaj na aplikacje

To często największe źródło problemów. Aplikacje do recenzji, czatu, pop-upów i filtrów wstrzykują własny kod — często przez iFrame'y lub Shadow DOM — 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 aplikacji w ciemno i zawsze testuj stronę z włączonymi aplikacjami. Jeśli aplikacja okaże się niedostępna, przejdź na alternatywę, która normy WCAG respektuje.

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, koszyka, kasy — i czy zawsze widzisz, gdzie jest fokus? Wiele osób nawiguje właśnie tak, a ten test szybko obnaża bariery.

6. Sprawdź ustawienie języka

Zadbaj, by motyw ustawiał właściwy atrybut języka, dzięki czemu czytnik ekranu wybierze poprawną wymowę. Wejdź w Themes → Actions (⋯) → Edit code, otwórz layout/theme.liquid i sprawdź, że tag <html> zawiera zmienną języka: <html lang="{{ request.locale.iso_code }}">. Shopify zwykle ogarnia to dobrze, ale zweryfikuj to po użyciu aplikacji tłumaczących.

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

Element Shopify	Częsty błąd	Naprawa
Przyciski	zbyt jasna czcionka na przycisku "Do kasy"	kontrast w ustawieniach motywu do co najmniej 4,5:1
Zdjęcia produktów	nazwa pliku jako opis (`product_v2.png`)	funkcjonalny tekst alternatywny przez Media
Pop-up koszyka	krzyżyk zamykania (`X`) bez etykiety	`aria-label="Zamknij koszyk"` w szablonie
Aplikacja dostępności	instalacja widgetu overlay	unikać — nie naprawia kodu i nie chroni przed roszczeniami

Czy pomoże aplikacja dostępności z Shopify App Store?

Nie. Gdy wyszukasz w App Store hasło "accessibility", znajdziesz dziesiątki aplikacji obiecujących zgodność sklepu jednym kliknięciem, za pomocą widgetu. Nie daj się nabrać: nie naprawiają one Twojego motywu bazowego, 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 Shopify 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, aplikacji i treści razem wziętych. Czy European Accessibility Act dotyczy Ciebie, sprawdzisz w naszej liście kontrolnej. I uwaga: aplikacja typu overlay tego nie rozwiązuje — nie naprawia kodu Twojego motywu.

Skąd mam wiedzieć, na czym mój sklep Shopify 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, często naprawiasz to raz dla całego sklepu. W mniej niż 60 sekund, bez konta.