Europejski Akt o Dostępności (EAA) i WCAG 2.2: co musi zrobić sklep internetowy?

Od 28 czerwca 2025 roku sklepy internetowe w Unii Europejskiej muszą spełniać wymogi dostępności cyfrowej. To efekt Europejskiego Aktu o Dostępności (European Accessibility Act, EAA), który w Polsce wdrożyła ustawa o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług. W tym artykule wyjaśniamy prostym językiem, kogo to dotyczy, co oznacza w praktyce i co konkretnie trzeba sprawdzić w sklepie.

Ten tekst ma charakter informacyjny i nie jest poradą prawną. Jeśli masz wątpliwości, czy przepisy obejmują Twoją firmę, skonsultuj się z prawnikiem.

Czym jest dostępność cyfrowa?

Dostępność cyfrowa oznacza, że ze strony lub sklepu mogą korzystać wszyscy, także osoby z niepełnosprawnościami: niewidome korzystające z czytników ekranu, słabowidzące powiększające ekran, osoby z niepełnosprawnością ruchową obsługujące komputer tylko klawiaturą, osoby niesłyszące czy z trudnościami poznawczymi. W praktyce dostępna strona jest wygodniejsza dla każdego: seniora z gorszym wzrokiem, kogoś z telefonem w pełnym słońcu czy z ręką w gipsie.

Kogo dotyczy EAA?

EAA obejmuje wybrane produkty i usługi. Z punktu widzenia stron internetowych najważniejsze jest to, że dotyczy usług handlu elektronicznego, czyli sprzedaży produktów i usług konsumentom przez internet. Obejmuje też m.in. usługi bankowe dla konsumentów, e-booki, niektóre usługi transportowe i komunikacyjne.

Sytuacja	Czy dotyczy?
Sklep internetowy sprzedający konsumentom	co do zasady tak
Rezerwacje i płatności online za usługi dla konsumentów	często tak, zależnie od rodzaju usługi
Strona firmowa bez sprzedaży (wizytówka)	zwykle nie jest objęta EAA wprost
Mikroprzedsiębiorstwo świadczące usługi	zwolnione z wymogów dla usług
Sprzedaż wyłącznie firmom (B2B)	EAA dotyczy usług dla konsumentów

Zwolnienie dla mikrofirm

Z obowiązków dotyczących usług zwolnione są mikroprzedsiębiorstwa, czyli firmy zatrudniające mniej niż 10 osób, których roczny obrót lub suma bilansowa nie przekracza 2 milionów euro. Warto jednak pamiętać, że firma rośnie, a dostępność i tak przynosi korzyści sprzedażowe, więc wielu mniejszych sprzedawców dostosowuje sklepy dobrowolnie.

Co ma wspólnego EAA z WCAG?

EAA określa, że usługi mają być dostępne, ale nie opisuje szczegółów technicznych. Te szczegóły znajdują się w normie zharmonizowanej EN 301 549, która dla stron internetowych odwołuje się do standardu WCAG (Web Content Accessibility Guidelines). Obecnie norma opiera się na WCAG 2.1 na poziomie AA. Najnowsza wersja to WCAG 2.2, która zawiera prawie wszystkie wymagania 2.1 i dodaje kilka nowych, dlatego budowanie zgodnie z WCAG 2.2 AA daje zapas na przyszłość.

Cztery zasady WCAG

Zasada	Co oznacza	Przykład
Postrzegalność	treść da się odebrać różnymi zmysłami	opisy alternatywne zdjęć, wystarczający kontrast
Funkcjonalność	stronę da się obsłużyć różnymi sposobami	obsługa klawiaturą, brak pułapek, czas na reakcję
Zrozumiałość	treść i obsługa są zrozumiałe	jasne komunikaty błędów, przewidywalna nawigacja
Solidność	strona działa z technologiami wspomagającymi	poprawny kod, etykiety przycisków i pól

Co konkretnie sprawdzić w sklepie internetowym?

Poniżej lista najważniejszych miejsc, w których sklepy najczęściej mają problemy. Każdy punkt to konkretne wymaganie WCAG.

1. Kontrast i czytelność

