Europejski Akt o Dostępności 2026 - wymogi dla e-commerce

Europejski Akt o Dostępności - czym jest i dlaczego dotyczy Twojego e-commerce?

Od 28 czerwca 2025 roku Europejski Akt o Dostępności (EAA, dyrektywa 2019/882) przestał być teorią - stał się obowiązującym prawem w całej Unii Europejskiej. Jeśli prowadzisz sklep internetowy, aplikację mobilną lub platformę e-commerce, te przepisy dotyczą Ciebie bezpośrednio.

W praktyce EAA oznacza jedno: produkty i usługi cyfrowe muszą być dostępne dla osób z niepełnosprawnościami. Dotyczy to nie tylko instytucji publicznych (te miały swoje regulacje od lat), ale przede wszystkim sektora prywatnego - w tym sklepów internetowych, bankowości online, platform streamingowych i terminali samoobsługowych.

Jako właściciel agencji widzę, że wielu przedsiębiorców nadal nie zdaje sobie sprawy z tego, że ich sklep może nie spełniać wymogów, które już obowiązują. A kary? Są realne i mogą być dotkliwe.

W tym artykule przeprowadzę Cię przez wszystko, co musisz wiedzieć - od tego, kogo dokładnie dotyczy EAA, przez wymagania techniczne oparte o standard WCAG, po konkretną checklistę, którą możesz wdrożyć od zaraz.

Wymagania dostępności dla sklepów internetowych - co musisz spełnić?

EAA nie podaje gotowej listy „kliknij tu, popraw tam”. Zamiast tego odwołuje się do normy zharmonizowanej EN 301 549, która z kolei opiera się na standardzie WCAG 2.2 na poziomie AA. W praktyce oznacza to, że Twój sklep internetowy musi być percepowalny, funkcjonalny, zrozumiały i solidny technicznie.

Brzmi abstrakcyjnie? Przełóżmy to na konkrety, które dotyczą każdego e-commerce.

Kluczowe obszary dostępności w e-commerce

• Nawigacja klawiaturą - cały proces zakupowy (od przeglądania produktów po finalizację zamówienia) musi być możliwy do obsłużenia bez myszy. Każdy element interaktywny wymaga widocznego fokusa.
• Kontrast i czytelność - tekst na tle musi mieć współczynnik kontrastu minimum 4,5:1 (dla dużego tekstu 3:1). Dotyczy to przycisków, etykiet formularzy, cen i opisów produktów.
• Teksty alternatywne - każde zdjęcie produktu, baner promocyjny i ikona funkcyjna potrzebują opisowego atrybutu alt. Nie chodzi o „image1.jpg”, tylko o realny opis tego, co przedstawia grafika.
• Formularze i walidacja - pola formularzy (zamówienie, rejestracja, kontakt) muszą mieć czytelne etykiety, jasne komunikaty o błędach i możliwość korekty przed wysłaniem.
• Responsywność i powiększanie - treść musi być czytelna przy powiększeniu do 200% bez utraty funkcjonalności. Układ nie może „rozjeżdżać się” przy zmianie rozmiaru tekstu.
• Multimedia - filmy produktowe i materiały wideo wymagają napisów, a treści audio - transkrypcji. Animacje muszą mieć możliwość zatrzymania.

Proces zakupowy - gdzie najczęściej „wypadają” użytkownicy?

Z mojego doświadczenia przy audytach e-commerce, trzy etapy generują najwięcej problemów z dostępnością:

1. Filtrowanie i sortowanie produktów - rozwijane listy, slidery cenowe i filtry wielokrotnego wyboru rzadko działają poprawnie z czytnikami ekranu i klawiaturą.
2. Koszyk i proces checkout - dynamicznie aktualizowane elementy (zmiana ilości, kody rabatowe, wybór dostawy) często nie komunikują zmian technologiom asystującym.
3. Płatność - bramki płatnicze osadzone w iframe’ach bywają niedostępne, a CAPTCHA bez alternatywy blokuje użytkowników z niepełnosprawnościami.

WCAG a EAA - jak spełnić wymogi techniczne w praktyce?

Europejski Akt o Dostępności nie definiuje własnych kryteriów technicznych. Zamiast tego odwołuje się do normy EN 301 549, która jest zharmonizowana z dyrektywą i bazuje na standardzie WCAG 2.2 na poziomie AA. To oznacza, że jeśli Twój sklep spełnia WCAG 2.2 AA - z dużym prawdopodobieństwem spełnia również wymogi EAA.

Ale uwaga: samo „spełnianie WCAG” to nie jest checkbox. To proces, który wymaga zrozumienia czterech fundamentalnych zasad dostępności i ich przełożenia na konkretne elementy sklepu.

4 zasady WCAG (POUR) w kontekście e-commerce

Nowe kryteria WCAG 2.2 szczególnie istotne dla e-commerce

Standard WCAG 2.2 wprowadził kilka kryteriów, które mają bezpośrednie przełożenie na sklepy internetowe. Oto te, na które zwracam szczególną uwagę podczas audytów:

