Czy Twoja strona spełnia kryteria WCAG? Wykonaj bezpłatny audyt

Masz stronę, w pierwszej chwili wygląda dobrze, design dopracowany do perfekcji, ale audyt pod WCAG potrafi ją „oblać” na rzeczach niewidocznych przy zwykłym przeglądaniu. WCAG to zestaw wytycznych, jakie musi spełniać strona internetowa w związku z obowiązującym od 28 czerwca 2025 EAA (European Accessibility Act) dla wybranych produktów i usług cyfrowych. Dostępność cyfrowa stała się elementem zgodności i ryzyka biznesowego. WCAG to najprostszy język, żeby te wymagania przełożyć na konkretne poprawki na stronie.

Podstawowy audyt, uwzględniający dostępność, wykonasz bezpłatnie w cyber_Folks. Potraktuj go jako audyt jakości całej witryny, bo wiele elementów WCAG pokrywa się 1:1 z tym, co poprawia doświadczenie użytkownika i (pośrednio) SEO.

Z tego artykułu dowiesz się:

Co to jest WCAG?

WCAG (Web Content Accessibility Guidelines) to zestaw wytycznych, opisujących jak projektować i budować stronę internetową tak, aby była dostępna dla jak najszerszej grupy użytkowników. Chodzi m.in. o osoby z niepełnosprawnością wzroku, słuchu, ruchu czy trudnościami poznawczymi, ale też o użytkowników korzystających z telefonu z małym ekranem w pełnym słońcu.

Wytyczne WCAG opracowało World Wide Web Consortium (W3C), międzynarodowa organizacja ekspertów stojąca za standardami sieci. Same zalecenia nie są prawem, ale stanowią punkt odniesienia, na jakim państwa i instytucje budują później przepisy oraz wymagania dla stron i usług online.

WCAG opiera się na 4 zasadach, jakie omówimy w artykule:

• postrzegalność,
• funkcjonalność,
• zrozumiałość,
• solidność.

Poziomy zgodności

Każde kryterium ma poziom A / AA / AAA. W praktyce najczęściej przygotowuje się serwisy do poziomu AA, bo to rozsądny kompromis między „da się używać” a „da się wdrożyć bez przebudowy całego świata”. W3C definiuje wprost, że AA oznacza spełnienie wszystkich kryteriów A + AA.

W przypadku zgodności z poziomem AA strona internetowa spełnia wszystkie kryteria sukcesu poziomu A i poziomu AA lub udostępniona jest zgodna z nim wersja alternatywna.

www.w3.org

Kto musi przestrzegać WCAG? Prawo w Polsce

W Polsce są dziś dwa główne „reżimy” dostępności – jeden dla sektora publicznego, drugi dla biznesu. WCAG to zestaw kryteriów technicznych (wytycznych), a EAA to prawo, mówiące kto i kiedy ma te kryteria spełniać.

• Sektor publiczny i obowiązek WCAG
  Jeśli prowadzisz stronę lub aplikację podmiotu publicznego, temat nie jest opcjonalny. Obowiązuje ustawa z 4 kwietnia 2019 r. o dostępności cyfrowej – reguluje wymagania dla stron WWW i aplikacji mobilnych oraz m.in. zasady publikacji i aktualizacji deklaracji dostępności.

• Biznes i dyrektywa EAA
  Dla podmiotów gospodarczych oferujących określone produkty i usługi obowiązki wynikają z przepisów wdrażających European Accessibility Act (EAA), czyli dyrektywy (UE) 2019/882. Na poziomie krajowym jest to ustawa z 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze, która zaczęła obowiązywać od 28 czerwca 2025 r.

WCAG a EAA

Web Content Accessibility Guidelines to międzynarodowy standard tworzenia stron internetowych. Jego zamysłem jest to, aby osoby z dysfunkcją poznawczą mogły w pełni korzystać z danej strony internetowej.

EAA czyli skrót od European Accessibility Act to unijne prawo, mówiące, kto ma zapewnić dostępność i od kiedy. W praktyce EAA obejmuje wybrane produkty i usługi na rynku UE.

W skrócie:

• WCAG = wymagania techniczne (co ma działać i jak),
• EAA = ramy prawne (kogo dotyczy i od kiedy).

4 Zasady WCAG

