Audyt dostępności WCAG dla e‑commerce i stron internetowych

Sprawdzamy, czy użytkownik może znaleźć ofertę, wypełnić formularz, przejść koszyk i dokończyć płatność przy użyciu klawiatury, czytnika ekranu lub powiększenia. Wyniki porządkujemy tak, aby zespół mógł przejść od wykrytej bariery do konkretnej poprawki.

Zakres może objąć działający sklep, środowisko testowe albo wybrane procesy przygotowywane do wdrożenia.

Kolejność fokusu na widoku listy010203040506
  • WCAG 2.2
  • Poziom AA
  • Testy manualne
  • Raport z priorytetami

Użytkownik musi móc odebrać informację i wykonać potrzebne działanie

WCAG porządkuje wymagania dostępności wokół czterech zasad. W sklepie internetowym dotyczą one całej drogi od zapoznania się z ofertą do potwierdzenia zamówienia.

01Postrzegalność
Treść i stan interfejsu muszą być możliwe do odebrania także bez pełnego widzenia lub słyszenia. Badanie obejmuje między innymi kontrast, teksty alternatywne, strukturę nagłówków, powiększanie treści oraz komunikaty przekazywane wyłącznie kolorem.
02Funkcjonalność
Użytkownik powinien przejść przez menu, wyszukiwarkę, wybór wariantu, koszyk i formularze bez używania myszy. Sprawdzamy kolejność fokusu, jego widoczność, obsługę klawiaturą oraz elementy wymagające precyzyjnego ruchu.
03Zrozumiałość
Etykiety, instrukcje i komunikaty o błędach muszą jasno wyjaśniać, czego wymaga formularz i co należy poprawić. Ten obszar obejmuje również przewidywalne działanie nawigacji i powtarzalnych komponentów.
04Kompatybilność
Kod powinien przekazywać strukturę, rolę i stan komponentów przeglądarkom oraz technologiom wspomagającym. Błąd może być niewidoczny na ekranie, a mimo tego całkowicie blokować osobę korzystającą z czytnika ekranu.

Standard grupuje trzynaście wytycznych wokół tych czterech zasad, a W3C zaleca odnoszenie nowych badań do najnowszej wersji — obecnie WCAG 2.2 (otwiera się w nowej karcie). Wersję i poziom zgodności ustalamy w zakresie usługi, bo od nich zależy, które kryteria wchodzą do oceny.

WCAG 2.1 czy WCAG 2.2 – jaki standard sprawdzamy?

Audyt wykonujemy w oparciu o WCAG 2.2 na poziomie AA, ponieważ jest to najnowsza wersja standardu rekomendowana przez W3C. W raporcie oddzielamy wymagania wynikające z aktualnego standardu technicznego i obowiązujących regulacji od dodatkowych kryteriów WCAG 2.2.

Poziom AA obejmuje również kryteria poziomu A, więc badanie nie pomija wymagań z niższego poziomu. WCAG 2.2 (otwiera się w nowej karcie) dodaje dziewięć kryteriów sukcesu względem WCAG 2.1. Część z nich — rozszerzone wymagania dotyczące widoczności fokusu i uwierzytelniania — ma poziom AAA i przy audycie na poziomie AA pozostaje poza zakresem oceny.

Co WCAG 2.2 dodaje względem WCAG 2.1

Zasłonięty focus
Element z fokusem nie może być całkowicie zakryty przez sticky header, banner zgód ani panel filtrów.
Operacje wymagające przeciągania
Każde działanie oparte na przeciąganiu — suwak ceny, zmiana kolejności, konfigurator — musi mieć alternatywę wykonalną jednym kliknięciem.
Minimalny rozmiar celu
Obszary interaktywne muszą być na tyle duże, aby dało się je trafić bez precyzyjnego ruchu; dotyczy to zwłaszcza ikon w koszyku i na liście produktów.
Redundantne wprowadzanie danych
Checkout nie powinien wymagać powtórnego wpisywania informacji, które użytkownik podał już w tym samym procesie.
Dostępne uwierzytelnianie
Logowanie i potwierdzenie zamówienia nie mogą wymagać testu poznawczego, którego nie da się obejść — na przykład zapamiętania kodu albo rozwiązania zagadki obrazkowej.

