WCAG i Europejski Akt o Dostępności – kompletny przewodnik dla przedsiębiorców

Dostępność stron internetowych to nie tylko fakt, że są one online i można zapoznać się z ich zawartością. To także dbałość o to, aby z Twojej witryny mogli swobodnie korzystać wszyscy – w tym osoby z niepełnosprawnościami ruchowymi czy poznawczymi.

Od 28 czerwca 2025 r. część przedsiębiorców ma w tym zakresie również konkretne obowiązki prawne. Wynikają one z Polskiego Aktu o Dostępności (PAD), czyli ustawy wdrażającej do polskiego prawa Europejski Akt o Dostępności (EAA).

Czym jest WCAG?

WCAG (Web Content Accessibility Guidelines) to międzynarodowe wytyczne dotyczące dostępności stron internetowych i innych treści cyfrowych. 

Pomagają projektować serwisy tak, aby można było korzystać z nich niezależnie od sposobu obsługi urządzenia czy indywidualnych ograniczeń użytkownika. Dotyczy to np. osób korzystających z czytników ekranu, obsługujących stronę wyłącznie klawiaturą czy mających trudności z rozróżnianiem kolorów.

Wytyczne WCAG to dziś najważniejszy globalny punkt odniesienia, jeśli chodzi o dostępność stron i aplikacji. Są podstawą przepisów w wielu krajach – i właśnie do nich odwołuje się Europejski Akt o Dostępności (EAA), który w 2025 r. uczyni WCAG obowiązkowym także dla wielu polskich firm.

Zasady POUR w praktyce

Wytyczne WCAG opierają się na czterech zasadach, określanych skrótem POUR. Oto one:

1. Postrzegalność (Perceivable). Użytkownicy muszą korzystać ze stron internetowych za pomocą dostępnych dla nich zmysłów – czyli słuchu lub wzroku. Przykłady spełniania zaleceń WCAG w tym zakresie to obrazy z opisem alternatywnym (ALT) czy napisy do materiałów wideo.
2. Funkcjonalność (Operable). Strony www powinny umożliwiać obsługę na różne sposoby – nie tylko za pomocą myszki, ale też przy użyciu klawiatury czy głosu.
3. Zrozumiałość (Understandable). Treść i sposób działania strony muszą być intuicyjne, przewidywalne i spójne. Chodzi tu m.in. o prosty język, zrozumiałe podpowiedzi czy dostępne i zrozumiałe komunikaty błędów w formularzach i podpowiedzi jak je poprawić.
4. Solidność (Robust). Strona powinna być sprawna technicznie i kompatybilna z różnymi urządzeniami oraz technologiami wspomagającymi, np. czytnikami ekranu. Przykład zastosowania to uporządkowany kod HTML z użyciem semantycznych znaczników i atrybutów ARIA.

Kogo obowiązuje WCAG 2.2?

W Polsce obowiązek spełniania wytycznych WCAG dotyczy przede wszystkim:

• instytucji publicznych (urzędy, szkoły, szpitale),
• podmiotów realizujących zadania publiczne,
• części organizacji pozarządowych (jeśli otrzymują środki publiczne i świadczą usługi online).

Dla nich nadal formalnie obowiązuje WCAG 2.1 na poziomie AA, choć zaleca się już dostosowanie do WCAG 2.2.

Firmy prywatne (np. sklepy internetowe, serwisy komercyjne) nie są dziś objęte WCAG wprost – ale od 28 czerwca 2025 roku wchodzi w życie Europejski Akt o Dostępności (EAA), który wymaga zgodności z WCAG co najmniej 2.1 AA (a najlepiej 2.2).

Twórcy i dostawcy oprogramowania (np. platformy e-commerce, systemy płatności) również będą musieli spełniać wymagania EAA, czyli projektować narzędzia zgodne z zasadami dostępności.

Czy sklep internetowy musi być zgodny z WCAG 2.2?

Nie należy utożsamiać Polskiego Aktu o Dostępności z obowiązkiem spełnienia wszystkich kryteriów WCAG 2.2.

W przypadku usług handlu elektronicznego aktualnym punktem odniesienia jest norma EN 301 549 V3.2.1 z 2021 r., która określa wymagania dotyczące dostępności produktów i usług ICT. W zakresie stron internetowych w dużej mierze bazuje ona na kryteriach WCAG.

WCAG 2.2 jest nowszą wersją wytycznych i warto brać ją pod uwagę przy projektowaniu oraz rozwijaniu sklepu. Nie oznacza to jednak, że każde kryterium tej wersji jest automatycznie obowiązkiem wynikającym z PAD.