Audyt dostępności nie polega na ocenie designu, tylko na sprawdzeniu, czy Twoja strona działa poprawnie w typowych scenariuszach użycia i z technologiami wspierającymi. W praktyce audyt przechodzi przez trzy warstwy:

• treść (czy sens strony da się zrozumieć bez „wspomagaczy” typu kolor, obrazek albo kontekst, którego użytkownik może nie mieć);
• frontend i semantyka (czy elementy są zrobione jako linki/przyciski, czy mają role, etykiety i poprawne relacje),
• interakcje (jak użytkownik porusza się po stronie i wykonuje akcje).

WCAG opiera się na czterech zasadach, które działają jak filtr. Jeśli coś odpada na którymkolwiek etapie, użytkownik traci dostęp do treści lub funkcji. I właśnie te zasady omawiamy poniżej:

1. Postrzegalność – czy użytkownik może odebrać treść?

Postrzegalność w WCAG sprowadza się do odpowiedzi na pytanie – czy informacja, jaką umieszczasz na stronie, dociera do użytkownika niezależnie od tego, jak odbiera treść. Mowa tutaj o osobach z dysfunkcjami. Jedni czytają wzrokiem, inni słuchają przez czytnik ekranu, część powiększa tekst, a ktoś inny korzysta z telefonu w trudnych warunkach (mały ekran, słabe światło, gorszy kontrast). Jeśli sens jest przekazywany tylko wizualnie, część użytkowników go nie dostanie.

Alternatywne opisy dla elementów nietekstowych

Alt to opis przypisany do grafiki w HTML. Jest odczytywany przez czytniki ekranu i pomaga także wtedy, gdy obraz się nie ładuje. Jest krótkim opisem przypisanym do obrazka w HTML. Ten opis:

• jest odczytywany przez czytniki ekranu (np. NVDA, VoiceOver),
• pojawia się, gdy obraz się nie załaduje,
• bywa wykorzystywany w procesach indeksowania i rozumienia treści (SEO), jeśli opis jest sensowny i zgodny z tym, co przedstawia grafika.

Mówiąc inaczej alt to wersja tekstowa tego, co obraz ma przekazać użytkownikowi.

Dlaczego to takie ważne?

Bez tagu alt, użytkownik z dysfunkcją wzroku nie jest w stanie właściwie zrozumieć Twojej strony. Zamiast treści słyszy informacje zawarte jako alt. Jeśli jest pusty, traci informację:

• w sklepie brak tagu alt przy zdjęciu produktu utrudnia zrozumienie, co jest sprzedawane,
• w ofercie baner z parametrami lub promocją może stać się „niewidzialny”,
• w nawigacji ikony bez etykiet potrafią zablokować korzystanie z menu (bo nie wiadomo, co kliknie).

W audycie WCAG alt jest jednym z najczęstszych punktów do poprawy, bo jest prosty do wdrożenia, a potrafi odblokować ogromną część treści.

Transkrypcje audio i video

Transkrypcja to pełny zapis treści audio w formie tekstu. Dotyczy podcastów, nagrań z webinarów, voice message, instrukcji głosowych, a nawet krótkich klipów z komentarzem. Jeśli na swojej stronie udostępniasz materiały multimedialne, transkrypcja jest elementem oceny użyteczności witryny.

Dlaczego to takie ważne?

Bez transkrypcji użytkownik, który nie słyszy albo nie może odtworzyć dźwięku, traci dostęp do treści:

• webinary sprzedażowe i szkoleniowe, uczestnik nie uzyska informacji o ofercie, terminach, cenach, krokach wdrożenia,
• nagrania instruktażowe, użytkownik nie pozna instrukcji konfiguracji, bo „wszystko jest powiedziane”,
• obsługa klienta, brak tekstu utrudnia szybkie znalezienie odpowiedzi (trzeba „przesłuchać całość”).

Struktura treści

Mówiąc o logicznej strukturze treści, chodzi o to, jak organizujesz treść w HTML, żeby miała jasną hierarchię i czytelny porządek. W praktyce oznacza to stosowanie nagłówków (H1-H6), akapitów, list punktowych (ul/ol), sekcji (section, nav, main) i innych znaczników, jasno komunikujących przeglądarce oraz technologiom asystującym: „to jest tytuł”, „to jest lista kroków”, „to jest nawigacja”.

