Najważniejsze wnioski
- Shopify jest platformą, a nie gwarancją dostępności całego sklepu. Dostępność zależy od motywu, zmian w kodzie, aplikacji, treści i konfiguracji procesu zakupowego.
- Motyw z Shopify Theme Store może spełniać wymagania platformy, ale jego późniejsze modyfikacje oraz aplikacje zewnętrzne wymagają osobnej kontroli.
- Automatyczne testy pomagają wykrywać powtarzalne błędy, ale nie zastępują testów klawiaturą, czytnikiem ekranu i testów krytycznych scenariuszy zakupowych.
- WCAGbot może szybko dodać funkcje wspierające dostępność, takie jak kontrast, powiększenie tekstu czy narzędzia skupienia. Nie zastępuje jednak audytu ani napraw w motywie, aplikacjach i treści.
- Największy priorytet w sklepie Shopify mają ścieżki prowadzące do zakupu: menu, wyszukiwarka, karta produktu, warianty, koszyk, formularze, komunikaty błędów i checkout.
Dla zarządzającego
Dostępność Shopify warto traktować jako element jakości obsługi, ograniczania ryzyka i porządkowania rozwoju sklepu. Nie wystarczy kupić motyw lub zainstalować widget. Potrzebny jest plan obejmujący motyw, aplikacje, treści oraz regularne testowanie ścieżki zakupowej po zmianach.
Dla sprzedaży
Zespół sprzedaży powinien umieć sprawdzić, czy klient może samodzielnie znaleźć produkt, wybrać wariant, zrozumieć cenę, dodać produkt do koszyka i przejść dalej. Bariery w tych miejscach mogą blokować zakup niezależnie od jakości oferty. WCAGbot pomaga użytkownikowi dostosować widok, ale błędy w przyciskach, opisach i formularzach trzeba naprawiać u źródła.
Dostępność Shopify trzeba oceniać na poziomie konkretnego sklepu, a nie samej platformy. Nawet jeśli Shopify rozwija dostępne komponenty i publikuje wymagania dla motywów, końcowy efekt zależy od wybranego motywu, kodu Liquid, aplikacji, zdjęć, opisów produktów, formularzy, filtrów oraz konfiguracji koszyka i checkoutu.
Jeżeli prowadzisz e-commerce na Shopify, zacznij od sprawdzenia, czy użytkownik może wykonać najważniejsze zadania bez myszy, przy powiększeniu oraz z pomocą technologii asystujących. Dopiero potem podejmij decyzję, co wymaga naprawy źródłowej, a jakie funkcje wspierające dostępność warto udostępnić od razu.
Najważniejsze wnioski
- Nie zakładaj, że gotowy motyw oznacza dostępny sklep.
- Testuj cały proces zakupu, nie tylko stronę główną.
- Po każdej instalacji aplikacji sprawdzaj klawiaturę, fokus, komunikaty i działanie mobilne.
- Naprawiaj błędy w kodzie oraz treści, a widget traktuj jako wsparcie użytkownika i pierwszy krok.
Czy Shopify jest dostępne cyfrowo?
Najuczciwsza odpowiedź brzmi: Shopify może wspierać budowę dostępnego sklepu, ale nie zapewnia automatycznie dostępności każdej witryny działającej na tej platformie.
Shopify deklaruje stosowanie WCAG 2.2 jako zasady projektowania i opisuje testowanie funkcji m.in. z użyciem automatycznych narzędzi, klawiatury, czytników ekranu i powiększenia. Deklaracja dotyczy jednak procesu oraz wybranych produktów Shopify. Nie oznacza, że każdy motyw, każda aplikacja i każda konfiguracja sklepu spełnia wymagania WCAG.
W praktyce należy rozdzielić pięć warstw:
- Panel administracyjny Shopify — środowisko zarządzania sklepem.
- Checkout — proces płatności i finalizacji zamówienia, w zakresie dostępnych konfiguracji.
- Motyw storefrontu — strona widoczna dla kupującego.
- Aplikacje zewnętrzne — np. popupy, czaty, rekomendacje, filtry, paski promocyjne i upselle.
- Treść oraz konfiguracja sklepu — zdjęcia, teksty alternatywne, nazwy linków, opisy wariantów i komunikaty.
Dostępność sklepu Shopify nie jest cechą logo platformy. Jest wynikiem decyzji podjętych w motywie, aplikacjach, treści i codziennym utrzymaniu sklepu.
Jak wybrać motyw Shopify pod kątem dostępności?
Motyw jest punktem wyjścia, ale nie jest dowodem pełnej dostępności. Shopify wymaga od motywów zgłaszanych do Theme Store określonych standardów, w tym średniego wyniku Lighthouse Accessibility na poziomie co najmniej 90 dla wskazanych stron. Taki wynik ma wartość jako filtr jakości, ale nie zastępuje testów manualnych ani audytu.
Przed zakupem lub wdrożeniem motywu sprawdź:
- czy menu, filtry, warianty i koszyk działają wyłącznie z klawiatury;
- czy fokus jest widoczny na każdym interaktywnym elemencie;
- czy modal, menu mobilne i wysuwany koszyk można zamknąć klawiszem Escape;
- czy po zamknięciu modala fokus wraca do logicznego miejsca;
- czy formularze mają widoczne etykiety i czy błędy są zrozumiałe;
- czy produkt można wybrać bez polegania wyłącznie na kolorze, obrazie lub geście;
- czy strona zachowuje funkcjonalność po powiększeniu widoku;
- czy tekst i elementy interfejsu mają odpowiedni kontrast strony.
WCAGbot Accessibility Path dla sklepu Shopify
Jeżeli motyw był intensywnie modyfikowany, jego pierwotna jakość nie ma decydującego znaczenia. Nowy slider, niestandardowy selektor wariantów lub zmiana menu mogą wprowadzić barierę niezależnie od tego, jak motyw działał przed modyfikacją.
Dlaczego aplikacje Shopify są obszarem ryzyka?
Aplikacje często odpowiadają za elementy najtrudniejsze do poprawnego wdrożenia: wyskakujące okna, bannery, filtry, szybki podgląd produktu, czaty, programy lojalnościowe czy dodatkowe formularze. Każdy z tych komponentów może zmienić kolejność fokusu, dodać pusty przycisk albo przekazać niejasny komunikat czytnikowi ekranu.
Nie oceniaj aplikacji wyłącznie na podstawie opisu w katalogu. Przetestuj ją w swoim motywie, razem z pozostałymi skryptami. Szczególnej kontroli wymagają:
- popupy rabatowe otwierające się automatycznie;
- karuzele i banery z ruchem;
- filtry kolekcji aktualizujące wyniki bez przeładowania strony;
- przyciski „szybkiego zakupu”;
- widgety opinii i rekomendacji;
- koszyk typu drawer oraz upsell po dodaniu produktu;
- banery cookies i czaty.
W przypadku komponentów dynamicznych nie wystarczy dodać atrybutu ARIA. Najpierw upewnij się, że istnieje właściwa struktura HTML, poprawna obsługa klawiatury i logiczne zarządzanie fokusem. Więcej o granicach tego podejścia wyjaśnia materiał ARIA w praktyce: kiedy wspiera dostępność strony.
Co testować w sklepie Shopify w pierwszej kolejności?
Największą wartość daje test ścieżek, które prowadzą użytkownika do zakupu lub kontaktu. Nie ograniczaj kontroli do strony głównej. Strona produktu może działać inaczej niż kolekcja, a koszyk inaczej niż checkout.
| Obszar sklepu | Co sprawdzić | Typowa bariera | Właściwa reakcja |
|---|---|---|---|
| Menu i wyszukiwarka | Tab, Shift+Tab, Enter, Escape, widoczny fokus | Menu rozwijane niedostępne z klawiatury | Naprawa komponentu w motywie lub aplikacji |
| Lista produktów i filtry | Obsługa filtrów, liczba wyników, aktualizacja treści | Brak informacji o zmianie wyników | Poprawa komunikatu i zachowania dynamicznego |
| Strona produktu | Nazwa, cena, wariant, dostępność, przycisk zakupu | Wariant rozpoznawalny wyłącznie kolorem | Dodanie tekstowej nazwy i poprawa kontrolek |
| Koszyk | Zmiana ilości, usuwanie produktu, suma, przejście dalej | Niekomunikowane dodanie produktu do koszyka | Naprawa komunikatu statusu i fokusu |
| Formularze | Etykiety, błędy, wymagane pola, podpowiedzi | Placeholder zamiast etykiety | Naprawa HTML i komunikatów błędów |
| Treści wizualne | ALT, kontrast, znaczenie ikon, nagłówki | Zdjęcie produktu bez opisu | Uzupełnienie treści i atrybutów |
Warto zacząć od szczegółowej kontroli dostępności formularzy, koszyka i płatności w e-commerce. Osobne procedury dla pól, etykiet i błędów znajdziesz także w artykule Dostępny formularz: jak projektować i testować zgodnie z WCAG.
Jak wykonać szybki test dostępności Shopify?
1. Zrób inwentaryzację sklepu
Zapisz nazwę i wersję motywu, listę aplikacji ingerujących w storefront, własne sekcje Liquid, skrypty marketingowe, banner cookies, chat oraz narzędzia analityczne. W przeciwnym razie trudno ustalić, co odpowiada za wykrytą barierę.
Co sprawdza motyw, audyt i widget dostępności
2. Uruchom test automatyczny
Lighthouse, WAVE, axe DevTools lub Accessibility Insights pomagają wychwycić m.in. problemy z kontrastem, etykietami, nagłówkami, nazwami przycisków czy atrybutami językowymi. Wynik traktuj jako listę startową, nie jako ocenę zgodności całego sklepu.
Dane WebAIM Million 2025 dobrze pokazują skalę ograniczeń automatycznej kontroli: badanie wykrywa błędy na stronach głównych, ale nie potwierdza dostępności pełnego procesu zakupowego. Brak błędu w raporcie nie oznacza braku bariery.
3. Przejdź sklep samą klawiaturą
Odłącz mysz lub świadomie jej nie używaj. Przejdź od strony głównej do produktu, wybierz wariant, dodaj produkt do koszyka, zmień ilość i rozpocznij checkout. Obserwuj fokus na każdym kroku. Pomocną instrukcję znajdziesz w artykule Nawigacja klawiaturą: jak testować stronę zgodnie z WCAG.
4. Sprawdź przynajmniej jeden czytnik ekranu
Test nie musi od razu zastępować pełnego badania eksperckiego, ale powinien odpowiedzieć na podstawowe pytania: czy przycisk ma nazwę, czy pole formularza ma etykietę, czy cena i wybrany wariant są zrozumiałe oraz czy komunikat po dodaniu produktu do koszyka jest ogłaszany?
5. Sprawdź tekst, obrazy i komunikaty
Właściciel sklepu ma bezpośredni wpływ na wiele barier treściowych. Uzupełniaj znaczące opisy zdjęć, ale nie twórz ALT na siłę dla obrazów czysto dekoracyjnych. Praktyczne zasady opisuje artykuł Tekst alternatywny ALT: jak opisywać obrazy na stronie.
WCAGbot Accessibility Path: plan dla sklepu Shopify
WCAGbot Accessibility Path porządkuje wdrożenie w taki sposób, aby szybkie wsparcie użytkownika nie przesłoniło napraw wymagających pracy w motywie i treści.
- Rozpoznaj zakres: motyw, aplikacje, strony i procesy, które wpływają na zakup.
- Ustal priorytety: najpierw bariery blokujące wybór produktu, koszyk, formularze i płatność.
- Przetestuj automatycznie i manualnie: połącz skaner z klawiaturą, czytnikiem ekranu i widokiem mobilnym.
- Napraw źródłowo: popraw kod, strukturę, etykiety, komunikaty oraz treści.
- Dodaj funkcje wspierające dostępność: udostępnij użytkownikom ustawienia kontrastu, typografii, skupienia lub czytania treści.
- Wykonaj retest: wróć do scenariuszy po aktualizacji motywu albo instalacji aplikacji.
Gdzie WCAGbot wspiera dostępność Shopify?
WCAGbot można uruchomić w Shopify przez dodanie jednej linii kodu, bez przebudowy całej witryny. Widget daje użytkownikowi dostęp do funkcji, które mogą poprawić komfort korzystania z istniejącej strony: trybów kontrastu, nasycenia i skali szarości, powiększenia tekstu, regulacji interlinii i odstępów, czytelnej czcionki, większego kursora, podświetlania nagłówków i linków, funkcji skupienia oraz czytania treści.
System może także automatycznie uzupełnić wybrane wykrywalne atrybuty ARIA, alt i title. Nie należy jednak zakładać, że automatyczne uzupełnienie rozwiąże każdy przypadek. Opis zdjęcia produktu wymaga znajomości jego znaczenia, a poprawna obsługa modala wymaga właściwego działania kodu i fokusu.
Ścieżka produktu do koszyka w Shopify
Dlatego WCAGbot jest rozsądnym pierwszym krokiem do dostępności, szczególnie gdy sklep potrzebuje szybko udostępnić użytkownikom funkcje personalizacji widoku. Nie zastępuje audytu WCAG, testów z użytkownikami ani naprawy błędów w motywie, aplikacjach i treści. Granice tych działań omawia artykuł Widget dostępności a audyt WCAG: różnice i wybór.
Doświadczeniowe CTA: po instalacji otwórz panel WCAGbot na stronie produktu. Zwiększ tekst, uruchom wybrany tryb kontrastu i użyj funkcji skupienia. Następnie spróbuj wybrać wariant oraz dodać produkt do koszyka. Jeśli proces dalej nie działa klawiaturą lub komunikat pozostaje niejasny, masz konkretny obszar do naprawy źródłowej.
Mini-scenariusz: sklep Shopify po instalacji aplikacji filtrów
Scenariusz ilustracyjny — nie opisuje wdrożenia u klienta. Sklep instaluje aplikację filtrów, aby ułatwić zawężanie wyników kolekcji. Po uruchomieniu funkcji filtr działa wizualnie, lecz użytkownik klawiatury nie widzi fokusu po otwarciu panelu. Po zatwierdzeniu filtra liczba wyników zmienia się bez komunikatu dla czytnika ekranu.
W tej sytuacji widget dostępności może pomóc użytkownikowi np. powiększyć tekst lub wyraźniej zobaczyć fokus, jeśli fokus istnieje. Nie naprawi jednak błędnej logiki panelu filtrów ani brakującego komunikatu o zmianie wyników. Zespół powinien zgłosić problem dostawcy aplikacji albo zmodyfikować integrację, a następnie ponownie przeprowadzić test klawiaturą i czytnikiem ekranu.
Jak podejść do wymagań prawnych dotyczących e-commerce?
Polski Akt o Dostępności, norma EN 301 549 i wytyczne WCAG to różne elementy tego samego obszaru, ale nie są tym samym. Ustawa określa obowiązki prawne, norma techniczna opisuje wymagania dostępności dla produktów i usług ICT, a WCAG zawiera wytyczne dotyczące treści internetowych.
To, czy konkretny sklep Shopify podlega obowiązkom wynikającym z Polskiego Aktu o Dostępności, zależy od rodzaju usługi, sposobu świadczenia, statusu przedsiębiorstwa i innych warunków ustawowych. Ten materiał ma charakter informacyjny, a nie porady prawnej. W sprawie zakresu wyłączeń oraz statusu mikroprzedsiębiorcy przeczytaj Mikroprzedsiębiorca a PAD: kiedy dotyczy e-commerce?. Jeżeli obowiązek informacyjny ma zastosowanie do Twojej działalności, pomocny będzie też materiał Informacja o dostępności usługi: co musi zawierać?.
Stan prawny wymaga każdorazowej weryfikacji przed podjęciem decyzji compliance. [DO WERYFIKACJI: aktualne brzmienie Polskiego Aktu o Dostępności, zakres obowiązków dla konkretnej usługi e-commerce oraz ewentualne wyłączenia.]
Podsumowanie dla właściciela sklepu
Dostępność Shopify nie zaczyna się i nie kończy na wyborze motywu. Zacznij od przejścia przez krytyczną ścieżkę zakupową bez myszy. Sprawdź menu, wyszukiwarkę, filtry, kartę produktu, warianty, koszyk, formularze i przejście do checkoutu. Potem ustal, które bariery wynikają z kodu motywu, które z aplikacji, a które z treści.
Test po instalacji aplikacji Shopify
Wprowadź naprawy źródłowe tam, gdzie użytkownik nie może wykonać zadania. Równolegle dodaj funkcje wspierające dostępność, aby użytkownik mógł dopasować kontrast, tekst lub sposób czytania strony do swoich potrzeb.
Dodaj funkcje dostępności swojej strony i przetestuj WCAGbot jako praktyczny pierwszy krok, a następnie zaplanuj audyt oraz trwałe usuwanie barier w sklepie Shopify.
FAQ: dostępność Shopify
Czy Shopify jest automatycznie zgodne z WCAG?
Nie. Shopify udostępnia narzędzia, dokumentację i wymagania dla wybranych obszarów, ale dostępność konkretnego sklepu zależy od motywu, aplikacji, modyfikacji kodu, treści i konfiguracji.
Czy motyw z Shopify Theme Store jest dostępny?
Motywy zgłaszane do Theme Store muszą spełnić wymagania Shopify, w tym dotyczące testu Lighthouse Accessibility. Nie oznacza to jednak, że motyw po modyfikacjach lub wraz z aplikacjami będzie dostępny w każdym scenariuszu.
Czy wynik 90 w Lighthouse oznacza pełną dostępność sklepu?
Nie. Lighthouse wykrywa część problemów technicznych. Nie potwierdzi samodzielnie poprawnej obsługi klawiatury, zrozumiałości procesu zakupowego ani jakości komunikatów dla czytnika ekranu.
Jakie strony Shopify testować poza stroną główną?
Sprawdź co najmniej kolekcje, wyszukiwarkę, stronę produktu, koszyk, checkout, formularz kontaktowy, logowanie, konto klienta i wersję mobilną. Uwzględnij też popupy, bannery cookies oraz funkcje dodane przez aplikacje.
Czy aplikacje Shopify mogą obniżyć dostępność sklepu?
Tak. Aplikacje mogą dodawać elementy interaktywne i dynamiczne, np. modale, filtry, czaty lub rekomendacje. Każdą aplikację należy sprawdzić po instalacji w rzeczywistym motywie sklepu.
Jak sprawdzić dostępność Shopify z klawiaturą?
Przejdź cały proces zakupu klawiszami Tab, Shift+Tab, Enter, Spacja i Escape. Sprawdź widoczność fokusu, kolejność przechodzenia, działanie menu, filtrów, wariantów, koszyka i możliwość zamykania modali.
Czy tekst alternatywny jest potrzebny przy każdym zdjęciu produktu?
Znaczące obrazy powinny otrzymać opis alternatywny przekazujący ich istotną treść. Obrazy dekoracyjne zwykle nie wymagają opisowego ALT. Opis nie powinien bezrefleksyjnie powtarzać nazwy pliku ani danych technicznych bez znaczenia dla użytkownika.
Czy WCAGbot naprawia błędy w motywie Shopify?
WCAGbot wspiera użytkownika funkcjami takimi jak kontrast, powiększenie tekstu, czytanie treści czy podświetlanie elementów. Nie zastępuje naprawy błędnego kodu motywu, niepoprawnych formularzy, niedostępnych aplikacji ani niejasnych opisów produktów.
Czy widget dostępności wystarczy do spełnienia wymagań prawnych?
Nie należy traktować widgetu jako samodzielnego potwierdzenia spełnienia obowiązków prawnych lub pełnej zgodności z WCAG. Wymagania należy analizować w odniesieniu do konkretnej usługi, a bariery usuwać także w kodzie i treści.
Jak często testować dostępność sklepu Shopify?
Test wykonaj przed uruchomieniem sklepu, po zmianie motywu, po instalacji aplikacji, po większej zmianie koszyka lub formularza oraz w ramach regularnego utrzymania. Szczególnie ważny jest retest elementów wpływających na zakup.
