Interaktywna lista kontrolna WCAG 2.2 ze wszystkimi 55 kryteriami sukcesu poziomu A i AA, każde z prostym wyjaśnieniem, testem i poprawką, plus narzędzie do sprawdzania kontrastu kolorów WCAG.
Lista kontrolna WCAG dla większości stron obejmuje 55 kryteriów sukcesu poziomu A i AA w WCAG 2.2 (kryterium 4.1.1 Parsowanie zostało usunięte). Najważniejsze testy: kontrast tekstu co najmniej 4.5:1 (3:1 dla dużego tekstu), pełna obsługa z klawiatury, widoczny fokus, etykiety pól, napisy oraz cele o rozmiarze co najmniej 24 na 24 piksele CSS.
WCAG 2.2 w skrócie
To robocza wersja audytu dostępności: każde kryterium sukcesu poziomu A i AA w WCAG 2.2, pogrupowane według zasad, każde z wyjaśnieniem prostymi słowami, sposobem przetestowania w kilka minut i poprawką w kodzie tam, gdzie kod pomaga. Odhaczaj punkty na bieżąco, filtruj według poziomu lub zasady i wydrukuj wynik.
Zgodność z poziomem AA oznacza spełnienie 55 kryteriów: 31 na poziomie A i 24 na poziomie AA. Po doliczeniu 31 kryteriów poziomu AAA WCAG 2.2 ma łącznie 86 kryteriów, odkąd 4.1.1 Parsowanie zostało uznane za przestarzałe i usunięte.
Kryterium 1.4.3 wymaga kontrastu 4.5:1 między zwykłym tekstem a tłem i 3:1 dla dużego tekstu, czyli co najmniej 18 punktów (24 piksele CSS) lub 14 punktów pogrubionych (około 18.66 piksela CSS). Kryterium 1.4.11 wymaga 3:1 dla ikon, obramowań pól i wskaźników fokusu.
Żadna lista kontrolna nie może tego obiecać. Przepisy różnią się w zależności od kraju i sektora, a niektóre opierają się na WCAG 2.1 lub własnych standardach. Użyj tej strony, aby znaleźć i usunąć bariery, a w kwestiach zgodności zasięgnij porady prawnej.
WCAG 2.2 dodało dziewięć kryteriów, z czego sześć na poziomie A lub AA: Fokus niezasłonięty (minimum), Przeciąganie, Rozmiar celu (minimum), Spójna pomoc, Zbędne wprowadzanie danych i Dostępne uwierzytelnianie (minimum). Usunięto też 4.1.1 Parsowanie.
Każdy kolor jest przeliczany na luminancję względną przez linearyzację kanałów czerwonego, zielonego i niebieskiego oraz nadanie im wag 0.2126, 0.7152 i 0.0722. Współczynnik to luminancja jaśniejszego koloru plus 0.05 podzielona przez luminancję ciemniejszego plus 0.05, co daje wartość od 1:1 do 21:1.
Ukryty, dopóki nie otrzyma fokusu, potem wyświetlany na górze. Naciśnij Tab w podglądzie wyniku, aby go zobaczyć.
focus-visible pokazuje obrys użytkownikom klawiatury. Kolor obrysu powinien osiągać kontrast 3:1 względem tła.
scroll-padding rezerwuje miejsce, aby elementy z fokusem przewinięte do widoku nie chowały się pod paskiem.
Powiększ małe przyciski z ikonami paddingiem do 24 na 24 piksele CSS. 44 piksele to surowszy cel AAA, przyjaźniejszy dla telefonów.
Wklej to w narzędziach deweloperskich. To wartości wskazane w kryterium; treść musi pozostać czytelna po ich zastosowaniu.
Komunikat jest tekstem, znajduje się obok pola, mówi, jak poprawić błąd, i jest powiązany przez aria-describedby.
Region z role=status jest uprzejmie ogłaszany, gdy zmienia się jego tekst, bez przenoszenia fokusu.
Zatrzymanie automatycznie odtwarzanego ruchu dla osób, które proszą o mniej animacji, pomaga też spełnić kryterium Pauza, zatrzymanie, ukrycie.
Poprawne wartości autocomplete i brak blokady wklejania pozwalają logować się bez przypominania sobie hasła.
Obrazy, ikony i kontrolki mają tekst alternatywny; dekoracje są ukryte.
Sprawdź każdy alt obrazu, nazwę przycisku z ikoną i podsumowanie wykresu.
Nagranie tylko audio ma transkrypcję; nieme wideo ma transkrypcję lub ścieżkę audio.
Znajdź każdy podcast lub niemy klip i poszukaj jego alternatywy.
Nagrane wideo z dźwiękiem ma zsynchronizowane napisy.
Odtwórz filmy z włączonymi napisami; sprawdź dokładność, a nie tylko obecność.
Informacje wyłącznie wizualne w wideo są opisane lub dostępne jako tekst.
Obejrzyj z zamkniętymi oczami; czy umyka coś ważnego?
Transmisje na żywo z dźwiękiem mają napisy.
Sprawdź, czy odtwarzacz lub usługa na żywo obsługuje napisy w czasie rzeczywistym.
Nagrane wideo ma audiodeskrypcję tam, gdzie obraz niesie znaczenie.
Poszukaj wersji z audiodeskrypcją lub narracji obejmującej tekst na ekranie.
Nagłówki, listy, tabele i etykiety są oznaczone w kodzie, a nie tylko ostylowane.
Zbadaj nagłówki, listy, nagłówki tabel i powiązania etykiet.
Kolejność czytania w kodzie odpowiada znaczeniu.
Wyłącz CSS lub użyj trybu przeglądania czytnika i czytaj od góry do dołu.
Instrukcje nie opierają się wyłącznie na kształcie, kolorze, rozmiarze, położeniu ani dźwięku.
Przeszukaj teksty pod kątem sformułowań typu okrągły przycisk lub po prawej.
Treść działa w orientacji pionowej i poziomej, chyba że jedna z nich jest niezbędna.
Obróć telefon lub zasymuluj obie orientacje.
Pola danych osobowych deklarują swój cel, aby przeglądarki mogły je autouzupełniać.
Sprawdź, czy pola imienia, e-maila, telefonu i adresu mają wartości autocomplete.
Kolor nigdy nie jest jedynym sposobem pokazania znaczenia, stanu lub linku.
Obejrzyj w skali szarości; czy błędy i linki nadal da się odróżnić?
Dźwięk odtwarzany samoczynnie dłużej niż 3 sekundy można wstrzymać lub wyciszyć.
Wczytaj każdą stronę z włączonym dźwiękiem.
Kontrast tekstu wynosi co najmniej 4.5:1 lub 3:1 dla dużego tekstu.
Zmierz pary tekstu i tła narzędziem do sprawdzania kontrastu poniżej.
Tekst można powiększyć do 200 procent bez utraty treści lub funkcji.
Powiększ do 200 procent; nic nie jest ucięte ani nie nachodzi na siebie.
Używany jest prawdziwy tekst zamiast obrazów tekstu, poza logo.
Poszukaj banerów i przycisków, które są obrazami.
Treść mieści się w szerokości 320 pikseli CSS bez przewijania w dwóch kierunkach.
Powiększ do 400 procent przy szerokości 1280 pikseli.
Ikony, obramowania pól, obrysy fokusu i elementy wykresów osiągają 3:1.
Zmierz obramowania i ikony względem sąsiednich kolorów.
Nic się nie psuje po zwiększeniu odstępów między wierszami, akapitami, literami i słowami.
Zastosuj bookmarklet do odstępów w tekście lub nadpisanie CSS poniżej.
Podpowiedzi można zamknąć, najechać na nie i pozostają widoczne, dopóki się od nich nie odejdzie.
Najedź na podpowiedź, przesuń kursor na nią, naciśnij Escape.
Wszystko działa przy użyciu samej klawiatury.
Odłącz mysz i wykonaj każde zadanie.
Fokus zawsze może opuścić każdy komponent.
Wejdź Tabem do widżetów, osadzonych elementów i okien dialogowych i wyjdź z nich Tabem.
Skróty jednoklawiszowe można wyłączyć, przemapować lub działają tylko przy fokusie.
Wypisz skróty używające litery lub cyfry bez klawisza modyfikującego.
Limity czasu można wyłączyć, dostosować lub wydłużyć.
Znajdź limity czasu sesji i kroki z odliczaniem.
Ruchomą, migającą lub automatycznie aktualizowaną treść można wstrzymać.
Poszukaj karuzel, pasków z wiadomościami i animowanych teł.
Nic nie miga częściej niż trzy razy na sekundę.
Przejrzyj wideo i animacje pod kątem efektu stroboskopowego.
Link pomijający lub punkty orientacyjne pozwalają przeskoczyć powtarzające się bloki.
Naciśnij Tab raz po wczytaniu i poszukaj linku Przejdź do treści.
Każda strona ma tytuł, który ją opisuje.
Przeczytaj tytuły kart przeglądarki w całej witrynie.
Fokus przesuwa się w kolejności, która zachowuje znaczenie i funkcjonalność.
Przejdź Tabem i obserwuj przeskoki.
Tekst linku wraz z kontekstem mówi, dokąd prowadzi.
Wypisz wszystkie linki; oznacz gołe Kliknij tutaj i Czytaj więcej.
Do strony prowadzi więcej niż jedna droga, na przykład menu i wyszukiwarka lub mapa strony.
Sprawdź, czy jest wyszukiwarka, mapa strony lub pełne menu.
Nagłówki i etykiety opisują temat lub cel.
Przeczytaj sam konspekt nagłówków; czy ma sens?
Wskaźnik fokusu klawiatury jest widoczny.
Przejdź Tabem; zawsze powinno być widać, gdzie jesteś.
Element z fokusem nie jest całkowicie zasłonięty przez przyklejone paski lub banery.
Przechodź Tabem przy widocznym banerze cookies i przyklejonym nagłówku.
Gesty ścieżkowe lub wielopunktowe mają alternatywę z jednym wskaźnikiem.
Sprawdź, czy interakcje szczypania, przesuwania i rysowania mają przyciski.
Akcje uruchamiają się po zwolnieniu albo można je przerwać lub cofnąć.
Naciśnij, odsuń, zwolnij; nic nie powinno się uruchomić.
Dostępna nazwa zawiera tekst widocznej etykiety.
Porównaj widoczne etykiety z obliczonymi nazwami w narzędziach deweloperskich.
Funkcje wywoływane potrząśnięciem lub przechyleniem mają alternatywny przycisk i można je wyłączyć.
Poszukaj funkcji wykorzystujących ruch urządzenia.
Wszystko, co robi się przeciąganiem, można też zrobić pojedynczymi kliknięciami lub dotknięciami.
Wypróbuj suwaki, sortowane listy i mapy bez przeciągania.
Cele mają co najmniej 24 na 24 piksele CSS lub są rozmieszczone tak, by okrąg o średnicy 24 pikseli nie nachodził na inne, z wyjątkami.
Zmierz małe ikony i kontrolki w tekście.
Strona deklaruje swój główny język.
Sprawdź atrybut lang na elemencie html.
Fragmenty w innym języku są oznaczone atrybutem lang.
Znajdź cytaty lub zwroty w innych językach.
Ustawienie fokusu na elemencie nie zmienia kontekstu.
Przejdź Tabem na każdą kontrolkę; nic nie powinno się wysłać ani przekierować.
Zmiana ustawienia nie zmienia kontekstu bez ostrzeżenia.
Zmieniaj listy wyboru i przyciski opcji; obserwuj niespodziewane przejścia.
Powtarzająca się nawigacja zachowuje tę samą względną kolejność.
Porównaj menu na kilku stronach.
Komponenty o tej samej funkcji są oznaczone w ten sam sposób.
Porównaj kontrolki wyszukiwania, koszyka i pobierania na różnych stronach.
Powtarzające się opcje pomocy pojawiają się w tej samej względnej kolejności.
Porównaj, gdzie na każdej stronie znajdują się linki do kontaktu, czatu lub pomocy.
Błędy wprowadzania są wskazane i opisane tekstem.
Wyślij formularze puste i z błędnymi danymi.
Pola mają etykiety lub instrukcje tam, gdzie trzeba coś wprowadzić.
Sprawdź, czy każde pole ma widoczną etykietę i podpowiedzi formatu.
Gdy poprawka jest znana, komunikat o błędzie ją sugeruje.
Przeczytaj tekst błędu; czy mówi, jak poprawić wpis?
Ważne zgłoszenia można cofnąć, sprawdzić lub potwierdzić.
Przejdź przez proces zamówienia i usuwania konta.
Informacje już wprowadzone w procesie są uzupełniane automatycznie lub do wybrania.
Poszukaj powtarzających się pól adresu lub e-maila w jednym procesie.
Logowanie nie wymaga testu pamięci ani łamigłówki bez alternatywy, a wklejanie jest dozwolone.
Spróbuj wkleić hasło; sprawdź, czy jest opcja bez łamigłówki.
Niestandardowe kontrolki udostępniają technologiom wspomagającym swoją nazwę, rolę i stan.
Zbadaj niestandardowe widżety w drzewie dostępności.
Komunikaty o stanie są ogłaszane bez przenoszenia fokusu.
Wywołaj dodanie do koszyka lub wyniki wyszukiwania i posłuchaj.
Postrzegalność
Funkcjonalność
Zrozumiałość
Kompatybilność
Interaktywna lista kontrolna WCAG 2.2 A i AA
Drukuj lub zapisz jako PDF
Filtruj według poziomu
Filtruj według zasady
Wszystkie poziomy
Poziom {level}
Wszystkie zasady
Odhaczono {ticked} z {shown} widocznych kryteriów. Zaznaczenia są przechowywane tylko, dopóki ta karta jest otwarta.
Test:
Zaliczone
Niezaliczone
Próbnik: {label}
Hex: {label}
Sprawdzanie kontrastu kolorów WCAG
Używa wzoru na luminancję względną z definicji WCAG 2.2. Wpisz sześciocyfrowe kolory hex.
Tekst
Tło
Przykład zwykłego tekstu, 16 pikseli, normalna grubość.
Przykład dużego tekstu, 24 piksele.
Współczynnik kontrastu {ratio}:1
Wpisz dwa poprawne kolory hex, na przykład #1f2937.
Wynik względem progów AA
Zastosowanie
Wymaga
Wynik
Zwykły tekst (1.4.3)
Duży tekst (1.4.3)
Ikony, obramowania, obrysy fokusu (1.4.11)
Zwykły tekst, AAA (1.4.6)
Zacznij za darmo · Bez karty kredytowej