Wpływ na dostępność strony

Dla użytkownika korzystającego z czytnika ekranu strona nie jest tylko ładnym layoutem. Ona jest dokumentem, po jakim może poruszać się skrótami – po nagłówkach, listach, podstronach. Jeśli struktury nie ma albo jest przypadkowa:

• użytkownik nie potrafi szybko znaleźć interesujących sekcji jak np. „Cennik”, „Dostawa”, „FAQ”,
• skanowanie treści zajmuje dużo czasu,
• rośnie ryzyko porzucenia formularza lub zakupu, bo nawigacja jest męcząca.

Z perspektywy SEO ta sama struktura pomaga robotom zrozumieć, o czym jest strona i jakie tematy są nadrzędne. Chaos w nagłówkach zwykle oznacza chaos w znaczeniu.

Zachowany kontrast

Kontrast to różnica jasności i koloru między tekstem (lub ikoną) a tłem. W kontekście WCAG chodzi o to, żeby treść była czytelna w różnych warunkach. Także na słabym ekranie, w słońcu, przy zmęczonym wzroku, w trybie wysokiego kontrastu. Kontrast dotyczy nie tylko akapitów, ale też cen, etykiet w formularzach, linków, przycisków, ikon i stanu „focus”.

Kontrast a WCAG

Jeśli zachowany jest słaby kontrast, użytkownik widzi stronę, ale nie czyta treści, nie zauważa CTA, odczuwa dyskomfort w nawigacji. Dla części osób to bariera całkowita (np. przy wadach wzroku), dla pozostałych, irytacja i większa szansa wyjścia ze strony.

W audytach WCAG kontrast jest jednym z najczęstszych błędów, bo często wynika z designu („delikatna szarość”, „subtelne linki”), a nie z intencji.

Dla zwykłego tekstu WCAG wymaga co do zasady kontrastu min. 4.5:1, a dla dużego tekstu min. 3:1.

Responsywność

Responsywność to sposób, w jaki strona automatycznie dostosowuje układ, typografię i elementy interaktywne do różnych ekranów – telefonów, tabletów, laptopów, dużych monitorów To również sposób dostosowania do sytuacji, gdy użytkownik powiększa treść (zoom, większa czcionka). W praktyce chodzi o to, żeby treść nie wymagała walki – poziomego przewijania, mikroklinkania w ikonki, szukania, gdzie jest przycisk.

Responsywność a WCAG

Z perspektywy WCAG responsywność to element postrzegalności. Jeśli na małym ekranie albo po powiększeniu 200% coś ucieka poza ekran, elementy nachodzą na siebie albo znikają, użytkownik traci dostęp do informacji i funkcji. Z perspektywy biznesu to prosta zależność. Większość ruchu jest mobilna, a każda przeszkoda w koszyku, formularzu czy menu to mniej leadów i mniej zakupów. W SEO responsywność jest bazą, Google indeksuje strony w modelu mobile-first, więc błędy na mobile realnie wpływają na widoczność.

W 2025 roku 58,3% globalnego ruchu w sieci pochodziło z urządzeń mobilnych.

2. Funkcjonalność – czy da się wykonać akcję?

Funkcjonalność w WCAG oznacza, że użytkownik może swobodnie wykonać wszystkie działania na stronie. Od przejścia nawigacji poprzez otworzenie menu, wypełnienia formularza, aż po dodanie produktu do koszyka i sfinalizowania transakcji. Niezależnie od tego, czy używa myszy, klawiatury, ekranu dotykowego, czy technologii asystujących. Strona ma być sterowalna, a interakcje przewidywalne.

Obsługa klawiaturą i focus

Przejdź stronę klawiszem Tab (i Shift+Tab). Jeśli się gubisz albo nie widzisz, gdzie jesteś, audyt WCAG zwykle też to wyłapie. WCAG wymaga widocznego fokusu (Focus Visible) i zwraca uwagę, by fokus nie był zasłaniany np. przez sticky header (to ważne zwłaszcza w WCAG 2.2).

Dla wielu osób klawiatura to podstawowy sposób nawigacji (ograniczenia ruchowe, użytkownicy czytników ekranu). Jeśli elementy nie są dostępne z klawiatury, część użytkowników jest odcięta od funkcji.

Jakie ma to znaczenie?