Wersję standardu i poziom zgodności zapisujemy w zakresie usługi, ponieważ od nich zależy, które kryteria wchodzą do oceny i jak czytać wynik raportu.

Audyt automatyczny i manualny WCAG – jak wygląda weryfikacja?

Narzędzia potrafią wskazać problemy, które można jednoznacznie rozpoznać w kodzie. Nie ocenią jednak m.in. sensu tekstu alternatywnego, logicznej kolejności interfejsu ani tego, czy użytkownik czytnika ekranu rozumie zmianę stanu koszyka.

W3C wskazuje (otwiera się w nowej karcie), że nie wszystkie aspekty dostępności można ocenić automatycznie i potrzebna jest ocena człowieka. Dlatego skan wykorzystujemy jako jeden z etapów badania, a nie jako gotowy audyt.

  1. 01

    Ustalenie celu

    Określamy, czy badanie ma służyć ocenie WCAG, przygotowaniu do wymagań Polskiego Aktu o Dostępności, weryfikacji przed wdrożeniem, czy sprawdzeniu poprawek wykonanych po wcześniejszym audycie.

    Rezultat etapuUzgodniony cel badania, wersja standardu i poziom zgodności.

  2. 02

    Ustalenie zakresu

    Wybieramy reprezentatywne widoki, szablony, komponenty i procesy. Zakres uwzględnia technologie, wersje mobilne oraz elementy zewnętrzne, które uczestniczą w zakupie.

    Rezultat etapuSpis widoków, komponentów i procesów objętych badaniem.

  3. 03

    Analiza automatyczna

    Narzędzia pomagają znaleźć część problemów w kodzie, strukturze dokumentu, kontraście i nazwach elementów. Wynik porządkujemy i odsiewamy zgłoszenia, które nie mają wpływu na użytkownika.

    Rezultat etapuWstępna lista miejsc wymagających sprawdzenia manualnego.

  4. 04

    Testy manualne

    Sprawdzamy obsługę klawiaturą, kolejność i widoczność fokusu, powiększenie i zmianę orientacji, komponenty dynamiczne oraz komunikaty. Każdą barierę zapisujemy razem ze sposobem jej odtworzenia.

    Rezultat etapuPotwierdzone bariery z krokami odtworzenia i materiałem dowodowym.

  5. 05

    Raport i omówienie

    Znaleziska grupujemy według ścieżek, kryteriów i wpływu na użytkownika. Na spotkaniu podsumowującym wskazujemy problemy wymagające szybkiej reakcji oraz zmiany, które można planować w kolejnych etapach.

    Rezultat etapuRaport i uzgodniona kolejność prac.

Z czego składa się weryfikacja

Testy automatyczne
skan kodu, struktury dokumentu, kontrastu i nazw elementów
Ręczna analiza
ocena sensu treści, kolejności interfejsu i zachowania komponentów
Nawigacja klawiaturą
przejście każdej ścieżki bez myszy, z wychwyceniem pułapek fokusu
Testowanie focusu
widoczność wskaźnika, kolejność i zachowanie po otwarciu modala
Weryfikacja formularzy
etykiety, instrukcje, walidacja i komunikaty o błędach
Analiza reprezentatywnych widoków
szablony i komponenty pokrywające cały serwis, nie pojedyncze adresy
Testy technologii asystujących
czytnik ekranu i powiększenie, jeżeli są objęte zakresem usługi

Co sprawdzamy podczas audytu WCAG?

Najpoważniejsze bariery pojawiają się zwykle w komponentach obsługujących wybór produktu, formularze, logowanie, dostawę i płatność. Dlatego zakres badania ustalamy według procesów, a nie wyłącznie liczby adresów URL.

Każdy etap ścieżki ma inny zestaw komponentów i inne sposoby obsługi, które trzeba sprawdzić. W rozbudowanym sklepie badamy reprezentatywne szablony i widoki, ale proces zawsze przechodzimy w całości — od wejścia do potwierdzenia zamówienia i obsługi po zakupie.

Nawigacja i wyszukiwarka

