Dostępność w sklepie internetowym — co sprawdzić na karcie, w koszyku i w płatności
Dostępność sklepu internetowego przestała być tematem tylko dla dużych marek. Europejskie przepisy o dostępności produktów i usług objęły handel elektroniczny, a klienci z niepełnosprawnościami, osoby starsze i wszyscy korzystający z telefonu w trudnych warunkach oczekują, że zakupy będą możliwe bez przeszkód. Sklep, w którym nie da się dodać produktu do koszyka bez myszy albo czytnik ekranu nie odczyta ceny, traci klientów — zwykle nie wiedząc o tym, bo tacy klienci po prostu odchodzą.
Krótka odpowiedź: dostępny sklep pozwala przejść całą ścieżkę zakupu — od wyszukania produktu, przez wybór wariantu, koszyk i dane dostawy, po płatność i potwierdzenie — tylko klawiaturą, z czytnikiem ekranu, przy powiększeniu tekstu i bez polegania wyłącznie na kolorze. Standardem odniesienia są wytyczne WCAG na poziomie AA.
Największe problemy zwykle nie leżą w wyglądzie, lecz w interaktywnych elementach: wyborze rozmiaru, filtrach, oknach dialogowych i bramkach płatności.
Dlaczego dostępność ma znaczenie dla sklepu
| Powód | Wyjaśnienie |
|---|---|
| Wymagania prawne | Przepisy wdrażające europejski akt o dostępności obejmują usługi handlu elektronicznego, z wyjątkami dla najmniejszych przedsiębiorstw |
| Grupa klientów | Osoby z niepełnosprawnościami, starsze, z czasowymi ograniczeniami, jak złamana ręka |
| Wygoda wszystkich | Czytelny kontrast, duże przyciski i jasne komunikaty pomagają każdemu, szczególnie na telefonie |
| Widoczność w wyszukiwarce | Opisy zdjęć, poprawna struktura nagłówków i czytelne linki pomagają również robotom |
| Mniej porzuconych koszyków | Bariery dostępności to często te same bariery, które zniechęcają innych użytkowników |
Ogólne zasady dostępności stron opisujemy w tekście o WCAG i dostępności strony. Tutaj skupiamy się na elementach specyficznych dla sklepów.
Nawigacja i struktura
- Link „Przejdź do treści" na początku strony, pozwalający pominąć rozbudowane menu.
- Menu kategorii obsługiwane klawiaturą — rozwijanie, poruszanie się strzałkami, zamykanie klawiszem Escape.
- Widoczny fokus — wyraźna ramka wokół aktywnego elementu. Usunięcie jej ze względów estetycznych to jeden z najczęstszych błędów.
- Logiczna kolejność przechodzenia klawiszem Tab, zgodna z układem wizualnym.
- Hierarchia nagłówków — jeden nagłówek główny na stronie, kolejne poziomy bez przeskoków.
- Obszary strony oznaczone jako nagłówek, nawigacja, treść główna i stopka.
- Okruszki z informacją o bieżącej stronie.
Lista produktów i filtry
Filtry to jedno z najtrudniejszych miejsc w sklepie pod względem dostępności. Często są zbudowane z elementów, które wyglądają jak pola wyboru, ale nie są nimi dla czytnika ekranu.
- Prawdziwe pola wyboru i przyciski zamiast klikanych elementów bez znaczenia semantycznego.
- Informacja o zmianie wyników — po zaznaczeniu filtra czytnik ekranu powinien ogłosić nową liczbę produktów.
- Brak przeładowania z utratą fokusu — po zastosowaniu filtra użytkownik nie może wylądować na początku strony.
- Suwaki zakresu cen z alternatywą w postaci pól do wpisania wartości.
- Próbki kolorów z nazwą koloru, nie tylko kwadratem w danym odcieniu.
- Karta produktu na liście jako jeden link z nazwą, zamiast kilku osobnych linków do tego samego adresu.
- Doładowywanie produktów z przyciskiem „Pokaż więcej" zamiast wyłącznie przewijania nieskończonego, do którego nie da się dotrzeć klawiaturą.
Karta produktu
| Element | Wymaganie | Typowy błąd |
|---|---|---|
| Zdjęcia | Tekst alternatywny opisujący produkt i widoczne cechy | Brak opisu lub nazwa pliku |
| Galeria | Przyciski poprzednie i następne z etykietami, obsługa klawiatury | Przewijanie tylko gestem lub myszą |
| Wybór wariantu | Grupa przycisków lub lista z nazwą, informacja o niedostępnych rozmiarach tekstem | Niedostępny rozmiar oznaczony tylko przekreśleniem lub szarym kolorem |
| Cena | Cena promocyjna i poprzednia czytelne dla czytnika | Przekreślona cena odczytywana jak zwykła, bez kontekstu |
| Dodaj do koszyka | Przycisk z czytelną nazwą i ogłoszeniem wyniku | Brak informacji, że produkt został dodany |
| Tabela rozmiarów | Prawdziwa tabela z nagłówkami, w dostępnym oknie | Obrazek z tabelą |
| Wideo | Napisy, brak automatycznego odtwarzania z dźwiękiem | Film bez napisów i kontroli |
Uwaga praktyczna: tekst alternatywny zdjęcia produktowego nie powinien powtarzać samej nazwy produktu, która jest już obok. Lepiej opisać to, co widać i co ma znaczenie przy zakupie: „Sukienka midi w kolorze butelkowej zieleni, widok z tyłu, zapięcie na kryty zamek". O standardach zdjęć piszemy w tekście o zdjęciach produktowych.
Okna dialogowe i komunikaty
Sklepy intensywnie korzystają z okien wyskakujących: podgląd koszyka, zapis do newslettera, zgody na pliki cookies, szybki podgląd produktu. Każde z nich może zablokować użytkownika klawiatury lub czytnika ekranu.
- Fokus przenoszony do okna po jego otwarciu i zatrzymany w nim do zamknięcia.
- Zamknięcie klawiszem Escape i przyciskiem z etykietą „Zamknij".
- Powrót fokusu do elementu, który otworzył okno.
- Baner zgód na cookies obsługiwany klawiaturą i nie zasłaniający treści bez możliwości zamknięcia.
- Komunikaty o dodaniu do koszyka ogłaszane czytnikom ekranu bez przenoszenia użytkownika.
- Brak okien pojawiających się automatycznie w trakcie przeglądania produktów.
Koszyk i zamówienie
Proces zamówienia to miejsce, w którym bariery kosztują najwięcej, bo użytkownik już zdecydował się na zakup.
- Zmiana liczby sztuk przyciskami z etykietami „Zwiększ ilość" i „Zmniejsz ilość" oraz polem do wpisania.
- Usuwanie produktu przyciskiem z nazwą produktu w etykiecie — „Usuń: Kurtka zimowa, rozmiar M".
- Ogłaszanie zmiany sumy po modyfikacji koszyka.
- Etykiety pól formularza widoczne cały czas, nie tylko jako tekst znikający po kliknięciu.
- Autouzupełnianie — pola adresowe oznaczone tak, by przeglądarka mogła je wypełnić.
- Błędy walidacji opisane tekstem przy polu, ogłaszane i powiązane z polem.
- Wybór dostawy jako grupa przycisków opcji z pełnym opisem w etykiecie.
- Mapa punktów odbioru z alternatywą w postaci listy lub wyszukiwania po adresie.
- Brak limitu czasu na wypełnienie lub możliwość jego wydłużenia.
Wybór punktu odbioru na mapie jest częstą barierą. Dostępną listę punktów opisujemy w tekście o integracji z paczkomatami, a o usprawnieniach koszyka — w materiale o optymalizacji koszyka.
Płatność
Płatność często odbywa się w komponentach dostarczanych przez operatora, na które sklep ma ograniczony wpływ. Mimo to odpowiedzialność za całą ścieżkę spoczywa na sprzedawcy.
- Sprawdzenie dostępności bramki przy wyborze operatora płatności — przejście klawiaturą i czytnikiem ekranu.
- Lista banków z nazwami tekstowymi, nie tylko logotypami.
- Kody weryfikacyjne z odpowiednim czasem na wpisanie.
- Jasna informacja o przekierowaniu do zewnętrznego serwisu i powrocie.
- Strona potwierdzenia z numerem zamówienia w nagłówku i podsumowaniem tekstowym.
- Potwierdzenie e-mail w dostępnym formacie, z tekstem zamiast grafiki.
Kolor, kontrast i powiększenie
- Kontrast tekstu zgodny z wymaganiami, także na przyciskach i etykietach promocyjnych.
- Informacja nie tylko kolorem — dostępność, promocja, błąd oznaczone również tekstem lub ikoną.
- Powiększenie do 200% bez utraty treści i funkcji, bez przewijania w poziomie.
- Obszary kliknięcia wystarczająco duże na ekranach dotykowych.
- Animacje z możliwością wyłączenia i respektowaniem ustawień systemu ograniczających ruch.
Jak testować
| Metoda | Co wykrywa | Ograniczenia |
|---|---|---|
| Narzędzia automatyczne | Brak tekstów alternatywnych, kontrast, brak etykiet, błędy struktury | Wykrywają tylko część problemów |
| Test klawiaturą | Blokady, niewidoczny fokus, niedostępne elementy | Wymaga cierpliwości, ale nie wiedzy specjalistycznej |
| Test z czytnikiem ekranu | Brak ogłoszeń, mylące etykiety, zła kolejność odczytu | Wymaga podstawowej wprawy |
| Test z powiększeniem | Nachodzące elementy, ukryte funkcje | Prosty do wykonania |
| Test z użytkownikami | Rzeczywiste bariery w użyciu | Wymaga organizacji |
Najprostszy test, który może wykonać każdy: odłóż mysz i spróbuj kupić produkt, używając tylko klawiatury. Zapisz każde miejsce, w którym nie wiesz, gdzie jesteś, lub nie możesz przejść dalej. Dla większości sklepów to kilkanaście minut, które pokazują najpoważniejsze problemy.
Deklaracja i utrzymanie
Dostępność nie jest stanem osiąganym raz. Każda nowa funkcja, zmiana szablonu, wtyczka czy komponent operatora może wprowadzić nowe bariery. Warto wpisać podstawowe testy do procesu wprowadzania zmian, opublikować informację o dostępności z danymi kontaktowymi do zgłaszania problemów i reagować na zgłoszenia klientów. Użytkownik, który trafił na barierę i dostał szybką pomoc, często zostaje lojalnym klientem.
Dostępność w pracy zespołu
Większość barier nie powstaje przy budowie sklepu, lecz później — przy dodawaniu produktów, banerów promocyjnych i treści. Zdjęcie bez opisu, baner z tekstem w grafice, tabela rozmiarów wklejona jako obrazek czy link „kliknij tutaj" to efekty codziennej pracy osób, które nie wiedzą o zasadach dostępności. Dlatego warto przeszkolić zespół odpowiedzialny za treści, dodać do panelu administracyjnego pola wymagające tekstu alternatywnego i przygotować krótką listę kontrolną dla nowych kampanii. Kilka prostych nawyków zapobiega większości problemów wykrywanych później w audytach.
Lista kontrolna nie musi być długa — kilka pytań przy każdej publikacji wystarczy, żeby nowe treści nie wprowadzały barier, które później trzeba usuwać w ramach kosztownych poprawek.
Podsumowanie
Dostępny sklep internetowy pozwala każdemu klientowi przejść pełną ścieżkę zakupu — klawiaturą, czytnikiem ekranu, przy powiększeniu i bez polegania na kolorze. Najwięcej problemów kryje się w filtrach, wyborze wariantów, oknach dialogowych, mapie punktów odbioru i bramce płatności, a nie w samym wyglądzie strony.
Zacznij od testu zakupu wyłącznie klawiaturą i sprawdzenia strony narzędziem automatycznym. Poprawienie wykrytych w ten sposób problemów usuwa większość barier i przygotowuje sklep na bardziej szczegółowy audyt. Więcej o elementach skutecznego sklepu przeczytasz w tekście o SEO sklepu.
Najczęstsze pytania
Przepisy wdrażające europejski akt o dostępności obejmują usługi handlu elektronicznego, z wyjątkami dla najmniejszych przedsiębiorstw. Niezależnie od obowiązku prawnego dostępność poszerza grupę klientów i zmniejsza liczbę porzuconych koszyków, dlatego warto ją zapewnić.
Filtry zbudowane z elementów bez znaczenia semantycznego, wybór rozmiaru oznaczany tylko kolorem, galerie obsługiwane wyłącznie myszą, okna dialogowe blokujące fokus, mapy punktów odbioru bez listy alternatywnej oraz bramki płatności zewnętrznych operatorów.
Opisać to, co widać i co ma znaczenie przy zakupie, na przykład kolor, krój, widok i szczegóły, zamiast powtarzać samą nazwę produktu widoczną obok. Zdjęcia czysto dekoracyjne powinny mieć pusty tekst alternatywny.
Uruchomić narzędzie automatyczne wykrywające podstawowe błędy, a następnie spróbować kupić produkt wyłącznie klawiaturą, sprawdzić stronę przy powiększeniu do 200 procent i przejść kluczowe kroki z czytnikiem ekranu. Te testy ujawniają najpoważniejsze bariery.
Cała ścieżka zakupu należy do doświadczenia klienta sklepu, dlatego przy wyborze operatora płatności warto sprawdzić dostępność jego komponentów. Sklep odpowiada też za przejrzystą informację o przekierowaniu, stronę potwierdzenia i dostępne wiadomości e-mail.
Bezpłatna wycena Twojego projektu
Opisz w kilku zdaniach, co chcesz zbudować — stronę, aplikację czy sklep. Odpowiadamy w ciągu 24 godzin roboczych konkretną propozycją zakresu i harmonogramu. Konsultacja i wycena są bezpłatne, bez zobowiązań.