Sprowadza się to do tego, że klient powinien być w stanie znaleźć potrzebne informacje, poruszać się po sklepie i przejść przez proces zakupowy również wtedy, gdy korzysta z technologii wspomagających lub nie może obsługiwać strony w standardowy sposób.

Polski Akt o Dostępności – co zmienia dla e-commerce?

Od 28 czerwca 2025 r. obowiązuje w Polsce ustawa o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze, określana jako Polski Akt o Dostępności (PAD).

Ustawa wdraża Europejski Akt o Dostępności i obejmuje m.in. usługi handlu elektronicznego świadczone konsumentom.

Są to usługi oferowane lub świadczone:

• na odległość,
• za pośrednictwem stron internetowych lub urządzeń mobilnych,
• drogą elektroniczną,
• na indywidualne żądanie konsumenta,
• w celu zawarcia umowy.

Nie chodzi więc wyłącznie o klasyczne sklepy z produktami fizycznymi. Przepisy mogą mieć zastosowanie również do innych produktów i usług sprzedawanych konsumentom online.

W przypadku usług handlu elektronicznego organem nadzorującym spełnianie wymagań jest Minister Cyfryzacji.

Jak dostosować sklep internetowy do wymagań dostępności?

Nawigacja i obsługa klawiaturą

Użytkownik powinien mieć możliwość wygodnego korzystania z menu, linków, filtrów, formularzy czy przycisków bez użycia myszy.

Przejście po stronie za pomocą klawisza Tab powinno odbywać się w logicznej kolejności. Użytkownik musi również widzieć, który element jest aktualnie aktywny.

Sprawdź także wyskakujące okna, bannery i przyklejone elementy strony. Nie powinny one blokować dostępu do ważnych funkcji ani zasłaniać aktualnie zaznaczonego elementu.

Linki i przyciski

Użytkownik powinien wiedzieć, co wydarzy się po kliknięciu danego elementu.

Zamiast ogólnych komunikatów takich jak „Kliknij tutaj” lepiej stosować precyzyjne nazwy, np. „Przejdź do koszyka”, „Zobacz szczegóły produktu” czy „Przejdź do płatności”.

Nie ograniczaj się też wyłącznie do ikon na przyciskach – zawsze dodawaj podpisy. Jeżeli przycisk przedstawia np. koszyk, lupę czy serce, jego przeznaczenie powinno być możliwe do rozpoznania także przez technologie wspomagające.

Formularze

Każde pole formularza powinno mieć jasny opis informujący, jakie dane powinien podać użytkownik.

Nie wystarczy także oznaczenie błędu wyłącznie kolorem. Zamiast samego czerwonego obramowania pola klient powinien otrzymać konkretny komunikat, np. „Wprowadź poprawny adres e-mail”.

Co więcej, użytkownik powinien móc wypełnić formularz rejestracji, logowania czy składania zamówienia bez użycia myszy.

Zdjęcia produktów

Istotne zdjęcia powinny mieć teksty alternatywne, które przekazują użytkownikowi potrzebne informacje.

Przykładowy ALT może brzmieć:

„Damska sukienka midi w kolorze butelkowej zieleni z krótkim rękawem”.

Opis powinien informować o tym, co jest ważne z punktu widzenia osoby kupującej produkt. Nie ma natomiast potrzeby rozbudowanego opisywania elementów pełniących wyłącznie funkcję dekoracyjną.

Opisy produktów

Stosuj:

• nagłówki,
• krótkie akapity,
• listy,
• tabele, gdy rzeczywiście pomagają uporządkować parametry.

Nie publikuj ważnych informacji wyłącznie na grafikach. Jeżeli tabela rozmiarów, instrukcja czy istotne parametry produktu znajdują się na obrazie, osoba korzystająca z czytnika ekranu może nie mieć do nich dostępu.

Kolory i kontrast

Tekst musi być wyraźnie widoczny na tle strony. Uważaj przede wszystkim na jasnoszare napisy umieszczane na białym tle oraz inne zestawienia o niewielkim kontraście.

Kolor nie powinien być również jedynym sposobem przekazywania informacji. Jeżeli np. niepoprawnie uzupełnione pole formularza oznaczasz na czerwono, dodaj także komunikat wyjaśniający, na czym polega błąd.

Koszyk i proces składania zamówienia