Pierwszy etap decyduje o tym, czy użytkownik w ogóle dotrze do oferty. Menu wielopoziomowe, podpowiedzi wyszukiwania i powtarzalne elementy nagłówka są miejscem, w którym obsługa klawiaturą najczęściej się zatrzymuje.

Co sprawdzamy

  • otwieranie menu i podmenu z klawiatury
  • kolejność fokusu i jego widoczność
  • etykiety pól wyszukiwania
  • obsługa podpowiedzi i listy wyników
  • możliwość pominięcia powtarzalnych elementów

Pierwszy etap decyduje o tym, czy użytkownik w ogóle dotrze do oferty. Menu wielopoziomowe, podpowiedzi wyszukiwania i powtarzalne elementy nagłówka są miejscem, w którym obsługa klawiaturą najczęściej się zatrzymuje.

Co sprawdzamy

  • otwieranie menu i podmenu z klawiatury
  • kolejność fokusu i jego widoczność
  • etykiety pól wyszukiwania
  • obsługa podpowiedzi i listy wyników
  • możliwość pominięcia powtarzalnych elementów

Filtry przebudowują listę bez przeładowania strony, więc informacja o zmianie musi dotrzeć również do osoby, która nie patrzy na ekran. Sprawdzamy też, czy oznaczenia na kartach produktów mają odpowiednik w treści.

Co sprawdzamy

  • obsługa filtrów i sortowania
  • komunikowanie liczby wyników po zmianie
  • kolejność treści na liście
  • nazwy i opisy linków do produktów
  • informacje przekazywane kolorem lub ikoną

Na karcie produktu spotykają się galeria, konfigurator i komunikaty o dostępności. To najczęstsze miejsce, w którym stan interfejsu jest widoczny wyłącznie wizualnie, a wybór wariantu wymaga precyzyjnego kliknięcia.

Co sprawdzamy

  • teksty alternatywne i obsługa galerii
  • wybór wariantu, rozmiaru i ilości
  • informacja o cenie i dostępności
  • komunikaty o błędach i ograniczeniach
  • konfiguratory oraz elementy dynamiczne

Koszyk aktualizuje ceny i podsumowanie w tle. Jeżeli zmiana nie jest ogłaszana, użytkownik czytnika ekranu nie wie, czy operacja się udała — a to jest różnica między utrudnieniem i zablokowaniem zakupu.

Co sprawdzamy

  • zmiana ilości i usuwanie produktu
  • kody rabatowe i komunikaty walidacji
  • aktualizacja ceny oraz podsumowania
  • ogłaszanie zmian bez konieczności patrzenia na ekran
  • przejście z koszyka do checkoutu

Checkout to najdłuższy formularz w sklepie i miejsce, w którym pojawiają się komponenty zewnętrznych dostawców. Raport rozdziela to, co kontrolujesz, od tego, co zależy od operatora płatności lub przewoźnika.

Co sprawdzamy

  • etykiety, instrukcje i autouzupełnianie pól
  • komunikaty o błędach powiązane z polami
  • kolejność kroków i powrót do poprawek
  • uwierzytelnianie oraz logowanie w trakcie zakupu
  • wybór dostawy i metody płatności
  • komponenty pochodzące od zewnętrznych dostawców

Zakup nie kończy się płatnością. Odzyskanie dostępu, pobranie dokumentu i złożenie reklamacji to czynności, które muszą być wykonalne tym samym sposobem obsługi co reszta serwisu.

Co sprawdzamy

  • rejestracja, logowanie i odzyskiwanie dostępu
  • historia zamówień i statusy
  • dokumenty do pobrania
  • formularze kontaktowe i reklamacyjne
  • zgody, preferencje i dane konta

Obszary techniczne sprawdzane na każdym etapie

