Audyt WCAG 2.1 / 2.2 krok po kroku

Krok 1: ustal zakres i poziom zgodności

Standardem rynkowym i punktem odniesienia dla przepisów jest poziom AA. WCAG 2.2 to rozszerzenie 2.1 — dochodzą m.in. kryteria dotyczące widoczności fokusa, celów dotykowych, pomocy dostępnej w spójnym miejscu i unikania powtarzalnego wpisywania danych.

Nie audytuj „całego serwisu” naraz. Wybierz ścieżki o największej wartości: strona główna, wyszukiwarka, lista i karta produktu lub usługi, koszyk i płatność, formularz kontaktowy, logowanie i rejestracja.

Krok 2: testy automatyczne

Skan automatyczny wykrywa realnie od około 30 do 40 procent problemów, ale robi to szybko i powtarzalnie. Znajdziesz tu brakujące etykiety, zbyt niski kontrast, brak tekstów alternatywnych, niepoprawne role ARIA, duplikaty identyfikatorów i błędy struktury nagłówków.

Traktuj wynik jako listę zadań, nie jako ocenę końcową. Strona bez błędów automatycznych wciąż może być nieobsługiwalna klawiaturą.

Krok 3: testy ręczne, które wyłapują resztę

Nawigacja klawiaturą

Odłóż mysz i przejdź całą ścieżkę zakupu tabulatorem. Sprawdź, czy kolejność fokusa odpowiada układowi strony, czy obwódka fokusa jest widoczna, czy nie ma pułapek (najczęściej w modalach i karuzelach) oraz czy istnieje link „przejdź do treści”.

Czytnik ekranu

Wystarczy krótki przebieg z NVDA na Windows lub VoiceOver na macOS. Słuchasz jednej rzeczy: czy da się zrozumieć, gdzie jesteś, co robi przycisk i co poszło nie tak po błędzie formularza.

Powiększenie i widok mobilny

Ustaw powiększenie 200 procent i szerokość 320 pikseli. Treść nie powinna się przycinać ani wymuszać przewijania w poziomie, a cele dotykowe muszą być wystarczająco duże i rozsunięte.

Krok 4: napraw najczęstsze błędy

• Za niski kontrast — najczęściej szary tekst pomocniczy i jasne napisy na przyciskach; podnieś kontrast do 4,5:1.
• Pola formularza bez etykiet — sam placeholder nie wystarcza; dodaj widoczną etykietę powiązaną z polem.
• Obrazy bez opisu — zdjęcia niosące treść dostają tekst alternatywny, dekoracyjne pusty atrybut alt.
• Przyciski-ikony bez nazwy — dodaj dostępną nazwę, na przykład „Zamknij” albo „Dodaj do koszyka”.
• Linki „kliknij tutaj” — nazwa linku ma mówić, dokąd prowadzi.
• Div udający przycisk — użyj elementu button albo dodaj rolę, obsługę klawiatury i fokus.
• Ukryty fokus — nigdy nie usuwaj obrysu bez podania własnego, dobrze widocznego stylu.
• Komunikaty błędów tylko kolorem — dopisz treść wyjaśniającą, jak poprawić dane.
• Brak języka strony — ustaw poprawny atrybut lang w elemencie html.
• Automatyczne karuzele — daj możliwość zatrzymania animacji.

Krok 5: priorytety i raport

Sortuj poprawki po wpływie na użytkownika i na przychód, nie po liczbie wystąpień w kodzie. Jeden zepsuty przycisk płatności waży więcej niż sto ostrzeżeń na stopce.

1. Blokery: elementy uniemożliwiające dokończenie zadania (płatność, logowanie, kontakt).
2. Poważne bariery: nawigacja, wyszukiwarka, formularze, kontrast treści głównej.
3. Poprawki jakościowe: struktura nagłówków, opisy pomocnicze, drobne odstępstwa.

Raport powinien zawierać opis błędu, jego lokalizację, wpływ na użytkownika, sugerowaną poprawkę i sposób weryfikacji. Bez sekcji „jak sprawdzić, że naprawione” audyt zwykle nie kończy się wdrożeniem.

Krok 6: utrzymanie zgodności

Dostępność psuje się przy każdym wdrożeniu. Wpisz skan do procesu wydawniczego, powtarzaj pełny audyt kwartalnie i porównuj wyniki w czasie — to najtańszy sposób, by nie wracać do punktu wyjścia.