Dostępność sklepu internetowego widać najlepiej w miejscu, w którym klient rezygnuje z zakupu. Wpisuje kod pocztowy, formularz odrzuca go jako błędny i podświetla pole na czerwono. Osoba korzystająca z czytnika ekranu nie dostaje żadnego komunikatu i wraca na początek formularza. Po trzeciej próbie zamyka kartę. W statystykach sklepu nie ma o tym ani słowa. Jest tylko jeden porzucony koszyk więcej, nieodróżnialny od setek innych. Ten tekst przechodzi całą ścieżkę zakupową po kolei. Pokazuje, co się na niej łamie, kto za to odpowiada i od czego zacząć, gdy budżet jest ograniczony.
Dlaczego sklep ma trudniej niż zwykła strona
Obowiązek dostępności obejmuje w sklepie cały proces zawierania umowy, a nie samą stronę. To jest różnica, która przekłada się wprost na zakres prac i na budżet.
Strona firmowa ma do przejścia kilka szablonów i formularz kontaktowy. Sklep ma sekwencję ekranów, w której każdy kolejny zależy od poprzedniego. Wystarczy, że jeden z nich nie da się obsłużyć, a cała droga do zakupu jest zamknięta, niezależnie od tego, jak dobrze działa reszta.
Do tego dochodzi liczba właścicieli poszczególnych elementów. Na jednej ścieżce spotykają się kod platformy, szablon, dodatki od różnych dostawców i treść wpisywana przez obsługę sklepu. Przy stronie firmowej te warstwy sprowadzają się zwykle do dwóch.
Ścieżka wygląda zwykle tak: lista produktów, karta produktu, koszyk, wybór dostawy, płatność, potwierdzenie. Sześć kroków, z czego trzy ostatnie prawie zawsze angażują oprogramowanie firm trzecich. Sam zakres obowiązku i to, kogo dotyczy, rozstrzyga tekst o wymaganiach WCAG 2.1 AA dla strony i sklepu.
Co łamie dostępność na każdym kroku ścieżki zakupowej
Poniższa lista opisuje typowe problemy powtarzające się w sklepach niezależnie od platformy. Formułujemy je jako obserwacje rynkowe, nie jako wynik badania na próbie polskich sklepów.
Lista produktów
Filtry i sortowanie odświeżają wyniki bez przeładowania strony. Zmiana zachodzi po cichu, więc osoba korzystająca z czytnika ekranu nie wie, że lista jest już inna. Wygląda to jak brak reakcji na kliknięcie.
Drugi problem to liczba wyników podana wyłącznie wizualnie oraz przewijanie doładowujące kolejne produkty. Bez informacji o tym, ile pozycji przybyło, nawigacja po liście staje się zgadywaniem.
Wyszukiwarka i podpowiedzi
Podpowiedzi pojawiające się pod polem wyszukiwania to osobny mechanizm i osobny problem. Lista sugestii wyświetla się dynamicznie, a osoba korzystająca z czytnika ekranu nie dostaje informacji, że coś się pod polem pojawiło. Nie wie też, ile jest podpowiedzi ani którą właśnie zaznacza.
Drugi problem to obsługa strzałkami. Jeśli podpowiedź da się wybrać wyłącznie myszą, wyszukiwarka przestaje być drogą na skróty. Staje się kolejnym miejscem, w którym trzeba zgadywać.
Karta produktu
Galeria zdjęć bywa obsługiwana wyłącznie gestem albo strzałkami, których nie da się użyć z klawiatury. Warianty koloru bywają zaś kwadratami bez nazwy, więc wybór opiera się na samym kolorze.
Do tego dochodzą opisy alternatywne. Zdjęcie produktu bez opisu to w sklepie brak informacji handlowej, a nie brak ozdoby. Tabela rozmiarów w wyskakującym oknie potrafi zamknąć całą kartę dla osoby korzystającej z klawiatury.
Koszyk
Zmiana ilości przelicza sumę i nie informuje o tym w żaden sposób poza wizualnym. To samo dotyczy usunięcia pozycji i zastosowania kodu rabatowego. Klient słyszy ciszę i nie wie, czy operacja się udała.
Osobny problem to wygasanie sesji koszyka po określonym czasie. Jeśli sklep nie ostrzega o tym i nie pozwala przedłużyć czasu, osoba wypełniająca formularz wolniej traci zawartość koszyka bez zapowiedzi.
Wybór dostawy
Mapa punktów odbioru bywa częstym twardym blokerem w polskich sklepach. Pochodzi od zewnętrznego dostawcy, obsługuje się ją myszą i bywa jedynym sposobem wskazania punktu.
Rozwiązanie nie wymaga poprawiania cudzej mapy. Wystarczy alternatywna lista punktów z wyszukiwarką po kodzie pocztowym, dostępna z klawiatury, obok mapy.
Płatność
Formularz płatności działa zwykle w ramce zewnętrznego operatora, więc sklep nie ma wpływu na jego kod. Sklep ma za to wpływ na to, co dzieje się wokół. Komunikat o odrzuconej płatności wyświetlany samą czerwoną ramką nie mówi nic osobie, która jej nie widzi.
Potwierdzenie
Ostatni krok bywa pomijany w pracach, bo zamówienie jest już złożone. Strona podziękowania i wiadomość z potwierdzeniem to jednak nadal część usługi. Numer zamówienia zapisany wyłącznie w obrazku albo w pliku PDF bez warstwy tekstowej jest niedostępny.
Kto odpowiada – właściciel sklepu czy dostawca platformy
Za zgodność usługi handlu elektronicznego odpowiada usługodawca, czyli podmiot, który oferuje ją lub świadczy konsumentowi. W typowym sklepie jest to jego operator albo sprzedawca. Sam wybór platformy abonamentowej nie przenosi tego ustawowego obowiązku na dostawcę oprogramowania.
Warto też wiedzieć, co same platformy piszą o tym we własnej dokumentacji, bo nie mówią tego samego.
| Platforma | Co deklaruje w swojej dokumentacji | Co wskazuje jako kontrolowane przez sprzedawcę |
|---|---|---|
| Shoper | Zmiany w kodzie platformy | Treści i elementy dodawane samodzielnie |
| Shopify | Rozwój własnych usług wobec WCAG 2.2 | Kod szablonu, nad którym sprzedawca ma pełną kontrolę |
Shoper opisuje ten podział w materiale o przygotowaniu sklepu do wymogów WCAG 2.1 AA. Platforma bierze na siebie techniczną stronę i zmiany w kodzie, a właściciel sklepu ma zadbać o treści oraz elementy, które dodaje sam. Uruchomiła też osobny adres do zgłaszania problemów z dostępnością w oprogramowaniu.
Shopify w swoim oświadczeniu deklaruje pracę nad zgodnością własnych usług objętych dyrektywą 2019/882 i przyjmuje WCAG 2.2 jako punkt odniesienia. W tym samym dokumencie zaznacza, że sprzedawcy mają pełną kontrolę nad kodem swoich szablonów.
Co z tego wynika praktycznie
Dokumenty opisują różne zakresy. Shoper wprost dzieli zadania między siebie a sklep, natomiast Shopify opisuje własne działania i kontrolę sprzedawcy nad kodem szablonu. W praktyce sklep kontroluje treść, modyfikacje szablonu i dobór dodatków. Zakres możliwych zmian w silniku oraz szablonie bazowym zależy od platformy i umowy.
Na abonamencie pole manewru bywa węższe i trzeba to uczciwie powiedzieć. Jeśli kodu platformy nie da się nadpisać ani ominąć, pozostaje zgłoszenie problemu dostawcy albo zmiana rozwiązania. Warto zgłaszać takie rzeczy formalnie i zachowywać korespondencję, bo dokumentuje ona działania firmy.
Zapytaj też dostawcę wprost o plan i termin. Deklaracja pracy nad zgodnością to nie to samo co gotowa funkcja.
Osobno wygląda to na własnym stosie technologicznym, gdzie kontrolujesz cały kod i żadnej poprawki nie musisz od nikogo wypraszać. Sposób realizacji tych poprawek w najczęstszym polskim stosie opisuje wpis o dostępności w WordPressie.
Devstock · Software house z Warszawy
Sklep, który przeżyje skalowanie
Stawiamy sklepy WooCommerce, Shopify, PrestaShop – z integracjami z ERP, magazynem, bramkami płatności i kurierami. Plus optymalizacja performance i checkout funnel.
Sprawdź usługę →Dodatki i integracje, czyli cudzy kod w Twoim sklepie
Wiele sklepów uruchamia obok własnego kodu kilka zewnętrznych mechanizmów, a każdy z nich może złamać dostępność niezależnie od reszty. Warto zrobić ich spis, zanim zamówisz jakiekolwiek poprawki.
Na liście znajdą się zwykle: baner zgody na pliki cookie, okno z zapisem do newslettera, widżet czatu, karuzela opinii, mapa punktów odbioru, ramka operatora płatności, kalkulator rat oraz wyszukiwarka podpowiadająca produkty. Część z nich pojawia się na każdej podstronie, więc jeden zepsuty element psuje cały serwis.
Częstym blokerem w tej grupie jest okno, którego nie da się zamknąć klawiaturą. Drugi to element przechwytujący zaznaczenie i niepuszczający go dalej. Baner zgody bywa tu pierwszy w kolejności, bo wyświetla się przed wszystkim innym.
Baner zgody jako pierwszy test
Baner zgody na pliki cookie bywa pierwszym elementem, z którym klient styka się podczas pierwszej wizyty. Bywa też pierwszym, który potrafi zablokować wszystko inne. Jeśli nie da się go zamknąć klawiaturą, dalsza część sklepu przestaje mieć znaczenie.
Sprawdzenie zajmuje kilkanaście sekund. Wejdź na stronę w trybie prywatnym przeglądarki, nie dotykaj myszy i spróbuj zatwierdzić wybór samym klawiszem Tab oraz Enter. Sprawdź przy okazji, czy przycisk odrzucenia jest tak samo dostępny jak przycisk akceptacji.
Drugi test dotyczy kolejności. Po zamknięciu banera zaznaczenie ma wrócić na stronę, a nie na jej początek albo w miejsce, którego nie widać.
Zasada praktyczna jest prosta. Przy każdym dodatku ustal, czy dostawca deklaruje zgodność z WCAG i w której wersji. Jeśli nie deklaruje, załóż, że zgodny nie jest, i sprawdź go samodzielnie klawiaturą. Przy wyborze nowego dodatku takie pytanie kosztuje mniej niż wymiana rozwiązania po roku.
Od czego zacząć, gdy budżet jest ograniczony
Zacznij od tego, co blokuje złożenie zamówienia, a resztę zostaw na później. Ta kolejność jest bardziej biznesowa niż porządek według numerów kryteriów. Dobry raport i tak powinien oznaczać wagę usterek, więc jedno nie wyklucza drugiego.
- Przejdź ścieżkę zakupową samą klawiaturą. Od listy produktów do potwierdzenia. Każde miejsce, w którym utkniesz, jest pozycją numer jeden na liście.
- Napraw komunikaty w formularzu zamówienia. Błędy walidacji opisane tekstem, powiązane z polem, którego dotyczą.
- Dołóż alternatywę dla mapy punktów odbioru. Lista z wyszukiwaniem po kodzie pocztowym rozwiązuje ten częsty twardy bloker.
- Uzupełnij opisy alternatywne w kartach produktów. Zacznij od bestsellerów, a nie od całego katalogu.
- Popraw kontrast i widoczne zaznaczenie w szablonie. To jedna zmiana w stylach, która działa na wszystkich podstronach naraz.
Reszta, czyli galerie, karuzele, tabele rozmiarów i archiwalne opisy, wchodzi do planu na kolejny kwartał. Zapisz tę kolejność razem z uzasadnieniem, bo to jest dowód, że firma zajęła się sprawą świadomie, a nie przypadkiem. Przydaje się i przy skardze klienta, i przy ankiecie zakupowej kontrahenta. Rzetelną listę uszeregowaną według wagi daje przegląd, którego zakres i koszt rozkłada wpis o audycie WCAG. Jeśli wolisz od razu ustalić zakres poprawek w swoim sklepie, opisz go w formularzu wyceny.
Co przy okazji zyskuje sklep
Te same poprawki poprawiają obsługę sklepu w kilku sytuacjach, które nie mają nic wspólnego z niepełnosprawnością. Nie obiecujemy wzrostu sprzedaży, bo takiej liczby nie da się uczciwie podać bez badania na Twoim sklepie.
Opisy alternatywne w kartach produktów są treścią, którą czytają też roboty wyszukiwarek. Poprawiony kontrast działa na telefonie w pełnym słońcu. Obsługa klawiaturą przyspiesza pracę Twojemu własnemu zespołowi obsługi zamówień. Czytelne komunikaty błędów mogą zmniejszyć liczbę zgłoszeń do obsługi klienta, bo klient rozumie, co poszło nie tak.
Jest też skutek organizacyjny, o którym rzadko się mówi. Uporządkowane opisy alternatywne i konsekwentna struktura kart produktów ułatwiają późniejsze migracje oraz eksport danych do porównywarek. Informacja siedzi wtedy w treści, a nie w obrazku.
FAQ – najczęstsze pytania o dostępność sklepu
Czy sklep na Shoperze albo Shopify też podlega przepisom?
Tak, ponieważ obowiązek dotyczy usługi świadczonej konsumentowi, a nie technologii, w której ją zbudowano. Obie platformy publikują materiały o dostępności. Shoper wprost dzieli zadania, natomiast Shopify opisuje własne działania i kontrolę sprzedawcy nad kodem szablonu. Wybór abonamentu zawęża pole manewru, lecz nie zdejmuje obowiązku.
Czy mikrofirma jest zwolniona z dostosowania sklepu?
Przepisów ustawy nie stosuje się do usług oferowanych lub świadczonych przez mikroprzedsiębiorców, więc sklep prowadzony przez taką firmę jest poza zakresem. Zwolnienie dotyczy jednak usług, a nie produktów objętych ustawą. Status mikroprzedsiębiorcy zależy też od zatrudnienia i obrotów, więc rosnąca firma wchodzi w obowiązek bez żadnego powiadomienia.
Czy sklep musi publikować deklarację dostępności?
Nie w formie znanej z serwisów urzędowych, bo tamten wzór wynika z osobnej ustawy o podmiotach publicznych. Firmę prywatną obowiązuje podanie do publicznej wiadomości informacji o tym, w jaki sposób usługa spełnia wymagania dostępności. Miejscem jest regulamin świadczenia usług albo równoważny dokument.
Od czego zacząć, gdy sklep ma 5 tysięcy produktów?
Od szablonów, a nie od produktów. Karta produktu jest zwykle jednym szablonem, więc poprawka w nim działa na cały katalog naraz. Opisy alternatywne uzupełniaj etapami, zaczynając od produktów, które faktycznie się sprzedają, i wpisz ten obowiązek do procesu dodawania nowych pozycji.
Podsumowanie
W sklepie obowiązek dostępności obejmuje cały proces zakupu, więc pojedynczy nieobsługiwany krok zamyka drogę do zamówienia niezależnie od jakości reszty serwisu. Najwięcej problemów siedzi w czterech miejscach: cichej aktualizacji koszyka, mapie punktów odbioru, komunikatach walidacji w formularzu zamówienia oraz w informacji o odrzuconej płatności. Za zgodność odpowiada usługodawca, czyli podmiot oferujący usługę konsumentowi, a wybór platformy abonamentowej tego obowiązku nie przenosi. Przy ograniczonym budżecie naprawiaj w kolejności blokowania zakupu, czyli najpierw ścieżkę do złożenia zamówienia, a galerie i archiwalne opisy zostaw na kolejny kwartał. Jeśli chcesz ustalić zakres poprawek dla konkretnego sklepu, opisz go w formularzu wyceny – dostaniesz kolejność prac zaczynającą się od tego, co blokuje złożenie zamówienia.