W praktyce audyt szybko „wyłapuje” komponenty JS (menu, selecty, filtry, karuzele), które działają myszą, ale nie działają klawiaturą.

• Każde pole musi mieć etykietę (najlepiej klasyczny <label for=””>; alternatywnie aria-label/aria-labelledby).

• Błędy w formularzu. Komunikat ma być konkretny (“Podaj e-mail w formacie…”) i powiązany z polem.

• Placeholder to nie etykieta Znika po kliknięciu, więc nie zastępuje opisu.

• Autouzupełnianie. Tam gdzie to możliwe, używaj sensownych typów pól (email, tel) i atrybutów ułatwiających wypełnianie.

Możliwość nawigacji

Możliwość nawigacji oznacza, że użytkownik potrafi sprawnie się poruszać po stronie. Jest w stanie znaleźć potrzebną sekcję i wrócić tam, gdzie był wcześniej. Niezależnie od tego, czy używa myszy, klawiatury, czy czytnika ekranu.

Nawigacja nie odnosi się do samego menu. To również nagłówki, linki w treści, „okruszki” (breadcrumbs), wyszukiwarka, paginacja, skip link, fokus i kolejność przechodzenia elementów.

Znaczenie dla WCAG

WCAG wymaga, żeby użytkownik:

• nie był zmuszony do przeklikiwania w kółko tych samych bloków,
• mógł znaleźć treść bez „polowania” po stronie,
• mógł przejść całą ścieżkę (np. wybór produktu – koszyk – płatność) bez utknięcia.

3. Zrozumiałość – czy użytkownik rozumie gdzie się znajduje?

Zrozumiałość oznacza, że użytkownik wie, co widzi, rozumie, co ma zrobić i nie jest zaskakiwany zachowaniem strony. Treść powinna być czytelna językowo, interakcje przewidywalne, a błędy wyjaśnione tak, żeby łatwo było je naprawić.

Dla WCAG zrozumiałość wspiera osoby z trudnościami poznawczymi, dysleksją, ADHD. Jeśli użytkownik nie rozumie, co się dzieje, porzuci witrynę.

Czytelny język

Treść strony internetowej powinna być przede wszystkim skonstruowana w ten sposób, aby dało się ją zrozumieć bez tłumacza w głowie. To dotyczy opisów oferty, instrukcji, komunikatów i CTA. Treść na stronie ma prowadzić użytkownika za rękę, mówić jasno, co oferujesz, co ma zrobić i co się stanie po kliknięciu. Czytelny język to nie upraszczanie na siłę, ale usuwanie rzeczy, które zmuszają do domyślania się. To wszelkie skróty branżowe, niejednoznaczne polecenia, konstrukcja zdań (wielokrotnie złożonych) i komunikatów, które brzmią jak systemowy błąd.

Zgodność z WCAG

Użytkownik musi móc przetworzyć informację bez nadmiernego obciążenia poznawczego. Zbyt złożony język, skróty bez wyjaśnień i instrukcje oparte na domysłach obniżają dostępność. WCAG zakłada, że użytkownik powinien móc zrozumieć treść i wykonać zadanie bez nadmiernego obciążenia poznawczego. Gdy język jest zbyt skomplikowany albo nieprecyzyjny, dostępność spada, bo:

• osoby korzystające z czytnika ekranu trudniej „skanują” treść, jeśli jest rozwlekła i pełna skrótów.
• osoby z trudnościami poznawczymi, dysleksją, ADHD lub osoby starsze tracą płynność czytania i łatwo się gubią,
• użytkownicy w stresie (np. podczas płatności) częściej popełniają błędy.

Ustawiony język strony i oznaczanie zmian języka

Strona powinna jasno mówić przeglądarce i technologiom asystującym, w jakim języku jest treść. To nie jest detal dla formalności. Czytniki ekranu dobierają wymowę, akcent i reguły czytania właśnie na podstawie języka strony. Jeśli język nie jest ustawiony albo jest ustawiony błędnie, polski tekst może brzmieć jak „angielska fonetyka”, a wtedy zrozumienie treści spada dramatycznie.

Dlaczego język na znaczenie dla dostępności strony?

