Dostępność strony (WCAG): co sprawdzić bez specjalisty

Co to jest WCAG

WCAG (Web Content Accessibility Guidelines) to wytyczne dostępności treści internetowych. Publikuje je W3C, organizacja, która tworzy standardy sieci. Aktualna wersja to WCAG 2.2. W3C pisze, że treść zgodna z wersją 2.2 jest zgodna także z 2.1 i 2.0.

Wytyczne dzielą się na kryteria sukcesu, czyli konkretne wymagania z numerami, na przykład 1.4.3 o kontraście. Każde kryterium ma poziom: A (podstawowy), AA (średni) albo AAA (najwyższy). Przy nowej stronie celuj w poziom AA, bo obejmuje on wymagania z poziomu A.

Kogo w Polsce obowiązują przepisy o dostępności

Podmioty publiczne, takie jak urzędy i szkoły, mają obowiązki z ustawy z 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych (Dz.U. 2019 poz. 848).

Firmy obejmuje ustawa z 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze (Dz.U. 2024 poz. 731), stosowana od 28 czerwca 2025 r. Gov.pl nazywa ją Polskim Aktem o Dostępności. Wśród usług dla konsumentów wymienia handel elektroniczny (art. 3 ust. 2 pkt 6), czyli usługi świadczone przez strony i aplikacje, przez które konsument zawiera umowę.

Ustawy nie stosuje się do usług mikroprzedsiębiorców (art. 4 pkt 1). Ustawa nie definiuje tego pojęcia, ogólna definicja jest w Prawie przedsiębiorców (art. 7 ust. 1 pkt 1). Mikroprzedsiębiorca to firma, która w co najmniej jednym z dwóch ostatnich lat obrotowych zatrudniała średnio mniej niż 10 pracowników. Do tego jej obrót netto albo suma aktywów nie przekroczyły równowartości 2 mln euro.

Jako obowiązującą normę dla handlu elektronicznego gov.pl wskazuje EN 301 549 w wersji V3.2.1 z 2021 r. Jeśli nie wiesz, czy Twoja strona jest usługą handlu elektronicznego, zajrzyj do wyjaśnień na gov.pl i stronach PFRON. Dostępna strona i tak przydaje się każdemu klientowi.

Osiem rzeczy, które sprawdzisz sam

Te testy nie wymagają wiedzy technicznej. Każdy wiąże się z konkretnym kryterium WCAG.

• Na telefonie sprawdź też wielkość przycisków. WCAG 2.2 wymaga celu kliknięcia co najmniej 24 × 24 piksele CSS albo odpowiedniego odstępu od innych (2.5.8, AA).

Darmowe narzędzia i ich granice

WAVE od WebAIM (https://wave.webaim.org) pokazuje błędy prosto na stronie: brak opisów, za słaby kontrast, pola bez etykiet. Lighthouse, wbudowany w Chrome i w PageSpeed Insights, ma osobną kategorię Accessibility z listą problemów. W3C publikuje też Easy Checks, czyli proste testy krok po kroku.

Narzędzia automatyczne znajdują tylko część problemów. W3C pisze wprost, że strona może przejść jego proste testy, a nadal mieć poważne bariery. Nie sprawdzą, czy opis obrazka ma sens ani czy formularz da się wypełnić bez myszy. To wymaga człowieka.

Jak sprawdzić to samemu

1. Przejdź całą stronę główną i formularz kontaktowy samym klawiszem Tab, a Enterem uruchamiaj linki i przyciski. Zapisz miejsca, w których się zgubiłeś.
2. Powiększ stronę do 200% (Ctrl i +, na Macu Cmd i +) i przewiń ją. Sprawdź, czy menu i formularz nadal działają.
3. Otwórz stronę w WAVE (https://wave.webaim.org) i przejrzyj czerwone błędy i uwagi o kontraście.
4. W Chrome naciśnij F12, otwórz zakładkę Lighthouse, zaznacz Accessibility i uruchom test.
5. Jeśli możesz, posłuchaj strony czytnikiem ekranu: na Macu VoiceOver (Cmd+F5), na Windows bezpłatny NVDA.

Co sprawdza bezpłatny skan

• Na stronie głównej szuka linków i przycisków bez nazwy dla czytnika ekranu, ramek <iframe> bez tytułu, pól formularza bez etykiety i automatycznie odtwarzanego dźwięku. Ramka ma nazwę, gdy ma atrybut title, aria-label albo aria-labelledby. Ramki ukryte, wyłączone z tabulacji (tabindex="-1") i oznaczone jako dekoracja skan pomija.
• Sprawdza, czy jest region <main> i link „Przejdź do treści”, i czy nagłówki nie przeskakują poziomów, np. z H2 na H4. Uwagę o przeskokach dostajesz, gdy są co najmniej dwa.
• Sprawdza, czy strona nie blokuje powiększania na telefonie (user-scalable=no albo maximum-scale=1). Ta uwaga jest w sekcji Dostępność. Sprawdza też atrybut lang w znaczniku <html>, a jego brak pokazuje w sekcji SEO.
• Liczy obrazki bez atrybutu alt na stronie głównej i na sprawdzonych podstronach.
• Kontrastu kolorów i kolejności poruszania się klawiaturą nie da się rzetelnie ocenić z samego kodu, więc sprawdza je człowiek w przeglądarce w pełnym audycie.

Pytania i odpowiedzi