Blog

WCAG 2.2 – nowy standard dostępności cyfrowej (omówienie i checklista)


Nowe przepisy dotyczące dostępności cyfrowej – WCAG 2.2 – weszły w życie pod koniec czerwca 2025 roku. Dla wielu firm e-commerce to już nie kwestia dobrej praktyki, ale obowiązek prawny. W artykule wyjaśniam, kogo to dotyczy, co konkretnie się zmieniło i jak dostosować serwis do nowych wymagań.


Z tego artykułu dowiesz się:

  1. Czym jest WCAG 2.2 i dlaczego został wprowadzony
  2. Od kiedy obowiązuje WCAG 2.2
  3. Jakie firmy muszą spełniać wymagania WCAG 2.2
  4. Dlaczego warto wdrożyć WCAG 2.2
  5. WCAG 2.2 a sklep internetowy – jakie elementy serwisu podlegają ocenie
  6. Jak samodzielnie sprawdzić zgodność z WCAG 2.2




Co to jest WCAG 2.2 i dlaczego został wprowadzony

WCAG 2.2 (Web Content Accessibility Guidelines) to międzynarodowy standard dostępności treści cyfrowych, opracowany przez W3C. Określa techniczne i projektowe wytyczne, które mają zapewnić, że strony internetowe, aplikacje i inne interfejsy cyfrowe będą dostępne dla osób z różnymi ograniczeniami – m.in. wzrokowymi, słuchowymi, ruchowymi czy poznawczymi.

Wersja 2.2 rozszerza wcześniejszy standard WCAG 2.1 o dodatkowe dziewięć kryteriów sukcesu, skupiając się głównie na użytkownikach korzystających z urządzeń mobilnych, osobach starszych oraz osobach z trudnościami poznawczymi. To m.in. zmiany dotyczące obsługi formularzy, nawigacji i interaktywnych elementów, które mają ułatwić korzystanie z serwisów niezależnie od sprawności użytkownika.

Wprowadzenie WCAG 2.2 jako wymogu prawnego w UE (na mocy European Accessibility Act) ma na celu ujednolicenie poziomu dostępności w całej Europie i zapewnienie równego dostępu do usług cyfrowych – również w e-commerce. To nie tylko kwestia inkluzywności, ale też zgodności z prawem i unikania potencjalnych kar.


Od kiedy obowiązuje WCAG 2.2 w Polsce

Przepisy wdrażające wymagania WCAG 2.2 w Polsce weszły w życie 28 czerwca 2025 roku, zgodnie z unijną dyrektywą zwaną Europejskim Aktem o Dostępności (European Accessibility Act). Od tego momentu część firm działających w przestrzeni cyfrowej ma obowiązek zapewnienia dostępności swoich produktów i usług zgodnie z nowym standardem.

Obowiązek nie został wprowadzony nagle – przepisy były znane wcześniej, a przedsiębiorcy mieli czas na przygotowanie się do zmian. Od czerwca jednak brak zgodności z WCAG 2.2 może wiązać się z odpowiedzialnością prawną, kontrolami i potencjalnymi sankcjami.

Warto zaznaczyć, że chodzi nie tylko o same strony internetowe, ale też o aplikacje mobilne, terminale płatnicze, e-booki, systemy ticketowe czy oprogramowanie używane do świadczenia usług cyfrowych.


Jakie firmy muszą spełniać wymagania WCAG 2.2

Obowiązek stosowania standardu WCAG 2.2 wynika z unijnej dyrektywy o dostępności cyfrowej (European Accessibility Act), wdrożonej do polskiego prawa 28 czerwca 2025 roku. Nie dotyczy on wszystkich firm – został ograniczony do określonych kategorii działalności i skali biznesu. Wymagania są obowiązkowe tylko wtedy, gdy firma spełnia łącznie dwa warunki:

  • Zatrudnia co najmniej 10 pracowników
  • Osiąga roczny obrót lub całkowity bilans powyżej 2 milionów euro

