Najważniejsze wnioski
- Testuj pełną ścieżkę zakupu, nie tylko stronę główną.
- Najpierw sprawdź klawiaturę, fokus, etykiety, błędy i kontrast.
- Włącz funkcje wspierające, ale równolegle planuj naprawy źródłowe.
- Powtarzaj test po zmianie motywu, płatności lub aplikacji zewnętrznej.
Audyt całego sklepu potrafi trwać tygodniami i łatwo w nim utonąć. Dlatego pierwszy przegląd warto zawęzić do jednej rzeczy: pełnej ścieżki zakupowej. Od wyszukania produktu, przez wybór wariantu i koszyk, po formularz, płatność i potwierdzenie zamówienia. To tam pojedyncza bariera najszybciej zamienia się w porzucony koszyk.
Poniższa checklista jest ułożona w kolejności, w jakiej klient przechodzi przez sklep. Każdy punkt da się sprawdzić bez specjalistycznych narzędzi — wystarczy klawiatura, przeglądarka i telefon.
Krok 1: wyszukiwanie i lista produktów
- Pole wyszukiwania ma etykietę czytelną dla technologii asystujących, a nie tylko ikonę lupy.
- Podpowiedzi wyszukiwania da się przejrzeć strzałkami i zatwierdzić klawiszem Enter.
- Filtry są obsługiwalne z klawiatury, a wynik ich zastosowania jest komunikowany, nie tylko widoczny.
- Komunikat „brak wyników” jest tekstem, a nie samą grafiką.
- Sortowanie i paginacja mają czytelne nazwy — „strona 2”, a nie „›”.
Krok 2: karta produktu
- Zdjęcia produktu mają sensowne opisy alternatywne. Nazwa pliku nie jest opisem.
- Wybór wariantu (rozmiar, kolor) działa z klawiatury i nie opiera się wyłącznie na kolorze próbki.
- Informacja o dostępności i cenie jest tekstem, nie obrazkiem.
- Galeria nie odtwarza automatycznie animacji bez możliwości zatrzymania.
- Przycisk „dodaj do koszyka” ma cel dotykowy wygodny na telefonie i widoczny stan fokusu.
Krok 3: koszyk
- Zmiana ilości i usunięcie pozycji są dostępne z klawiatury.
- Po zmianie zawartości użytkownik dostaje komunikat, a nie tylko cichą aktualizację sumy.
- Kod rabatowy ma etykietę, a błąd „nieprawidłowy kod” jest opisany tekstem.
- Fokus po zamknięciu okna koszyka wraca w przewidywalne miejsce.
Krok 4: formularz danych
To najczęstsze miejsce awarii. Cztery rzeczy do sprawdzenia:
- Etykiety. Każde pole ma trwałą etykietę. Tekst zastępczy w polu nie jest etykietą, bo znika po rozpoczęciu pisania.
- Błędy. Komunikat wskazuje pole i mówi, co poprawić. „Błąd formularza” nie spełnia tego warunku.
- Kolor. Czerwona ramka bez tekstu jest niewystarczająca — kolor nie może być jedynym nośnikiem informacji.
- Autouzupełnianie. Pola adresowe mają właściwe atrybuty, żeby przeglądarka mogła je wypełnić.
Krok 5: płatność i potwierdzenie
- Bramka płatności jest sprawdzona osobno — to zwykle kod zewnętrznego dostawcy.
- Licznik czasu na dokończenie płatności da się wydłużyć albo zatrzymać.
- Potwierdzenie zamówienia jest dostępne jako tekst, a numer zamówienia da się skopiować.
- Wiadomość e-mail z potwierdzeniem jest czytelna także bez wczytania obrazów.
| Test | Jak wykonać | Czas |
|---|---|---|
| Klawiatura | Przejdź całą ścieżkę używając wyłącznie Tab, Enter i strzałek | 15 minut |
| Powiększenie | Ustaw powiększenie przeglądarki na 200% i sprawdź, czy nic nie znika | 10 minut |
| Kontrast | Zmierz kontrast tekstu, przycisków i komunikatów błędów | 20 minut |
| Telefon | Złóż zamówienie na realnym urządzeniu, nie w symulatorze | 15 minut |
| Czytnik ekranu | Przejdź kartę produktu i formularz z włączonym czytnikiem | 30 minut |
Jeżeli nie potrafisz kupić we własnym sklepie używając samej klawiatury, nie potrafi tego również część Twoich klientów. Różnica polega na tym, że oni nie napiszą reklamacji — po prostu kupią gdzie indziej.
Scenariusz: dwie godziny, które zmieniają priorytety
Rozważmy scenariusz sklepu z asortymentem dziecięcym. Zespół rezerwuje dwie godziny i przechodzi ścieżkę zakupową samą klawiaturą. Wynik: wybór rozmiaru działa tylko myszą, komunikat o braku wybranego wariantu pojawia się wyłącznie jako czerwony tekst poza polem, a okno z podpowiedzią rozmiarówki zatrzymuje fokus i nie da się go zamknąć klawiszem Esc.
Trzy problemy, wszystkie na ścieżce do koszyka, wszystkie do naprawienia w kilka dni. Żadnego z nich nie wykryłoby narzędzie automatyczne, bo formalnie kod jest poprawny. To jest właśnie różnica między skanem a testem.
Co dalej
Checklista pokazuje stan faktyczny. Kolejny krok zależy od tego, co wyszło. Jeżeli problemy dotyczą prezentacji — kontrastu, wielkości tekstu, ruchu na stronie — część z nich złagodzą funkcje panelu WCAGbot, które uruchomisz w kilka minut. Jeżeli problemy siedzą w kodzie i treści, potrzebne są naprawy źródłowe — powody wyjaśniamy w tekście o relacji widgetu do zgodności z WCAG.
Kolejność sprawdzania ścieżki zakupowej
Do tego dochodzi kontekst formalny: obowiązki wynikające z Polskiego Aktu o Dostępności oraz techniczne punkty odniesienia opisane w tekście o WCAG 2.1, WCAG 2.2 i EN 301 549.
Krok 6: obsługa klienta i kanał zgłoszeń
Ścieżka zakupowa nie kończy się na potwierdzeniu zamówienia. Klient, który napotka barierę, potrzebuje sposobu, żeby o niej powiedzieć — a sklep potrzebuje tych zgłoszeń bardziej, niż mu się wydaje. To najtańsze źródło informacji o realnych problemach.
- Na stronie jest widoczna informacja o dostępności usługi wraz z kanałem kontaktu.
- Formularz kontaktowy sam przechodzi test klawiaturą i ma poprawne etykiety.
- Podany jest alternatywny kanał — telefon albo adres e-mail — na wypadek, gdyby formularz okazał się barierą.
- Zespół obsługi wie, co zrobić ze zgłoszeniem dotyczącym dostępności i do kogo je przekazać.
- Zgłoszenia trafiają w jedno miejsce, a nie giną w skrzynce ogólnej.
Narzędzia, które wystarczą na start
Do pierwszego przeglądu nie potrzeba specjalistycznego oprogramowania. Wystarczy klawiatura, przeglądarka z wbudowanymi narzędziami deweloperskimi oraz miernik kontrastu — jeden i drugi jest dostępny bezpłatnie.
Narzędzia automatyczne warto włączyć jako drugi krok, ale z właściwym nastawieniem. Wykrywają one część problemów technicznych: brakujące atrybuty, powtórzone identyfikatory, zbyt niski kontrast tekstu. Nie ocenią natomiast, czy opis alternatywny zdjęcia niesie sensowną informację, czy kolejność fokusu odpowiada logice strony ani czy komunikat błędu mówi użytkownikowi, co ma poprawić. Czysty raport z takiego narzędzia nie oznacza dostępnego sklepu — oznacza tylko brak błędów w kategoriach, które narzędzie potrafi sprawdzić.
Najbardziej wartościowy test jest jednocześnie najprostszy: poproś kogoś spoza zespołu, żeby przy Tobie kupił produkt. Obserwacja pięciu minut cudzej frustracji mówi więcej niż wielostronicowy eksport.
Podsumowanie: jedna ścieżka, sześć kroków
Nie musisz zaczynać od audytu całego serwisu. Wystarczy jedna ścieżka — od wyszukania produktu po potwierdzenie zamówienia — przejechana klawiaturą, na telefonie i przy powiększeniu do dwustu procent. Ten test zajmuje kilka godzin i zwykle wskazuje trzy do pięciu barier, które realnie kosztują zamówienia.
Naprawa tych kilku rzeczy daje więcej niż lista dwustu drobiazgów, do której nikt nigdy nie wróci. Potem wystarczy powtarzać przegląd po każdej większej zmianie w sklepie i traktować zgłoszenia od klientów jako darmowe źródło informacji o tym, co jeszcze nie działa.
Warto też zapisywać wyniki każdego przeglądu w jednym miejscu wraz z datą i zakresem testu. Po trzech takich rundach widać, które obszary sklepu psują się regularnie po aktualizacjach, a które zostały naprawione trwale. To najtańszy sposób, żeby przestać zgadywać i zacząć planować kolejne prace na podstawie własnych danych.
Najczęstsze pytania
Od czego zacząć, jeśli mam tylko jeden dzień?
Od testu klawiaturą na ścieżce zakupowej i od formularza zamówienia. Te dwa obszary dają najwięcej znalezisk w najkrótszym czasie.
Czy potrzebuję czytnika ekranu, żeby zrobić pierwszy przegląd?
Nie do pierwszego przeglądu. Test klawiaturą, powiększenie do 200% i sprawdzenie kontrastu wychwytują większość barier. Czytnik ekranu przyda się na kolejnym etapie.
Czy tekst zastępczy w polu może zastąpić etykietę?
Nie. Znika po rozpoczęciu wpisywania, ma zwykle za niski kontrast i nie jest wiarygodnie odczytywany przez technologie asystujące.
Jaki kontrast jest wymagany?
Dla zwykłego tekstu co najmniej 4,5:1, dla dużego tekstu 3:1. Warto sprawdzić także elementy interfejsu, nie tylko akapity.
Czy bramka płatności to mój problem?
Wobec klienta tak, ponieważ to element Twojego procesu sprzedaży. Wybór dostawcy i zgłaszanie mu problemów jest częścią dbania o dostępność usługi.
Jak często powtarzać checklistę?
Po każdej istotnej zmianie w sklepie oraz przeglądowo raz na kwartał. Regularność jest ważniejsza niż głębokość pojedynczego przeglądu.
Co zrobić z długą listą problemów?
Uszereguj według wpływu na dokończenie zakupu. Bariera w koszyku jest pilniejsza niż niski kontrast w stopce.
Czy da się to zlecić agencji?
Tak, ale poproś o wyniki opisane per proces i per kryterium, z priorytetami napraw. Raport składający się z samego eksportu z narzędzia automatycznego niewiele wnosi.
