874: 7 krytycznych napraw dostępności platformy e-commerce przed audytem w 2026 roku

Zanim przejdziemy do kodu, zastanówmy się nad tym, co stoi za tymi liczbami. W 2026 roku nie chodzi już tylko o "dobrą wolę". Chodzi o konkretne kary i wykluczenie klientów. Jako konsultant widziałem firmy, które straciły dziesiątki tysięcy złotych na pozwach właśnie dlatego, że ich sklep był niedostępny dla osób z niepełnosprawnościami.

W Polsce obowiązuje ustawa o dostępności internetowej, która w 2026 roku będzie jeszcze bardziej rygorystyczna. W USA mamy do czynienia z wymaganiami ADA (Americans with Disabilities Act). Ignorowanie tych kwestii to ryzyko prawne i finansowe. Ale nie tylko. To też o tym, czy Twoi klienci mogą kupić Twój produkt.

Statystyka: 98% osób z niepełnosprawnościami w Polsce korzysta z internetu. Jeśli ich blokujesz, tracisz ogromny segment rynku.

W tym artykule omówię konkretne kroki, które musisz podjąć, aby Twoja platforma e-commerce była gotowa na audyt w 2026 roku. Skupimy się na praktycznych rozwiązaniach i kodzie źródłowym.

Zrozumienie nowego krajobrazu regulacyjnego

Wiele firm myśli, że wystarczy zainstalować "nakładkę" dostępności. To błąd. W 2026 roku audytorzy będą szukać błędów w samym kodzie strony. Standard WCAG 2.2 wprowadził nowe wymagania, które dotykają bezpośrednio funkcjonalność sklepów internetowych.

Musisz zrozumieć różnicę między "wyglądem" a "funkcjonalnością". Jeśli Twój formularz zamówienia nie działa z czytnikiem ekranowym, to jest to problem dostępności. Nawet jeśli wygląda dobrze w przeglądarce.

Kluczowe zmiany w WCAG 2.2

Standard WCAG 2.2 wprowadził kilka nowych kryteriów sukcesu, które są kluczowe dla e-commerce:

Kryterium 2.4.7 (Focus Appearance): Wymaga to, aby element z focusiem był wyraźnie widoczny. To dotyczy przycisków "Dodaj do koszyka" czy pól formularza.
Kryterium 3.2.1 (On Focus): Elementy interfejsu muszą zachowywać się poprawnie, gdy użytkownik jest na nich z focusiem.
Kryterium 4.1.2 (Name, Role, Value): Każdy element musi mieć właściwą nazwę i rolę dla czytnika ekranowego.

Jeśli nie spełniasz tych kryteriów, Twój sklep może być uznany za niedostępny. To prosta droga do pozwu.

7 krytycznych napraw przed audytem

Oto lista konkretnych problemów, które musisz naprawić w swoim kodzie źródłowym. Każdy z nich jest potencjalnym powodem do kary.

1. Formularze zamówienia i walidacja

Formularz to serce e-commerce. Jeśli nie działa poprawnie dla osoby niewidomej, stracisz klienta. Musisz zadbać o:

Labeling: Każde pole musi mieć przypisany label. W HTML oznacza się to atrybutem for w label i id w input.
Error Messages: Błędy walidacji muszą być czytelne dla czytnika ekranowego. Nie używaj tylko ikonki "X". Dodaj tekstowy opis błędu.
Autofocus: Po kliknięciu przycisku "Zamów", focus powinien przejść do pola imienia. To wymaga odpowiedniego kodu JavaScript.

Statystyka: 70% osób z niepełnosprawnościami rezygnuje z zakupu, jeśli napotkają błąd w formularzu.

2. Obsługa koszyka i przycisków akcji

Przyciski "Kup teraz" czy "Dodaj do koszyka" muszą być dostępne. Nie mogą być ukryte za ikonami bez tekstu. Musisz zadbać o:

Atrybut aria-label: Jeśli przycisk ma tylko ikonę, dodaj atrybut aria-label="Dodaj do koszyka".
Focus Management: Po kliknięciu przycisku, focus powinien pozostać na elemencie lub przejść do komunikatu o sukcesie.

3. Nawigacja i struktura strony

Użytkownik musi poruszać się po stronie za pomocą klawiatury. Musisz zadbać o:

Skip Links: Dodaj link "Przejdź do treści" na samej górze strony.
Nawigacja menu: Menu musi być logiczne i czytelne dla czytnika ekranowego.
Struktura nagłówków: Używaj h1, h2, h3 w kolejności. Nie używaj h1 do każdego elementu.

4. Obrazy i media

Każda obrazek musi mieć opis. Jeśli to produkt, opis powinien być szczegółowy.

Atrybut alt: Dodaj atrybut alt do każdej obrazy.
Wideo: Wideo muszą mieć napisy i transkrypcję.

5. Kolory i kontrast

Kolory muszą być czytelne. Musisz zadbać o:

Kontrast: Tekst musi mieć wysoki kontrast tła.
Kolor jako jedyny wskaźnik: Nie używaj koloru jako jedynego sposobu na przekazanie informacji (np. "pole jest wymagane" tylko kolorem).

6. Responsywność i interakcje

Strona musi działać na telefonach. Musisz zadbać o:

Touch Targets: Przyciski muszą być duże, aby można je było dotknąć palcem.
Animacje: Unikaj animacji, które mogą powodować migotanie (seizure).