Jeśli firma nie spełnia któregokolwiek z tych kryteriów, nie ma obowiązku prawnego wdrażania WCAG 2.2. W praktyce oznacza to, że jednoosobowy sklep internetowy, mała agencja czy startup z niskimi przychodami są formalnie wyłączeni z przepisów. Ale uwaga — to nie znaczy, że temat można całkowicie zignorować. Nawet firmy poniżej progów mogą być pośrednio zobowiązane do wdrożenia dostępności — np. gdy:

  • Współpracują z podmiotami publicznymi
  • Korzystają z dofinansowań lub środków unijnych
  • Korzystają z dofinansowań lub środków unijnych
  • Chcą brać udział w przetargach, gdzie dostępność to wymóg formalny
  • Działają globalnie i podlegają przepisom państw, które mają szersze regulacje niż te unijne

Dlaczego warto wdrożyć WCAG 2.2 (nawet jeżeli nie musisz)

Brak obowiązku nie oznacza braku korzyści. Wdrożenie zasad dostępności cyfrowej ma bezpośredni wpływ na jakość serwisu, jego konwersję i pozycjonowanie. Strony zgodne z WCAG 2.2:

  • Są czytelniejsze i łatwiejsze w obsłudze
  • Lepiej działają na urządzeniach mobilnych i w różnych przeglądarkach
  • Są bardziej dostępne dla osób starszych i tych z ograniczeniami (np. problemy ze wzrokiem, koncentracją czy motoryką)
  • Lepiej indeksują się w Google, bo wiele zasad WCAG pokrywa się z wytycznymi dla SEO i UX
  • Mogą zwiększać zaufanie i profesjonalny wizerunek marki

Krótko mówiąc — nawet jeśli nie musisz tego robić, opłaca się to zrobić. Dostosowanie serwisu do WCAG 2.2 to po prostu dobra praktyka, która długofalowo się zwróci.


WCAG 2.2 a sklep internetowy – jakie elementy serwisu podlegają ocenie

W przypadku sklepów internetowych ocenie podlega nie tylko wygląd czy ogólna funkcjonalność strony, ale całościowe doświadczenie użytkownika – od pierwszego kontaktu z treścią, przez proces zakupowy, aż po obsługę formularzy, wyszukiwarek czy materiałów multimedialnych. Wdrożenie dostępności oznacza konieczność zadbania o szereg konkretnych elementów, których pominięcie może skutkować wykluczeniem części odbiorców – na przykład osób z niepełnosprawnością wzroku, ruchu czy słuchu.

Struktura i nawigacja

Logiczna i konsekwentna struktura treści pozwala zrozumieć układ strony i szybko dotrzeć do potrzebnych informacji. Każda podstrona powinna zawierać jeden nagłówek główny (H1), który określa jej temat. Kolejne sekcje muszą być zorganizowane hierarchicznie – H2, H3, H4 – a teksty podzielone na krótkie akapity, poprzedzone nagłówkami i oddzielone wizualnie.

Menu oraz elementy nawigacyjne powinny być możliwe do obsługi klawiaturą. To oznacza, że użytkownik przechodzi przez kolejne pozycje za pomocą klawisza Tab, bez pomijania elementów i bez zapętlania się w tzw. „pułapkach klawiaturowych”. Obecny element powinien być wyraźnie oznaczony – np. ramką, podświetleniem lub inną zmianą stylu. Ikony pełniące funkcje nawigacyjne (np. hamburger menu) muszą być opisane – użytkownik musi wiedzieć, co uruchamia.

Formularze

Brak jednoznacznych, trwale widocznych etykiet przy polach formularza, nieczytelne komunikaty o błędach czy brak obsługi za pomocą klawiatury to błędy, które skutecznie blokują konwersję. Każde pole – imię, e-mail, adres, hasło – musi mieć podpis (label), który nie znika w trakcie pisania, jak ma to miejsce w przypadku samych placeholderów. Informacja o tym, że pole jest wymagane, powinna być przekazana tekstowo (np. „Pole obowiązkowe”), nie tylko kolorem czy symbolem gwiazdki.