• tekst musi mieć kontrast co najmniej 4,5:1 względem tła, a duży tekst 3:1,
• jasnoszare podpisy, ceny na kolorowych banerach i tekst na zdjęciach to najczęstsze błędy,
• stronę trzeba móc powiększyć do 200% bez utraty treści i funkcji.

2. Obsługa klawiaturą

• każdy element (menu, filtry, przyciski, koszyk, formularz zamówienia) da się obsłużyć klawiszem Tab i Enter,
• zaznaczony element ma wyraźną, widoczną obwódkę (fokus),
• okienka i wysuwane menu nie „łapią” fokusu tak, że nie da się z nich wyjść,
• na początku strony jest link „Przejdź do treści”.

3. Zdjęcia produktów

• każde zdjęcie niosące informację ma tekst alternatywny opisujący produkt,
• zdjęcia czysto dekoracyjne mają pusty tekst alternatywny, żeby czytnik je pomijał,
• informacja o produkcie nie może być wyłącznie na zdjęciu, np. tabela rozmiarów jako obrazek.

4. Formularze: koszyk, zamówienie, konto

• każde pole ma widoczną etykietę, a nie tylko podpowiedź znikającą po kliknięciu,
• komunikaty o błędach mówią, co jest źle i jak to poprawić, np. „Wpisz kod pocztowy w formacie 00-000”,
• błędy nie są sygnalizowane wyłącznie kolorem,
• nie trzeba wpisywać drugi raz danych, które klient już podał (WCAG 2.2),
• logowanie nie wymaga zapamiętywania ani przepisywania kodów, jeśli nie ma alternatywy (WCAG 2.2).

5. Przyciski i elementy dotykowe

• cele dotykowe mają co najmniej 24 × 24 piksele (WCAG 2.2), np. przyciski ilości, kropki karuzel,
• ikony bez tekstu, np. lupa czy koszyk, mają etykietę dla czytnika ekranu,
• linki mówią, dokąd prowadzą: „Zobacz rozmiary” zamiast „kliknij tutaj”.

6. Ruch, karuzele i wyskakujące okienka

• automatycznie przesuwane karuzele i animacje dłuższe niż 5 sekund muszą mieć możliwość zatrzymania,
• okienka z promocją lub zgodą na cookies da się zamknąć klawiaturą i czytnik je ogłasza,
• strona uwzględnia systemowe ustawienie „ogranicz ruch”.

7. Struktura i nawigacja

• nagłówki tworzą logiczną hierarchię (jeden H1, potem H2, H3),
• język strony jest ustawiony w kodzie (pl),
• menu i układ są spójne na wszystkich podstronach,
• strona działa na ekranie o szerokości 320 pikseli bez przewijania w poziomie.

Jak wygląda zakup z czytnikiem ekranu? Scenariusz krok po kroku

Żeby lepiej zrozumieć, o co chodzi w dostępności, prześledźmy zakup oczami osoby niewidomej, która korzysta z czytnika ekranu i klawiatury.

1. Wejście na stronę. Czytnik odczytuje tytuł strony i proponuje listę nagłówków. Jeśli nagłówki są logiczne, klient od razu przechodzi do kategorii. Jeśli strona ma jeden nagłówek albo wcale, musi przejść przez całe menu element po elemencie.
2. Kategoria i filtry. Klient chce wybrać rozmiar i kolor. Jeśli filtry są zwykłymi elementami bez etykiet, czytnik powie tylko „przycisk, przycisk, przycisk”. Z etykietami usłyszy „Rozmiar M, nie zaznaczone”.
3. Karta produktu. Bez opisów zdjęć klient nie wie, jak produkt wygląda. Bez tekstowej tabeli rozmiarów nie dobierze rozmiaru.
4. Dodanie do koszyka. Jeśli potwierdzenie pojawia się tylko jako krótki zielony pasek, czytnik go nie ogłosi i klient nie wie, czy produkt jest w koszyku.
5. Formularz zamówienia. Pola bez etykiet, kod pocztowy z niejasnym formatem i błąd zaznaczony tylko na czerwono to najczęstsze miejsca, w których zakup się kończy.
6. Płatność. Okno operatora płatności też musi działać z klawiaturą. Przy wyborze operatora warto to sprawdzić.

