Jak zrobiliśmy WCAG 2.2 AA na naszej stronie – case study

⏱ Szacowany czas czytania: 6 min (1 100 słów)

TL;DR: Wdrożyliśmy pełną zgodność WCAG 2.2 AA na dlasamorzadu.pl w 1 dzień intensywnej pracy. Audyt 54 kryteriów – wszystkie PASS lub N/A. Ten artykuł to step-by-step jak to zrobiliśmy: od początkowego audytu, przez naprawy, aż po dokumentację. Sprawdź naszą tabelę audytu.

Dlaczego WCAG 2.2 AA jest obowiązkowe dla każdej strony JST?

Ustawa z 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych podmiotów publicznych nakłada obowiązek zgodności z WCAG 2.1 AA na wszystkie jednostki samorządu terytorialnego. WCAG 2.2 (październik 2023) wprowadziło 9 nowych kryteriów – choć formalnie jeszcze nie obowiązują w Polsce, dobrą praktyką jest wdrażanie ich już teraz.

Kary za niezgodność: do 5 000 złotych jednorazowo + utrata dostępu do dofinansowań UE.

Krok 1: Audyt początkowy – co już mamy, czego brakuje

Zaczynamy od pełnego audytu 54 kryteriów (WCAG 2.2 AA = 50 kryteriów + 9 z 2.2 – 5 kryteriów AAA i N/A dla naszego typu serwisu).

Narzędzia bezpłatne, które wystarczą:

axe DevTools – rozszerzenie Chrome (Deque Systems) – automatyczne wykrywa ~30% błędów
WAVE – wave.webaim.org – wizualne wskazanie problemów na stronie
Lighthouse – wbudowane w Chrome DevTools (F12 → Lighthouse) – daje score Accessibility
NVDA – bezpłatny screen reader (Windows) – test manualny nawigacji głosowej

Wynik audytu początkowego pokazał, że już mieliśmy ~70% kryteriów spełnionych dzięki dobrym praktykom: semantic HTML, fluid typography (clamp), focus styles. Pozostałe 30% wymagało dodania ARIA, autocomplete, focus trap w mobile menu.

Krok 2: Naprawa – 15 najważniejszych kryteriów

1.1.1 Alt teksty – każdy obrazek opisany

Audytujemy wszystkie elementy <img>. Każdy informacyjny obrazek ma alt="opis treści". Dekoracyjne mają alt="". Brak alt = automatyczny FAIL u WAVE.

1.4.3 Kontrast 4.5:1 – test każdej pary kolorów

Używamy WebAIM Contrast Checker: webaim.org/resources/contrastchecker/. Nasz primary #0B1D33 na białym daje kontrast 14.83:1 – znacznie powyżej minimum 4.5:1.

2.1.1 + 2.4.7 Klawiatura + widoczny fokus

