Lista kontrolna
WCAG 2.2 AA jako lista do odhaczania
Wszystkie 55 kryteria sukcesu poziomu A i AA — zbiór, na który wskazują EN 301 549 i Europejski akt o dostępności. Z podziałem według jedynego rozróżnienia, które zmienia twoje popołudnie: co udowodni skaner, a na co musi spojrzeć człowiek.
23 da się zautomatyzować · 32 wymaga człowieka
Jak z tego korzystać
- 1. Najpierw uruchom skanowanie. W minutę zamyka większość z 23 kryteriów, które da się zautomatyzować, a dla jednej strony jest bezpłatne.
- 2. Przejdź listę ręczną z klawiaturą i czytnikiem ekranu. Licz godzinę na szablon, nie na stronę.
- 3. Zapisz, czego nie udało się naprawić i dlaczego. Ta lista to twoja deklaracja dostępności i to ją organ nadzoru czyta najpierw.
To udowodni skaner
Każde z nich jest sprawdzane automatycznie przy każdym skanowaniu. Czysty wynik tutaj to prawdziwy dowód i najtańszy, jaki dostaniesz.
Wszystko, co nie jest tekstem — obraz, ikona, wykres — potrzebuje wersji tekstowej, która mówi to samo.
image-alt · input-image-alt · aria-meter-name · aria-progressbar-name
Same nagrania dźwiękowe i same nagrania obrazu potrzebują alternatywy niosącej tę samą informację.
audio-caption
Nagranie wideo z dźwiękiem potrzebuje napisów.
video-caption
Struktura, którą pokazujesz układem — nagłówki, listy, tabele, grupy — musi istnieć także w kodzie.
aria-hidden-body · aria-required-children · aria-required-parent · td-has-header
Nie blokuj strony na jednej orientacji ekranu.
css-orientation-lock
Pola pytające o dane samego użytkownika powinny w kodzie mówić, o którą daną chodzi.
autocomplete-valid
Sam kolor nie może nieść znaczenia.
link-in-text-block
Dźwięk, który sam gra dłużej niż trzy sekundy, potrzebuje sposobu na zatrzymanie.
no-autoplay-audio
Tekst potrzebuje kontrastu co najmniej 4,5:1 wobec tła — 3:1, jeśli jest duży.
color-contrast
Tekst musi przetrwać powiększenie do 200% bez utraty treści i funkcji.
meta-viewport
Strona musi nadal działać, gdy czytający zwiększy interlinię i odstępy między znakami.
avoid-inline-spacing
Wszystko, co da się zrobić myszą, musi dać się zrobić klawiaturą.
frame-focusable-content · scrollable-region-focusable · server-side-image-map
Jeśli coś ma licznik czasu, trzeba dać się go wyłączyć, zmienić albo przedłużyć.
meta-refresh
Wszystko, co samo się rusza, miga, przewija albo odświeża dłużej niż pięć sekund, potrzebuje pauzy.
blink · marquee
Daj ludziom sposób na ominięcie bloków, które powtarzają się na każdej stronie.
bypass
Każda strona potrzebuje tytułu, który mówi, czym ta strona jest.
document-title
Tekst linku musi mówić, dokąd prowadzi.
area-alt · link-name
Dostępna nazwa kontrolki musi zawierać słowa, które są na niej widoczne.
label-content-name-mismatch
Cele dotknięcia muszą mieć co najmniej 24 na 24 piksele CSS albo być wystarczająco odsunięte.
target-size
Strona musi deklarować, w jakim jest języku.
html-has-lang · html-lang-valid · html-xml-lang-mismatch
Oznaczaj fragmenty w języku innym niż język strony.
valid-lang
Każde pole potrzebuje etykiety, a tam, gdzie format nie jest oczywisty — instrukcji.
form-field-multiple-labels
Każda kontrolka musi ujawniać, czym jest, jak się nazywa i w jakim jest stanie.
area-alt · aria-allowed-attr · aria-hidden-body · aria-required-attr
To wymaga człowieka
Żadne narzędzie tego nie rozstrzygnie. Chodzi o znaczenie i zachowanie — czy tekst alternatywny mówi to, co trzeba, czy kolejność fokusu pasuje do strony, czy własny komponent zachowuje się jak wzorzec, który naśladuje. Kto obiecuje pełne pokrycie, tych kryteriów nie liczy.
Nagranie wideo potrzebuje albo audiodeskrypcji tego, co pokazuje, albo alternatywy tekstowej.
To, czy dźwięk przekazuje wszystko, co pokazuje obraz, jest decyzją człowieka.
Treść dźwiękowa nadawana na żywo potrzebuje napisów na żywo.
Sprawdź ręcznie: skorzystaj z usługi napisów na żywo — a przy wszystkim, gdzie stawka jest wysoka, z człowieka.
Nagranie wideo potrzebuje ścieżki audiodeskrypcji.
Sprawdź ręcznie: dodaj ścieżkę audiodeskrypcji albo nagraj narrację od nowa tak, by opisywała, co się dzieje.
Kolejność, w jakiej treść jest odczytywana, musi mieć sens.
Skaner nie wie, jaką kolejność miałeś na myśli. Przeczytaj stronę z wyłączonym CSS-em.
Nie tłumacz niczego wyłącznie kształtem, rozmiarem, położeniem albo dźwiękiem.
To w całości zadanie do przeczytania. Żadne narzędzie tego nie wykryje.
Używaj prawdziwego tekstu, nie obrazków z tekstem.
Skaner nie widzi tekstu wewnątrz obrazu. Tu potrzeba oczu.
Treść musi przelać się do okna o szerokości 320 px bez poziomego paska przewijania.
Sprawdź ręcznie: zbuduj układ tak, żeby się przelewał. jeśli już jesteś responsywny, masz to w większości za sobą.
Elementy interfejsu i grafiki niosące znaczenie potrzebują kontrastu 3:1, nie tylko tekst.
Sprawdź ręcznie: doprowadź obramowania, obwódki fokusu i ikony do co najmniej 3:1 wobec tego, co jest za nimi.
Treść, która pojawia się przy najechaniu albo fokusie, musi dać się zamknąć, najechać i utrzymać.
Sprawdź ręcznie: trzymaj je otwarte, dopóki wskaźnik jest nad elementem wyzwalającym albo nad samym dymkiem.
Fokus klawiatury nigdy nie może utknąć tam, skąd nie da się wyjść.
Pułapki znajduje się tabulatorem po stronie, nie skanowaniem.
Skrót z jednej litery musi dać się wyłączyć albo przypisać na nowo.
Sprawdź ręcznie: wymagaj klawisza modyfikującego (ctrl, alt, cmd), albo nasłuchuj tylko wtedy, gdy właściwa kontrolka ma fokus, albo pozwól wyłączyć skróty.
Nic nie może błyskać częściej niż trzy razy na sekundę.
Sprawdź ręcznie: zostań poniżej trzech błysków na sekundę albo poniżej progów błysku ogólnego i czerwonego.
Fokus musi przesuwać się w kolejności, która zachowuje sens.
Przejdź stronę tabulatorem i patrz, gdzie wędruje obwódka fokusu. To cały test.
Zaoferuj więcej niż jeden sposób odnalezienia strony.
Sprawdź ręcznie: dodaj wyszukiwarkę, mapę witryny albo ścieżkę nawigacyjną. dowolne dwie drogi wystarczą.
Nagłówki i etykiety muszą opisywać to, co po nich następuje.
Narzędzie widzi, że nagłówek istnieje, a nie czy cokolwiek opisuje.
Musi być widać, gdzie znajduje się fokus klawiatury.
Sprawdź ręcznie: nigdy nie usuwaj obwódki bez zastąpienia jej. ostyluj `:focus-visible`, zamiast kasować `:focus`.
Przyklejony nagłówek albo stopka nie mogą całkowicie zasłaniać elementu z fokusem.
Sprawdź ręcznie: dodaj `scroll-margin-top` równy wysokości nagłówka albo zmniejszaj przyklejony element przy przewijaniu.
Wszystko, co robi się gestem wielopalcowym albo po ścieżce, musi dać się zrobić jednym dotknięciem.
Sprawdź ręcznie: dodaj obok gestu zwykłe przyciski: przybliż / oddal, poprzedni / następny.
Akcja nie może odpalać przy naciśnięciu — trzeba dać szansę na wycofanie się.
Sprawdź ręcznie: odpalaj na `click`, czyli przy puszczeniu — albo daj cofnięcie.
Jeśli potrząśnięcie albo przechylenie urządzenia coś robi, musi istnieć kontrolka, która robi to samo.
Sprawdź ręcznie: dodaj równoważną kontrolkę i pozwól wyłączyć sterowanie ruchem.
Wszystko, co działa przez przeciąganie, musi działać także bez przeciągania.
Sprawdź ręcznie: dodaj przyciski, menu albo pole tekstowe, które robią to samo.
Nadanie czemuś fokusu nie może samo zmieniać strony.
Sprawdź ręcznie: działaj przy aktywacji — kliknięcie, enter albo wyraźny przycisk — nigdy przy samym fokusie.
Zmiana wartości nie może bez ostrzeżenia robić czegoś nieoczekiwanego.
Sprawdź ręcznie: dodaj przycisk wysyłania albo uprzedź, co kontrolka zrobi.
Nawigacja powtarzająca się na kolejnych stronach musi zachować tę samą kolejność.
Sprawdź ręcznie: zachowaj stabilną kolejność względną. dodanie pozycji jest w porządku; tasowanie nie.
To samo musi wszędzie nazywać się tak samo.
Sprawdź ręcznie: wybierz jedną nazwę na pojęcie i używaj jej w każdej etykiecie, przycisku, powiadomieniu i nagłówku.
Jeśli pomoc jest oferowana na kilku stronach, na każdej musi być w tym samym miejscu.
Sprawdź ręcznie: trzymaj mechanizmy pomocy w tej samej względnej kolejności na każdej stronie, która je ma.
Gdy dane zostaną odrzucone, napisz tekstem, które pole i co jest nie tak.
Sprawdź ręcznie: nazwij pole i problem: „kod pocztowy: format 00-000, na przykład 00-950”.
Kiedy da się odgadnąć, o co chodziło, podpowiedz poprawkę.
Sprawdź ręcznie: powiedz, co byłoby poprawne: „format dd.mm.rrrr, na przykład 24.06.2026”.
Wysyłki wiążące prawnie lub finansowo oraz zmieniające dane muszą być odwracalne, sprawdzane albo potwierdzane.
Sprawdź ręcznie: dodaj krok weryfikacji, okno na cofnięcie albo wyraźne potwierdzenie. wystarczy jedno z trzech.
Nie każ ludziom wpisywać tej samej informacji dwa razy w jednym procesie.
Sprawdź ręcznie: wypełnij z góry, zaproponuj pole wyboru „skopiuj” albo pozwól wybrać wcześniejszą wartość.
Nie każ ludziom rozwiązywać zagadki ani niczego pamiętać, żeby się zalogowali.
Sprawdź ręcznie: pozwól wklejać i pozwól menedżerom haseł wypełnić pole.
Komunikaty, które pojawiają się bez przeniesienia fokusu, muszą zostać ogłoszone.
Sprawdź ręcznie: użyj `role="status"` (grzecznie) albo `role="alert"` (stanowczo) dla rzeczy pilnych.
Tekst kryteriów pochodzi z Web Content Accessibility Guidelines 2.2 W3C. Poziom AAA jest pominięty: nie tego wymaga Europejski akt o dostępności, a W3C nie zaleca go jako celu dla całej witryny. Kryteriów AAA jest 31 i mają własne strony w pełnych materiałach.