Dostępność strony głównej czy kart produktów nie wystarczy, jeżeli klient nie może samodzielnie sfinalizować zakupu.

Sprawdź więc cały proces:

produkt → wybór wariantu → dodanie do koszyka → koszyk → dane klienta → dostawa → płatność → potwierdzenie zamówienia.

Zadbaj o to, aby przyciski były prawidłowo opisane, formularze możliwe do obsłużenia za pomocą klawiatury, a komunikaty o błędach jednoznaczne. Szczególne znaczenie ma również dostępność mechanizmów związanych z logowaniem, identyfikacją użytkownika i płatnością.

Filtry i sortowanie

Użytkownik powinien mieć możliwość korzystania z filtrowania, sortowania czy menu rozwijanego bez użycia myszy.

Użytkownik powinien wiedzieć:

• który filtr jest zaznaczony,
• jak go usunąć,
• ile produktów pozostało po filtrowaniu,
• jak wrócić do poprzedniego widoku.

Jeżeli działanie użytkownika powoduje zmianę zawartości strony, informacja o tej zmianie powinna być możliwa do odczytania również przez technologie wspomagające.

Jak sprawdzić poziom dostępności strony?

Oto narzędzia, które Ci w tym pomogą:

• WAVE – wystarczy, że wkleisz adres strony, a narzędzie pokaże problemy – bez ingerencji w kod. Zaznaczy błędy bezpośrednio na stronie i poda Ci krótkie wyjaśnienia.
• axe DevTools – to wtyczka do Chrome. Narzędzie pokazuje błędy dostępności wraz z jasnymi wskazówkami, co i jak poprawić.
• Siteimprove Accessibility Checker – wtyczka do Chrome i Firefoxa. Po zainstalowaniu możesz włączyć analizę bezpośrednio na stronie, którą przeglądasz. Narzędzie wykrywa błędy w dostępności i podpowiada, które z nich mają realny wpływ na użytkowników.
• Contrast Checker (WebAIM) – wpisujesz kolor tekstu i tła (np. w formacie #000000 i #FFFFFF), a narzędzie podpowiada, czy kontrast spełnia wymogi WCAG.

wyniki analizy w narzędziu Wave

Możesz także przeprowadzić testy manualne:

• Przejdź przez zawartość strony za pomocą klawiatury – użyj Tab, Shift+Tab, Enter i sprawdź, czy da się łatwo dotrzeć do wszystkich przycisków i formularzy.
• Uruchom czytnik ekranu (np. NVDA) i posłuchaj, jak brzmią treści na stronie – czy wszystkie komunikaty są zrozumiałe i sensowne.
• Oceń kontrast tekstu względem tła – czy możesz wygodnie przeczytać teksty bez wytężania wzroku?

Jakie są najczęstsze błędy w dostępności stron?

Większość błędów to rzeczy, których nie widać od razu, ale które utrudniają korzystanie ze strony. Chodzi np. o:

• zbyt niski kontrast tekstu,
• brak widocznego focusa (nie widać, który element jest aktywny),
• przyciski z samą ikoną bez opisu,
• źle opisane formularze lub brak opisów,
• błędna struktura nagłówków (np. brak H1, nieuzasadnione skoki od H2 do H4),
• zbędne lub błędne atrybuty ARIA – to specjalne oznaczenia w kodzie, które pomagają czytnikom ekranu zrozumieć, jaką rolę pełnią poszczególne elementy na stronie (np. przyciski, menu, powiadomienia).

Jak możesz poprawić dostępność swojego sklepu?

• Zmień kolory tekstów i tła, jeśli kontrast jest słaby – jasnoszary tekst na białym tle to jeden z najczęstszych błędów.
• Upewnij się, że przyciski i linki mają jasne opisy – zamiast ogólnych komunikatów typu „Kliknij tutaj” używaj „Zobacz szczegóły produktu” albo „Dodaj do koszyka”.
• Dodaj opisy alternatywne do zdjęć (tzw. alt teksty) – np. „Sukienka midi w kolorze butelkowej zieleni” – nie zostawiaj pustego pola.
• Zadbaj o czytelność tekstu – podziel długie akapity na krótsze, używaj nagłówków i list wypunktowanych.
• Używaj większych czcionek – minimum 16 px, najlepiej unikaj też ozdobnych fontów.
• Sprawdź, czy filmy i nagrania mają napisy – jeśli nie, dodaj je (w wielu edytorach można to zrobić automatycznie).
• Zrezygnuj z tekstów zapisanych jako obrazki – jeśli coś jest ważne (np. regulamin, dane kontaktowe), powinno być tekstem.
• Zadbaj o dostępność kontaktu – oprócz telefonu podaj e-mail lub formularz, z którego może skorzystać osoba niesłysząca.
• Zoptymalizuj kolejność treści na stronie – najważniejsze informacje powinny być na górze, a nawigacja logiczna i prosta.

Korzyści z dostępnej strony internetowej

Dostosowanie strony do wytycznych WCAG to nie tylko obowiązek prawny. To także realne korzyści dla Twojego biznesu:

Wpływ dostępności na pozycjonowanie (SEO)

Wiele aspektów związanych z dostępnością stron wpływa na ranking w Google. To między innymi:

• Struktura nagłówków – poprawna hierarchia H1, H2, H3 pomaga lepiej zrozumieć treści zarówno robotom Google, jak i osobom korzystającym z czytników ekranu.
• Teksty alternatywne (alt) przy obrazach – wspierają indeksowanie i dostępność jednocześnie.
• Szybkość i przejrzystość nawigacji – lepszy UX to niższy współczynnik odrzuceń, dłuższy czas spędzony na stronie i wyższe szanse na konwersję. A nie jest tajemnicą, że tego typu czynniki behawioralne wpływają na pozycje w Google.
• Responsywność – Google w pierwszej kolejności indeksuje wersje mobilne stron. Ignorując ten fakt, nie masz w praktyce szans na wysoką widoczność w wyszukiwarce.

Dostępność a wizerunek marki

Coraz więcej użytkowników zwraca uwagę na to, czy firma działa odpowiedzialnie i inkluzywnie. Strona dostępna dla wszystkich to konkretna deklaracja wartości, którą klienci z różnych środowisk mogą docenić.

Co zyskujesz, dbając o dostępność w tym kontekście?

• Lepszy odbiór marki – jako świadomej, nowoczesnej i otwartej.
• Większe zaufanie klientów – także tych, którzy mogą mieć szczególne potrzeby.
• Przewagę nad konkurencją, która dostępnością jeszcze się nie zajęła.
• Gotowość na zmiany prawne – co daje spokój i przewidywalność biznesową.

Czy aplikacje mobilne i pliki PDF muszą być dostępne?

Tak. Europejski Akt o Dostępności (EAA) obejmuje nie tylko strony internetowe, ale także aplikacje mobilne i dokumenty cyfrowe – np. pliki PDF.

Jak zapewnić dostępność aplikacji mobilnej?

Aplikacja musi działać poprawnie także dla osób, które nie korzystają z ekranu w klasyczny sposób – np. używają czytnika ekranu lub obsługują telefon jedną ręką.

Zadbaj o to, aby:

• Wszystkie przyciski i ikony miały opisy (np. nazwy funkcji czy etykiety do czytnika).
• Elementy były ułożone logicznie.
• Powiadomienia były czytelne i dostępne dla czytników ekranu (np. VoiceOver, TalkBack),
• Czcionki były wystarczająco duże, a kolory miały dobry kontrast.

Jak przygotować dostępny plik PDF?

Pliki PDF powinny być zgodny ze standardami PDF/UA – czyli możliwe do odczytania przez osoby korzystające z czytników ekranu.

Sprawdź, czy Twój PDF:

• nie jest zeskanowanym obrazkiem – tekst musi być możliwy do zaznaczenia i kopiowania,
• ma uporządkowaną strukturę – z nagłówkami, listami, opisami grafik,
• zawiera teksty alternatywne dla obrazów,
• daje się odczytać się w logicznej kolejności – jak w tradycyjnym dokumencie.

Kary za brak dostępności

Konsument, który stwierdzi, że usługa nie spełnia wymagań dostępności, może złożyć skargę do usługodawcy.

Co do zasady przedsiębiorca ma 30 dni na jej rozpatrzenie. W szczególnie skomplikowanych przypadkach termin może zostać wydłużony do 60 dni.

Za naruszenie obowiązków wynikających z PAD mogą zostać nałożone kary pieniężne. Ich wysokość zależy od rodzaju naruszenia, ale ustawa przewiduje kary sięgające dziesięciokrotności przeciętnego miesięcznego wynagrodzenia w gospodarce narodowej za poprzedni rok, z dodatkowym limitem wynoszącym 10% obrotu przedsiębiorcy osiągniętego w poprzednim roku obrotowym.

Przy ustalaniu kary bierze się pod uwagę m.in. charakter i wagę naruszenia.