• Focus Not Obscured (2.4.11 AA) - fokus klawiaturowy nie może być zakrywany przez sticky headery, popupy z cookies czy chatboty. W e-commerce to częsty problem - navbar przykrywa aktywny element i użytkownik traci orientację.
• Dragging Movements (2.5.7 AA) - wszystkie akcje wymagające przeciągania (np. slidery cenowe w filtrach) muszą mieć alternatywę w postaci pojedynczego kliknięcia.
• Target Size (2.5.8 AA) - elementy interaktywne (przyciski, linki, checkboxy) muszą mieć minimalny obszar dotyku 24x24 piksele. Drobne ikonki „dodaj do ulubionych” czy „usuń z koszyka” często nie spełniają tego kryterium.
• Redundant Entry (3.3.7 A) - jeśli użytkownik już podał dane (np. adres dostawy), system nie powinien prosić o ponowne wpisanie tych samych informacji przy adresie rozliczeniowym.

Najczęstsze błędy dostępności w e-commerce - i jak ich uniknąć

Przez ostatnie lata przeprowadziłem dziesiątki audytów sklepów internetowych i pewne błędy powtarzają się niezależnie od platformy, branży czy budżetu. Poniżej znajdziesz listę najczęstszych problemów wraz z konkretnymi rozwiązaniami - tak, żebyś mógł od razu sprawdzić, czy dotyczą też Twojego sklepu.

Błąd 1. Brak alt-textów lub generyczne opisy zdjęć

„Zdjęcie produktu”, „image.jpg”, pusty alt - to trzy najczęstsze warianty, które spotykam. Dla osób korzystających z czytników ekranu oznacza to, że nie wiedzą, co przedstawia grafika. A w e-commerce zdjęcie produktu to często najważniejszy element decyzji zakupowej.

Rozwiązanie: Opisz każde zdjęcie produktu tak, jakbyś je opisywał telefonicznie klientowi. Kolor, materiał, kształt, kluczowy detal. Dla zdjęć dekoracyjnych użyj pustego alt (alt=""), żeby czytnik je pominął.

Błąd 2. Niedostępne filtry i sortowanie produktów

Slidery cenowe, custom checkboxy i rozwijane listy filtrów to elementy, które wyglądają świetnie wizualnie, ale prawie nigdy nie działają z klawiaturą i czytnikami ekranu. Użytkownik z niepełnosprawnością nie jest w stanie odfiltrować produktów, co de facto blokuje mu korzystanie ze sklepu.

Rozwiązanie: Zamień slider cenowy na pola input z wartościami min/max. Upewnij się, że custom checkboxy mają role ARIA i reagują na klawisze Space/Enter. Każda zmiana filtra powinna być komunikowana przez live region.

Błąd 3. Niewidoczny lub niefunkcjonalny fokus klawiaturowy

Wielu deweloperów dodaje outline: none do CSS, bo niebieski obrys „wygląda brzydko”. Efekt? Użytkownik nawigujący klawiaturą nie widzi, który element jest aktywny. To jak poruszanie się po ciemnym pokoju bez latarki.

Rozwiązanie: Nigdy nie usuwaj outline bez zastąpienia go alternatywnym wskaźnikiem fokusa. Użyj :focus-visible w CSS, żeby fokus wyświetlał się tylko przy nawigacji klawiaturowej, a nie po kliknięciu myszą.

Błąd 4. Checkout niedostępny dla czytników ekranu

Dynamiczne formularze checkout (zmiana ilości produktów, wybór metody płatności, aktualizacja podsumowania) często nie komunikują zmian czytnikowi ekranu. Użytkownik nie wie, czy produkt został dodany, ile zapłaci, ani czy zamówienie zostało złożone.

Rozwiązanie: Dodaj atrybuty aria-live=“polite” do elementów, które aktualizują się dynamicznie (podsumowanie koszyka, komunikaty o statusie). Upewnij się, że każdy krok checkout ma czytelną strukturę nagłówków.

Błąd 5. Popup z cookies blokujący kontent

Baner cookie, który nie przechwytuje fokusa lub nie pozwala się zamknąć z klawiatury, blokuje dostęp do całej strony. To jeden z najprostszych problemów do naprawienia, a jednocześnie jeden z najczęstszych.

Rozwiązanie: Baner cookies powinien przechwycić fokus po załadowaniu strony, zamykać się na Escape i przenosić fokus z powrotem na stronę po zamknięciu. Przycisk „Akceptuję” musi być osiągalny z klawiatury.

Błąd 6. Zbyt niski kontrast na przyciskach i cenach

Szary tekst na jasnoszarym tle, biała cena na pastelowym banerze, bladożółty przycisk „Dodaj do koszyka” na białym tle. Modne w designie, fatalne w dostępności. Dotyczy to szczególnie cen promocyjnych, oznaczeń „Bestseller” i przycisków drugorzędnych.

Rozwiązanie: Sprawdź kontrast każdego elementu tekstowego narzędziem WebAIM Contrast Checker. Minimum to 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu (18px+ lub 14px bold).

Co warto zapamiętać?

Większość tych błędów wynika nie ze złej woli, a z braku świadomości. Deweloperzy i projektanci rzadko testują swoje rozwiązania z klawiaturą czy czytnikiem ekranu. Jedno popołudnie testów manualnych potrafi ujawnić więcej problemów niż miesiąc automatycznych skanów.

Jeśli chcesz przejść do konkretnego planu wdrożenia, sprawdź naszą checklistę zgodności z EAA w ostatniej sekcji tego artykułu.