WCAG wymaga, żeby treści były zrozumiałe także dla osób korzystających z technologii asystujących. W HTML strona powinna mieć atrybut języka, np. lang=”pl” na elemencie <html>. To jest sygnał globalny: „czytaj po polsku”. Jeśli w treści masz dłuższy fragment po angielsku (np. opis funkcji, cytat, akapit dokumentacji), oznacz go np. lang=”en” na danym fragmencie. Dzięki temu czytnik ekranu przełączy wymowę tylko na ten kawałek.

4. Solidność – czy strona działa poprawnie?

Solidność w WCAG oznacza, że strona jest zbudowana tak, aby działała poprawnie w różnych przeglądarkach, na różnych urządzeniach i z technologiami asystującymi (np. czytnikami ekranu). To jest warstwa „pod maską”- semantyka HTML, jakość kodu, poprawne atrybuty i sposób, w jaki interfejs komunikuje stany oraz zmiany. Solidność jest często tym, co decyduje o stabilnym wyniku audytu, zwłaszcza w serwisach opartych o frameworki i komponenty JS.

Semantyka HTML i role elementów

Semantyka HTML to sposób budowania strony tak, żeby kod opisywał znaczenie elementów, a nie tylko ich wygląd. Przeglądarka, czytnik ekranu i inne technologie asystujące nie „widzą” designu one czytają strukturę HTML i na tej podstawie decydują:

• co jest linkiem, co przyciskiem, co polem formularza,
• gdzie jest nawigacja, gdzie główna treść,
• jak poruszać się po stronie klawiaturą,
• jakie informacje ogłaszać użytkownikowi (np. „przycisk”, „lista 5 elementów”, „pole wymagane”).

Znaczenie dla WCAG

WCAG w obszarze solidności wymaga, żeby treść i interfejs były poprawnie interpretowalne przez różne przeglądarki i technologie asystujące. Semantyczny HTML:

• daje czytnikom ekranu prawidłowe informacje o elementach,
• zapewnia domyślną obsługę klawiaturą (np. button działa Enter/Spacja),
• wspiera właściwe relacje w formularzach (np. label ↔ input),
• umożliwia szybkie nawigowanie po sekcjach strony (np. nav, main, nagłówki).

Poprawność techniczna kodu

Kolejnym elementem solidności jest poprawność techniczna kodu, czyli to, czy HTML i atrybuty w DOM są spójne, jednoznaczne i pozbawione błędów, nie zaburzając dostępności od środka. To są rzeczy, jakich nie widać na ekranie, ale które decydują o tym, czy czytnik ekranu potrafi powiązać etykietę z polem, czy skrypt nie gubi fokusów, a komponenty nie konfliktują ze sobą.

Dlaczego to takie ważne?

WCAG zakłada, że strona ma być interpretowalna i przewidywalna dla różnych przeglądarek i technologii asystujących. Jeśli kod jest błędny:

• narzędzia wspierające nie potrafią poprawnie odczytać relacji w interfejsie,
• nie da się polegać na strukturze strony w nawigacji,
• komponenty zbudowane na JS działają tylko w jednym scenariuszu, a w innych się sypią.

Czy moja strona jest gotowa na WCAG? Zrób bezpłatny audyt

Jeśli chcesz sprawdzić stronę od razu (bez instalowania dodatków), skorzystaj z narzędzia cyber_Folks. Wykonaj bezpłatny audyt. Wklejasz adres, dostajesz wynik i listę obszarów do poprawy, a potem robisz drugie podejście i porównujesz efekty. 

Jak to działa?

Narzędzie w prosty i przejrzysty sposób sprawdzi, w jakim stopniu Twoja witryna spełnia wymagania Europejskiego Aktu Dostępności.

Wystarczy, że podasz adres strony, a otrzymasz w mgnieniu oka szczegółową analizę najważniejszych elementów. Od kontrastu tekstu, przez strukturę nagłówków, po obsługę klawiaturą czy obecność alternatywnych opisów.

Narzędzie robi szybki skan Twojej strony i sprawdza elementy wpływające na dostępność. Wynik dostajesz w formie czytelnego zestawienia. Od razu widać, co jest prawidłowe, a co wymaga poprawek. Oznaczenia kolorami upraszczają sprawę. Zielone pola pokazują obszary spełniające wymagania, a czerwone wskazują konkretne miejsca, gdzie musisz podjąć pracę, żeby zbliżyć się do zgodności z EAA.

Źródło:
www.w3.org