Równie ważne są komunikaty walidacyjne. „Błąd” to informacja bezwartościowa – poprawny komunikat to taki, który mówi użytkownikowi, co i jak ma poprawić, np. „Wpisz prawidłowy adres e-mail”. Całość – od wypełnienia po wysyłkę – musi być możliwa do zrealizowania przy użyciu wyłącznie klawiatury. Checkboxy, przyciski i rozwijane listy muszą być w pełni obsługiwalne bez użycia myszy. Kolejność pól powinna być naturalna i przewidywalna – nie może dochodzić do przeskakiwania fokusu w losowe miejsca.

Wyszukiwarka i filtry

Wyszukiwarka to kluczowy element nawigacyjny w sklepie internetowym, zwłaszcza przy dużym asortymencie. Musi być widoczna, łatwa do zlokalizowania i dostępna z poziomu klawiatury. Użytkownik nie może się zastanawiać, gdzie wpisuje hasło ani jak zatwierdzić wynik. Przycisk „szukaj” powinien być dobrze opisany, również dla czytników ekranu – nie może to być tylko ikona lupy bez alternatywnego tekstu.

Wyniki wyszukiwania muszą być zrozumiałe i logicznie posegregowane. Osoba korzystająca z czytnika ekranu powinna wiedzieć, ile wyników znaleziono i co zawiera każdy z nich – nie tylko nazwę produktu, ale też jego wariant, cenę, dostępność. Tak samo z filtrami: każdy checkbox musi być możliwy do zaznaczenia klawiaturą, opisany tekstowo (nie tylko graficznie), a wybór filtru musi dawać czytelny efekt – np. informację o liczbie dopasowanych produktów.

Nieczytelna lub nieintuicyjna wyszukiwarka to szybka droga do porzuconego koszyka – nie dlatego, że nie było produktu, ale dlatego, że użytkownik nie mógł go znaleźć.

Obrazy i multimedia

Każdy obraz, który niesie znaczenie (np. produkt, infografika, przycisk w formie ikony), musi mieć opis alternatywny (atrybut alt). To jedyny sposób, by osoby niewidome mogły zrozumieć, co obraz przedstawia. Opis nie może być przypadkowy – ma trafnie oddawać zawartość lub funkcję. Jeśli obraz służy jako przycisk „dodaj do koszyka”, to właśnie tak ma być opisany. Jeśli to baner promocyjny – alt powinien zawierać treść oferty.

Obrazy czysto dekoracyjne, które nie przekazują żadnych informacji, powinny mieć pusty alt (alt="") – dzięki temu czytnik ekranu je pomija.

Multimedia, np. filmy reklamowe, muszą mieć napisy – nie jako dodatek, ale standard. Materiały automatycznie odtwarzane muszą mieć wyłączony dźwięk i możliwość szybkiego zatrzymania. Slidery (karuzele) muszą być możliwe do wstrzymania i obsłużenia z klawiatury. I żadnych migających elementów – to nie tylko irytujące, ale w niektórych przypadkach może być zagrożeniem zdrowotnym (atak padaczki).

Kontrast

Tekst i elementy interaktywne muszą być czytelne – również w słabszych warunkach oświetleniowych i dla osób z zaburzeniami widzenia barw. Minimalny kontrast tekstu do tła to 4,5:1. Dla linków – co najmniej 3:1 względem tekstu oraz 4,5:1 względem tła, chyba że są dodatkowo podkreślone.

Przyciski akcji (np. „Kup teraz”, „Zapisz się”) muszą być widoczne i łatwe do zlokalizowania – nie zlewające się z tłem, z odpowiednim kontrastem przycisku i jego etykiety. Tak samo menu – użytkownik musi widzieć, które pozycje są dostępne i gdzie aktualnie się znajduje.

Wskaźnik fokusu (czyli element pokazujący, który przycisk czy link jest aktualnie aktywny przy nawigacji klawiaturą) musi być widoczny. Ramka, podkreślenie, zmiana koloru – ale z kontrastem co najmniej 3:1.