Najważniejsza zasada: jeśli możesz to kliknąć, musisz móc to wybrać Tab + Enter. Zero onclick na <div>. Każdy :focus-visible dostaje wyraźny outline (np. 2px solid #0EA5E9 + offset 2px).

3.3.2 Etykiety pól formularza

Każde pole ma <label for="id"> wskazujący na <input id="id">. Placeholder NIE zastępuje labela – placeholder znika po wpisaniu, co dezorientuje użytkownika screen readera.

4.1.2 ARIA – role, aria-label, aria-describedby

Hamburger menu: aria-label="Menu" + aria-expanded + aria-controls. Form błędy: aria-invalid="true" + aria-describedby="msg-id". Komunikaty statusu: aria-live="polite".

Krok 3: WCAG 2.2 nowości – 4 dodatkowe kryteria AA

2.4.11 Focus Not Obscured (Minimum)

Sticky header może zasłonić focus przy Tab navigation. Rozwiązanie: scroll-padding-top: 80px na <html>. Browser automatycznie odsuwa scroll tak, żeby focus był poniżej sticky.

2.5.8 Target Size (Minimum) – 24x24px

Wszystkie clickable mają min. 24x24px (idealnie 44x44px – rekomendacja Apple/Google). Małe ikony (close button) potrzebują padding żeby target area była 44×44 nawet jeśli wizualnie 16×16.

3.3.7 Redundant Entry – autocomplete

Każde pole formularza ma odpowiedni atrybut autocomplete: name, email, tel, organization. Browser automatycznie wypełnia z zapisanych danych – użytkownik nie wpisuje 5 razy tej samej informacji.

2.5.7 Dragging Movements – alternatywa drag

Jeśli masz drag-and-drop, zapewnij alternatywę klikową (np. przycisk „Przesuń w górę”). My nie mamy drag – automatyczny PASS.

Krok 4: Dokumentacja – publiczny audyt + deklaracja

Kluczowe: dokumentacja musi być publiczna. Każda strona JST ma obowiązek opublikować deklarację dostępności (zgodnie z wzorem MC) zawierającą:

Status zgodności (pełna / częściowa / brak)
Datę publikacji + datę ostatniej aktualizacji
Listę cech dostępności
Procedurę zgłaszania problemów (7 dni response time)
Skargi do RPO (al. Solidarności 77, 00-090 Warszawa)
Kontakt: email + formularz
Dostępność architektoniczna (jeśli budynek)

Plus my opublikowaliśmy szczegółową tabelę 54 kryteriów z dowodami implementacji – to jest signal E-E-A-T dla Google.

Krok 5: Ciągły monitoring

Częstotliwość	Co
Codziennie	Lighthouse CI w pipeline (Vercel/Netlify/GitHub Actions)
Tygodniowo	axe DevTools manualnie – home + 1 random podstrona
Miesięcznie	WAVE + NVDA test 5 stron
Rocznie	Pełen audyt 54 kryteriów + update deklaracji

Co zyskuje JST z prawdziwej dostępności?

Brak kar – 5000 zł × N kryteriów = realne ryzyko finansowe
SEO boost – Google premiuje accessible sites (Core Web Vitals + UX signals)
AI bots cytują – schema + semantic HTML = AI rozumie strukturę
15% obywateli z niepełnosprawnościami – to twoja rodzina, sąsiedzi, podatnicy
Etyka publiczna – JST jest dla wszystkich obywateli

Twój plan działania

Jeśli jesteś sekretarzem gminy, kierownikiem IT lub koordynatorem dostępności, plan na najbliższy miesiąc:

Tydzień 1: Audyt automatyczny obecnej strony (axe + WAVE + Lighthouse) – lista znalezisk
Tydzień 2: Naprawa 15 najczęstszych problemów (lista z naszego artykułu)
Tydzień 3: Manualne testy klawiaturą + screen reader (NVDA)
Tydzień 4: Update deklaracji dostępności + publikacja

Potrzebujesz pomocy? Bezpłatna konsultacja – odpowiedź w 24h

FAQ – najczęstsze pytania o WCAG na stronie JST

Czy audyt można robić samodzielnie?

Tak. Ustawa pozwala na samoocenę podmiotu publicznego. Wystarczą bezpłatne narzędzia (axe, WAVE, Lighthouse, NVDA). Tylko duże jednostki (miasta na prawach powiatu) zalecają audyt zewnętrzny dla obiektywizmu.

Co jeśli stara strona ma 100+ niezgodności?

Opublikuj deklarację z statusem „częściowo zgodna” + lista wyłączeń + plan naprawy z datami. To zgodne z prawem – lepsze niż brak deklaracji (automatyczna kara).

Czy WCAG 2.2 jest już obowiązkowe?

WCAG 2.2 (październik 2023) – jeszcze nie zaktualizowano polskiej ustawy z 2019 r. (która referuje WCAG 2.1). Praktyka rynkowa: nowe wdrożenia od 2024 powinny już spełniać 2.2.

Ile kosztuje audyt zewnętrzny?

Zależy od skali: mała gmina (~30 podstron) ~3-5 tys. zł netto. Miasto na prawach powiatu (~200+ podstron) ~10-15 tys. zł netto. Audyt + raport + plan naprawczy.

Stan prawny na 2026-04-29. Artykuł oparty o WCAG 2.2 (W3C, październik 2023) i ustawę z 4 kwietnia 2019 r. (Dz.U. 2019 poz. 848).