Każdy z tych kroków to realny powód porzucenia koszyka. Po poprawkach ta sama ścieżka zajmuje kilka minut, a nie kończy się frustracją.

Deklaracja i informacja o dostępności

Ustawa wymaga od usługodawców udostępnienia informacji o tym, jak usługa spełnia wymagania dostępności. W praktyce wiele firm publikuje to w formie deklaracji dostępności: co działa, czego jeszcze nie udało się poprawić i jak zgłosić problem. Przykład takiej strony znajdziesz w naszej deklaracji dostępności.

Jak sprawdzić dostępność swojego sklepu?

Pełny audyt wymaga testów ręcznych, ale pierwsze problemy znajdziesz sam w godzinę:

1. Test klawiaturą: odłóż mysz i spróbuj kupić produkt, używając tylko klawiszy Tab, Shift+Tab, Enter i spacji. Czy zawsze widzisz, gdzie jesteś?
2. Narzędzia automatyczne: WAVE (wave.webaim.org), wtyczka axe DevTools w Chrome, Lighthouse w narzędziach deweloperskich przeglądarki.
3. Powiększenie: powiększ stronę do 200% i sprawdź, czy wszystko działa.
4. Telefon w trybie czytnika: włącz VoiceOver (iPhone) lub TalkBack (Android) i spróbuj przejść stronę główną.
5. Kontrast: sprawdź kolory w narzędziu do kontrastu, np. w panelu dostępności przeglądarki.

Pamiętaj, że narzędzia automatyczne wykrywają tylko część problemów, zwykle szacuje się, że około jednej trzeciej. Reszta wymaga sprawdzenia przez człowieka.

Najczęstsze błędy, które znajdujemy w sklepach

Błąd	Jak naprawić
Jasnoszare ceny i opisy	przyciemnić kolor tekstu do kontrastu 4,5:1
Brak widocznego fokusu	dodać wyraźną obwódkę dla elementów aktywnych
Filtry działające tylko myszą	przebudować filtry na przyciski i pola obsługiwane klawiaturą
Ikony bez etykiet	dodać opis dla czytnika ekranu
Karuzela bez pauzy	dodać przycisk zatrzymania lub wyłączyć automatyczne przewijanie
Błędy w formularzu tylko na czerwono	dodać tekstowy komunikat przy polu
Małe przyciski ilości (+/−)	powiększyć obszar kliknięcia do min. 24 × 24 px

Przykład: karta produktu przed i po

Zobacz, jak wyglądają typowe poprawki na jednej karcie produktu w sklepie odzieżowym.

Element	Przed	Po
Zdjęcie	alt=”IMG_4521.jpg”	alt=”Granatowa kurtka puchowa z kapturem, widok z przodu”
Cena promocyjna	jasnoszara przekreślona cena, kontrast 2:1	ciemniejszy kolor, kontrast 4,5:1 i tekst „Cena przed obniżką”
Wybór rozmiaru	kafelki klikalne tylko myszą	przyciski obsługiwane klawiaturą, wybrany rozmiar ogłaszany czytnikowi
Tabela rozmiarów	obrazek JPG	prawdziwa tabela HTML z nagłówkami
Przycisk ilości	ikony + i − o wielkości 16 px	przyciski 32 px z etykietami „Zwiększ ilość” i „Zmniejsz ilość”
Komunikat po dodaniu do koszyka	zielony pasek znikający po 2 sekundach	komunikat ogłaszany czytnikowi i widoczny do zamknięcia

Żadna z tych zmian nie wymaga przebudowy całego sklepu, a razem sprawiają, że karta produktu działa dla wszystkich klientów.

Opisy alternatywne: jak je pisać w praktyce

Opisy zdjęć często dodaje osoba, która później prowadzi sklep, a nie programista. Kilka zasad, które warto przekazać zespołowi:

• opisuj to, co ważne dla klienta: kolor, krój, materiał, widok (z przodu, z boku),
• nie zaczynaj od „zdjęcie przedstawia”, czytnik i tak informuje, że to obraz,
• nie powtarzaj nazwy produktu w każdym zdjęciu galerii, opisz, czym różnią się kolejne ujęcia,
• pisz krótko, zwykle jedno zdanie,
• zdjęcia czysto dekoracyjne (tła, ozdobniki) zostaw z pustym opisem.