Responsywność i skalowanie

Sklep musi działać poprawnie na każdym urządzeniu – komputerze, tablecie, smartfonie – zarówno w pionie, jak i w poziomie. Menu, koszyk, formularze, wyszukiwarka – wszystko musi być dostępne w wersji mobilnej, bez ucinania elementów, bez przewijania na boki.

Użytkownik powinien mieć możliwość powiększenia strony do 200% bez utraty funkcjonalności. Przy powiększeniu nie może pojawić się poziomy pasek przewijania, a układ strony nie powinien się „rozsypywać”.

Ważne też, by przyciski i pola formularzy miały odpowiedni rozmiar dla ekranów dotykowych – minimum 44x44 piksele. Obsługa powinna być możliwa również za pomocą czytników ekranu i innych technologii wspomagających. Gesty (np. przesuwanie karuzeli) muszą mieć alternatywę – np. strzałki, przyciski „dalej” i „wstecz”.

Powyższe omówienie to skrócona wersja kluczowych wymagań, które mają realny wpływ na użyteczność, konwersję i widoczność sklepu w Google. Nawet jeśli Twoja firma formalnie nie podlega obowiązkowi dostępności, jej wdrożenie ma sens – biznesowy, technologiczny i etyczny.


Jak sprawdzić czy platforma spełnia wymagania WCAG 2.2

Nie musisz być programistą ani specjalistą UX, żeby przeprowadzić podstawową ocenę dostępności swojej strony. Wystarczy odrobina uwagi, znajomość kilku darmowych narzędzi i kilkanaście minut na testy. Taki audyt „gołym okiem” pozwoli Ci szybko wykryć najczęstsze problemy, które utrudniają korzystanie ze sklepu – a czasem całkowicie uniemożliwiają zakupy.

1. Oceń strukturę treści

Zaprojektowana zgodnie ze sztuką struktura treści, to nie tylko kwestia dostępności – to też kwestia konwersji i zdrowego UX. Zobacz, czy:

  • Jest tylko jeden nagłówek H1 na stronie
  • Pozostałe nagłówki są w logicznej hierarchii (H2, H3 itd.)
  • Teksty są czytelne, podzielone, nieprzytłaczają ścianą słów
  • są odstępy między sekcjami

Dla szybkiej i skutecznej weryfikacji hierarchii nagłówków warto skorzystać z narzędzia HeadingsMap – darmowej wtyczki do Chrome, która pokazuje pełną strukturę nagłówków na stronie i sygnalizuje ewentualne błędy.

2. Sprawdź nawigację klawiaturą

Odłącz mysz. Spróbuj poruszać się po stronie za pomocą klawiszy Tab, Enter i Shift + Tab. Czy:

  • Da się dotrzeć do każdego elementu (menu, przyciski, pola formularzy)
  • Aktywny element jest wyraźnie zaznaczony (ramka, zmiana koloru)
  • Można zrealizować cały proces zakupowy bez myszy

Jeśli nie – masz poważny problem z dostępnością.

3. Oceń formularze

Czy każde pole ma podpis (etykietę), nawet gdy nie jest aktywne? Czy wiadomo, które pola są obowiązkowe i dlaczego coś nie działa, jeśli pojawi się błąd? Spróbuj celowo wpisać błędny e-mail i zobacz, czy komunikat błędu mówi coś konkretnego, czy tylko rzuca „coś poszło nie tak”.

4. Sprawdź tekst alternatywny (alt) obrazów

Najedź kursorem na obrazek i spróbuj go otworzyć w nowej karcie – często przeglądarka pokaże tekst alternatywny. Możesz też użyć narzędzia WAVE. Sprawdź czy:

  • Opisy są trafne i opisują funkcję grafiki, a nie np. „baner1.jpg”
  • Dekoracje mają pusty atrybut alt
  • Ikony (np. koszyk, lupa) mają opis ich funkcji

5. Zmierz kontrast