Obsługa klawiaturą
przejście przez cały interfejs bez myszy, bez pułapek fokusu
Widoczność i kolejność focusu
widoczny wskaźnik i kolejność zgodna z układem treści
Struktura nagłówków
jeden H1, hierarchia bez przeskoków, nagłówki opisujące sekcje
Formularze
budowa, grupowanie pól, obsługa z klawiatury i czytnika ekranu
Etykiety pól
trwałe etykiety powiązane z polami, instrukcje i autouzupełnianie
Komunikaty błędów
powiązanie z polem, opis przyczyny i sposobu poprawy, ogłaszanie zmiany
Kontrast
tekst, elementy interfejsu i wskaźnik fokusu wobec progów WCAG
Teksty alternatywne
sens opisu, a nie jego obecność; galerie, ikony i grafiki funkcyjne
Linki i przyciski
właściwa semantyka, nazwy zrozumiałe poza kontekstem, stany
Powiększenie i reflow
200% powiększenia i szerokość 320 px bez utraty treści i funkcji
Multimedia
napisy, transkrypcje, kontrola odtwarzania i brak automatycznego dźwięku
Elementy interaktywne
modale, akordeony, karuzele i podpowiedzi — rola, stan i zarządzanie fokusem
Uwierzytelnianie
logowanie, odzyskiwanie dostępu i potwierdzenia bez testów poznawczych
Koszyk
zmiana ilości, kody rabatowe i ogłaszanie aktualizacji podsumowania
Checkout
kolejność kroków, dostawa, płatność i komponenty zewnętrznych dostawców

FAQ – audyt dostępności WCAG

Poniżej pytania, które wracają najczęściej przed wysłaniem zapytania. Jeżeli któreś zostaje bez odpowiedzi, wrócimy do niego w pierwszej rozmowie.

Nie podajemy jednej ceny, ponieważ audyt jest wyceniany zakresem: liczbą procesów i widoków objętych badaniem, liczbą szablonów i komponentów, obecnością komponentów zewnętrznych w checkoucie, poziomem zgodności oraz tym, czy zakres obejmuje testy technologii asystujących i ponowną weryfikację po poprawkach. Kwotę potwierdzamy w ofercie, po ustaleniu zakresu.

Czas zależy od liczby widoków, szablonów i procesów objętych zakresem oraz od tego, ile z nich wymaga testów manualnych. Orientacyjny termin zapisujemy w ofercie razem z zakresem. Badanie pojedynczej ścieżki jest znacznie krótsze niż audyt całego sklepu z checkoutem i panelem klienta.

Od 28 czerwca 2025 r. obowiązują przepisy Polskiego Aktu o Dostępności (otwiera się w nowej karcie), wdrażającego Europejski Akt o Dostępności, i obejmują one między innymi usługi handlu elektronicznego. Nie znaczy to jednak, że obowiązek dotyczy automatycznie każdego sklepu: ustawa przewiduje wyłączenia, a ustalenie, czy obejmuje konkretną firmę i usługę, wymaga oceny prawnej.

Ustawa obejmuje wskazane w niej produkty i usługi, w tym usługi handlu elektronicznego oferowane konsumentom, i nakłada obowiązki na podmioty gospodarcze uczestniczące w ich wprowadzaniu na rynek lub świadczeniu. To, czy dana firma i dana usługa jej podlegają, zależy od rodzaju działalności, statusu przedsiębiorcy i zakresu ustawowych wyłączeń. Ta ocena należy do prawnika, nie do audytu technicznego.

Przepisy przewidują wyłączenie dla usług oferowanych lub świadczonych przez mikroprzedsiębiorców. Sam status mikroprzedsiębiorcy zależy od progów zatrudnienia i obrotu, a wyłączenie odnosi się do usług — nie jest więc zwolnieniem obejmującym wszystkie obowiązki w każdej sytuacji. Potwierdzenie, czy wyłączenie ma zastosowanie, wymaga oceny prawnej.

Audyt wykonujemy w oparciu o WCAG 2.2 (otwiera się w nowej karcie) na poziomie AA, ponieważ jest to najnowsza wersja standardu rekomendowana przez W3C; poziom AA obejmuje również kryteria poziomu A. WCAG 2.2 dodaje dziewięć kryteriów sukcesu względem WCAG 2.1, między innymi dotyczących zasłoniętego focusu, operacji wymagających przeciągania, minimalnego rozmiaru celu, redundantnego wprowadzania danych i dostępnego uwierzytelniania. W raporcie oddzielamy wymagania wynikające z aktualnego standardu technicznego i obowiązujących regulacji od dodatkowych kryteriów WCAG 2.2.