Jak zaplanować dostosowanie sklepu?

1. Audyt: test automatyczny i ręczny najważniejszych ścieżek: strona główna, kategoria, produkt, koszyk, zamówienie, konto.
2. Priorytety: najpierw błędy blokujące zakup (formularze, koszyk, klawiatura), potem kontrast i opisy, na końcu drobiazgi.
3. Poprawki w szablonie: większość problemów siedzi w szablonie sklepu, więc jedna poprawka naprawia setki podstron.
4. Zasady dla zespołu: krótka instrukcja dodawania produktów, opisów zdjęć i treści, żeby nowe błędy nie wracały.

Po wprowadzeniu zmian warto opublikować informację o dostępności i raz na kwartał powtarzać krótki test, zwłaszcza po większych zmianach w sklepie.

Dostępność a SEO

Wiele wymagań WCAG pokrywa się z dobrymi praktykami SEO: logiczne nagłówki, opisy zdjęć, czytelne linki, poprawny kod i szybkie ładowanie. Google nie ocenia strony za „zgodność z WCAG” jako taką, ale dostępna strona jest zwykle lepiej uporządkowana i wygodniejsza w użyciu, co przekłada się na zachowanie użytkowników.

Dostępność to nie tylko obowiązek

Dostosowanie sklepu do WCAG to zwykle także lepsza sprzedaż. Czytelniejsze teksty, wyraźniejsze przyciski i prostszy formularz zamówienia pomagają wszystkim klientom, a uporządkowana struktura strony jest łatwiejsza do zrozumienia także dla Google. Klientami są również osoby starsze i osoby z niepełnosprawnościami, które chętnie wracają do sklepów, gdzie zakupy po prostu działają.

Jak to robimy w NexoWork

Nasze strony i sklepy budujemy zgodnie z WCAG 2.2 na poziomie AA. Przed oddaniem sprawdzamy je testem automatycznym (axe-core) i ręcznie: klawiaturą, pod kątem kontrastu i na wąskich ekranach. Możemy też sprawdzić Twój obecny sklep i przygotować listę rzeczy do poprawy. Więcej o tym, jak pracujemy, przeczytasz na stronie O nas.

Lista kontrolna dostępności sklepu

• Kontrast tekstu co najmniej 4,5:1.
• Cały proces zakupu da się przejść klawiaturą.
• Widoczny fokus na każdym aktywnym elemencie.
• Opisy alternatywne zdjęć produktów.
• Etykiety przy wszystkich polach formularzy i czytelne komunikaty błędów.
• Przyciski i elementy dotykowe min. 24 × 24 px.
• Karuzele i animacje z możliwością zatrzymania.
• Logiczna struktura nagłówków i ustawiony język strony.
• Strona działa przy powiększeniu 200% i szerokości 320 px.
• Opublikowana informacja o dostępności i sposób zgłaszania problemów.

Najczęstsze pytania

Od kiedy obowiązują wymogi EAA?

Od 28 czerwca 2025 roku. Dla części istniejących produktów i umów przepisy przewidują okresy przejściowe.

Czy moja strona firmowa bez sklepu musi spełniać EAA?

Zwykle nie jest objęta EAA wprost, bo przepisy dotyczą wybranych usług dla konsumentów, m.in. handlu elektronicznego. Dostępna strona to jednak lepsze doświadczenie dla wszystkich klientów.

Czy jest oficjalny certyfikat zgodności z WCAG?

Nie ma jednego oficjalnego certyfikatu dla stron. Zgodność potwierdza się audytem: samooceną lub audytem zewnętrznym, a efekt opisuje się w informacji lub deklaracji dostępności.

Czy wtyczka „nakładka dostępności” rozwiązuje problem?

Nie. Nakładki z przyciskami powiększania czy zmiany kontrastu nie naprawiają błędów w kodzie, takich jak brak etykiet, obsługi klawiaturą czy opisów zdjęć. Dostępność trzeba wbudować w samą stronę.