Skorzystaj z kontrast checkera i sprawdź różnicę kolorów między tekstem a tłem, linkiem a tekstem, przyciskiem a tłem. Wymagania są konkretne: minimum 4.5:1 dla tekstu i 3:1 dla elementów interaktywnych. Jeśli tekst wygląda „jasno na jasno” – masz problem.

6. Zrób test responsywności

Otwórz stronę na telefonie. Przekręć ekran. Powiększ stronę do 200%. Sprawdź, czy wszystko działa, czy menu się rozwija, czy nic nie wychodzi poza ekran, a przyciski da się kliknąć. To nie rocket science – wystarczy chwila, by zauważyć, że coś się rozjeżdża.

7. Przeprowadź test z darmowym narzędziem

Te narzędzia nie pokażą wszystkiego, ale dobrze wskażą punkty zapalne.

  • Google Lighthouse – zintegrowane z Chrome, raportuje błędy dostępności, wydajności i SEO
  • WAVE – świetne do szybkiego przeglądu błędów (np. brak altów, zła hierarchia nagłówków)
  • axe DevTools – rozbudowane narzędzie jako wtyczka do Chrome

8. Użyj czytnika ekranu (opcjonalnie)

W systemie Windows uruchom wbudowany czytnik ekranu Narrator, w systemie macOS narzędzie VoiceOver. Przemieszczaj się po stronie wyłącznie za pomocą klawiatury i zwróć uwagę, czy odczytywana zawartość jest czytelna i logiczna. Jeśli interfejs jest chaotyczny, elementy nieoznaczone lub nieaktywne, to znak, że dostępność wymaga poprawy.


Podsumowanie

Dostosowanie stron internetowych i sklepów online do standardów WCAG 2.2 to dziś podstawowy element profesjonalnego podejścia do projektowania i rozwoju serwisów. Od 28 czerwca 2025 roku obowiązują w Polsce nowe przepisy, które wprost nakładają taki obowiązek na wiele firm – szczególnie tych większych i współpracujących z sektorem publicznym.

Ale nawet jeśli Twoja firma nie musi spełniać tych wymagań formalnie, warto potraktować dostępność jako część strategii: poprawia doświadczenie użytkownika, zwiększa konwersję i wspiera SEO. To po prostu się opłaca – dziś i w dłuższej perspektywie.

Przygotowałam checklistę zgodności z WCAG 2.2 – zwięzłą, przejrzystą i gotową do pobrania w formacie PDF. To praktyczne narzędzie, które ułatwi Ci audyt i wdrożenie dostępności w serwisie lub sklepie internetowym.



FAQ


Co to jest WCAG 2.2?

WCAG 2.2 to najnowszy zestaw wytycznych dotyczących dostępności stron internetowych, mający na celu ułatwienie korzystania z serwisów osobom z różnymi niepełnosprawnościami. Standaryzuje wymagania techniczne i projektowe dla twórców stron.

Od kiedy obowiązuje WCAG 2.2 w Polsce?

Nowe przepisy dotyczące WCAG 2.2 obowiązują w Polsce od 28 czerwca 2025 roku, nakładając obowiązki na wiele firm i instytucji w zakresie dostępności cyfrowej.

Kogo dotyczy obowiązek spełniania WCAG 2.2?

Obowiązek dotyczy głównie organizacji publicznych, dużych firm (powyżej określonych progów zatrudnienia i obrotu) oraz podmiotów korzystających z finansowania publicznego lub współpracujących z administracją.

Czy mała firma musi stosować WCAG 2.2?

Małe firmy formalnie mogą być zwolnione z obowiązku, ale wdrożenie WCAG 2.2 jest zalecane, ponieważ poprawia użyteczność, SEO i wizerunek marki.

Jak samodzielnie sprawdzić zgodność strony z WCAG 2.2?

Można użyć darmowych narzędzi (np. WAVE, axe, Lighthouse), przetestować nawigację klawiaturą, sprawdzić teksty alternatywne dla obrazów oraz kontrast kolorów, a także zweryfikować czytnikiem ekranu typu Narrator lub VoiceOver.