Nie. Narzędzia automatyczne potrafią wykryć część błędów, ale nie ocenią wszystkich kryteriów ani rzeczywistej możliwości wykonania zadania przez użytkownika. Samo narzędzie nie pozwala potwierdzić zgodności z WCAG — audyt musi obejmować również testy manualne, nawigację klawiaturą i weryfikację formularzy. Wskazuje na to samo W3C (otwiera się w nowej karcie).

Tak, i są to zwykle najważniejsze części zakresu. Checkout to najdłuższy formularz w sklepie i miejsce, w którym pojawiają się komponenty zewnętrznych dostawców. Badanie obejmuje etykiety pól, instrukcje, walidację, komunikaty o błędach, kolejność kroków, wybór dostawy i płatności oraz uwierzytelnianie w trakcie zakupu. Audyt e‑commerce nie ogranicza się do strony głównej i kart produktowych.

Raport, w którym każda niezgodność jest opisana tym samym łańcuchem: kryterium WCAG, miejsce wystąpienia, problem, wpływ na użytkownika, rekomendowana poprawka i priorytet. Do tego kroki odtworzenia, materiał dowodowy, obszar odpowiedzialności, podsumowanie dla osób decyzyjnych oraz opis zakresu, metody i ograniczeń badania.

Tak, oba zakresy ustalamy osobno od audytu. Zakres prac naprawczych i estymacja powstają po akceptacji priorytetów, a ponowną weryfikację po zmianach umawiamy jako odrębne badanie. Raport jest jednak napisany tak, aby poprawki mógł wdrożyć obecny zespół albo inny dostawca, bez naszego udziału.

Zakres ustalamy przed rozpoczęciem prac. W rozbudowanym e‑commerce zwykle badamy reprezentatywne szablony, komponenty i kompletne procesy, między innymi wyszukiwanie, kartę produktu, koszyk oraz checkout. Liczba widoków zależy od złożoności serwisu i od celu badania.

Sam audyt WCAG nie jest opinią prawną. Ocena gotowości do wymagań ustawy wymaga również ustalenia, czy firma i świadczona usługa jej podlegają oraz jakie dodatkowe obowiązki mają zastosowanie.

Tak. Badanie może zostać przeprowadzone na środowisku testowym, o ile zawiera ono wszystkie komponenty i procesy objęte zakresem. Wykrycie problemów przed publikacją zwykle ogranicza liczbę późniejszych zmian w gotowym interfejsie.

Obejmuje te elementy, które uczestniczą w procesie użytkownika i znajdują się w uzgodnionym zakresie. Raport rozróżnia komponenty kontrolowane przez właściciela serwisu od elementów zależnych od zewnętrznego dostawcy.

Do wstępnej oceny zakresu wystarczy adres serwisu i cel badania

Podczas pierwszej rozmowy ustalimy procesy objęte audytem, wersję WCAG, oczekiwany format raportu oraz to, czy badanie ma uwzględniać przygotowanie do wymagań Polskiego Aktu o Dostępności.

Jeżeli nie wiesz jeszcze, czy potrzebujesz oceny WCAG, czy szerszej oceny gotowości do wymagań prawnych, napisz, jaka decyzja jest przed firmą. Zakres dobierzemy do niej, a nie odwrotnie.

Małgorzata Gudalewska, Head of Sales w Aurora Creation

Małgorzata Gudalewska

Head of Sales

+48 664 531 867m.gudalewska@auroracreation.com
biuro@auroracreation.plul. Jana Henryka Dąbrowskiego 28, 15-872 Białystok

Przygotuj, jeżeli masz

  • adres serwisu albo środowiska testowego
  • cel badania: ocena WCAG, wymagania prawne, weryfikacja przed wdrożeniem
  • procesy, które są dla sprzedaży najważniejsze
  • informację o komponentach zewnętrznych w checkoucie
Nie wybrano plików
Dziękujemy, odezwiemy się w ciągu 1 dnia roboczego.

Po otrzymaniu informacji wrócimy z pytaniami potrzebnymi do ustalenia zakresu. Cena i harmonogram wymagają poznania liczby procesów, typów widoków oraz technologii użytych w serwisie.