Checklista WCAG dla projektanta UX/UI

Kryteria, które trzeba uwzględnić już w makietach: kontrast, rozmiar przycisków, fokus, spójność i formularze.

30 kryteriów WCAG 2.2 na poziomach A i AA, w tym 24 wymaganych dziś prawem. Przy każdym znajdziesz szybki test.

1.1.1

Treść nietekstowa

Poziom A Wymagane prawem

Każdy obrazek, ikona, wykres czy przycisk graficzny musi mieć tekstowy odpowiednik, który przekazuje tę samą informację. Grafiki czysto dekoracyjne należy ukryć przed czytnikami ekranu.

Jak sprawdzić:

  1. Wyłącz obrazki w przeglądarce (lub użyj rozszerzenia do podglądu altów) i sprawdź, czy strona nadal przekazuje wszystkie informacje.
  2. Przejdź po stronie czytnikiem ekranu (NVDA, VoiceOver) i posłuchaj, co jest odczytywane przy grafikach i ikonach.
  3. Sprawdź, czy ozdobniki mają pusty alt="" – nie powinny być odczytywane w ogóle.
1.3.3

Charakterystyki zmysłowe

Poziom A Wymagane prawem

Instrukcje nie mogą opierać się wyłącznie na kształcie, kolorze, rozmiarze, położeniu czy dźwięku („kliknij zielony przycisk po prawej”).

Jak sprawdzić:

  1. Przeczytaj wszystkie instrukcje na stronie i w formularzach – czy da się je wykonać bez wzroku i bez rozróżniania kolorów?
1.3.4

Orientacja

Poziom AA Wymagane prawem

Strona lub aplikacja działa zarówno w pionie, jak i w poziomie – nie blokuje jednej orientacji ekranu, chyba że jest to niezbędne (np. aplikacja do czeków bankowych).

Jak sprawdzić:

  1. Obróć telefon/tablet w obie strony na każdej kluczowej podstronie – czy treść nadal jest dostępna i czytelna?
1.4.1

Użycie koloru

Poziom A Wymagane prawem

Kolor nie może być jedynym sposobem przekazania informacji – np. zaznaczenia błędu, wyróżnienia linku w tekście czy serii na wykresie.

Jak sprawdzić:

  1. Zrób zrzut ekranu i przełącz go na skalę szarości – czy nadal wiesz, co jest linkiem, błędem, którą serią?
  2. Użyj symulatora daltonizmu w DevTools (Rendering → Emulate vision deficiencies).
1.4.3

Kontrast (minimum)

Poziom AA Wymagane prawem

Tekst musi mieć kontrast z tłem co najmniej 4,5:1. Duży tekst (od 24 px, albo od ok. 18,7 px pogrubiony) – co najmniej 3:1.

Jak sprawdzić:

  1. Sprawdź pary kolorów kalkulatorem kontrastu (poniżej na tej stronie).
  2. W Chrome DevTools najedź inspektorem na tekst – pokazuje współczynnik kontrastu.
  3. Przejrzyj stany: hover, disabled, focus, tekst na zdjęciach.
1.4.4

Zmiana rozmiaru tekstu

Poziom AA Wymagane prawem

Tekst można powiększyć do 200% (np. zoomem przeglądarki) bez utraty treści i funkcji – nic nie może się uciąć ani nałożyć.

Jak sprawdzić:

  1. Ustaw zoom przeglądarki na 200% (Ctrl +) i przejdź po stronie – czy wszystko jest czytelne i klikalne?
  2. Sprawdź, czy na telefonie da się powiększyć stronę gestem.
1.4.5

Obrazy tekstu

Poziom AA Wymagane prawem

Tekst ma być tekstem, a nie obrazkiem z tekstem – wyjątkiem są logotypy i sytuacje, gdy konkretny wygląd jest niezbędny.

Jak sprawdzić:

  1. Spróbuj zaznaczyć tekst myszką – jeśli się nie da, to prawdopodobnie obraz.
  2. Powiększ stronę do 200% – tekst w obrazach się rozmyje.
1.4.10

Dopasowanie do ekranu

Poziom AA Wymagane prawem

Treść musi się dopasować do szerokości 320 px (odpowiednik zoomu 400% na ekranie 1280 px) bez przewijania w dwóch kierunkach – wyjątki to np. mapy, tabele danych i edytory.

Jak sprawdzić:

  1. Ustaw okno przeglądarki na szerokość 1280 px i zoom 400% – przewijanie w poziomie nie powinno być potrzebne.
  2. Albo sprawdź widok 320 px w trybie responsywnym DevTools.
1.4.11

Kontrast elementów nietekstowych

Poziom AA Wymagane prawem

Elementy interfejsu (obramowania pól, przyciski, przełączniki, wskaźnik fokusu) i istotne części grafik (linie wykresu, ikony) muszą mieć kontrast co najmniej 3:1 z otoczeniem.

Jak sprawdzić:

  1. Sprawdź kalkulatorem kontrastu (poniżej) kolory ramek pól, ikon i linii wykresów względem tła – próg 3:1.
  2. Przejdź po stronie klawiszem Tab i oceń, czy fokus jest wyraźnie widoczny.
2.2.1

Dostosowanie czasu

Poziom A Wymagane prawem

Jeśli strona ma limit czasu (np. wylogowanie, czas na wypełnienie formularza), użytkownik musi móc go wyłączyć, wydłużyć (co najmniej 10-krotnie) albo przedłużyć jednym prostym działaniem po ostrzeżeniu.

Jak sprawdzić:

  1. Znajdź wszystkie miejsca z limitem czasu (sesja, rezerwacje, testy).
  2. Sprawdź, czy przed upływem czasu pojawia się ostrzeżenie z opcją przedłużenia, dostępne dla czytnika ekranu.
2.2.2

Pauza, zatrzymanie, ukrycie

Poziom A Wymagane prawem

Treści ruchome, migające lub przewijające się automatycznie dłużej niż 5 sekund (karuzele, pasy z wiadomościami, animacje) muszą mieć możliwość pauzy, zatrzymania lub ukrycia. To samo dotyczy treści aktualizujących się automatycznie.

Jak sprawdzić:

  1. Poszukaj na stronie wszystkiego, co się rusza samo – czy jest widoczny przycisk pauzy dostępny z klawiatury?
2.3.1

Trzy błyski lub wartości poniżej progu

Poziom A Wymagane prawem

Nic na stronie nie może błyskać częściej niż trzy razy na sekundę (chyba że błyski są poniżej progów jasności i wielkości).

Jak sprawdzić:

  1. Przejrzyj animacje i filmy pod kątem szybkich błysków.
  2. W razie wątpliwości użyj narzędzia PEAT (Photosensitive Epilepsy Analysis Tool).
2.4.5

Wiele dróg

Poziom AA Wymagane prawem

Do każdej podstrony da się dotrzeć więcej niż jedną drogą, np. przez menu i wyszukiwarkę, albo menu i mapę strony.

Jak sprawdzić:

  1. Sprawdź, czy serwis ma co najmniej dwa mechanizmy: menu + wyszukiwarka / mapa strony / spis treści.
2.4.6

Nagłówki i etykiety

Poziom AA Wymagane prawem

Nagłówki i etykiety pól opisują temat lub cel tego, czego dotyczą.

Jak sprawdzić:

  1. Przejrzyj listę nagłówków strony (np. HeadingsMap) – czy z samych nagłówków rozumiesz, co jest na stronie?
2.4.7

Widoczny fokus

Poziom AA Wymagane prawem

Element, na którym jest fokus klawiatury, musi być wyraźnie widoczny (obramowanie, podświetlenie).

Jak sprawdzić:

  1. Przejdź Tabem po całej stronie – czy zawsze widzisz, który element jest aktywny?
2.4.11

Fokus nie jest zasłonięty (minimum)

Poziom AA Nowe w 2.2

Element z fokusem nie może być całkowicie zasłonięty przez treści stworzone przez autora strony – np. przyklejony nagłówek, stopkę czy baner cookies.

Jak sprawdzić:

  1. Przejdź Tabem po stronie z otwartym banerem cookies i przewiniętym nagłówkiem – czy aktywny element zawsze jest choć częściowo widoczny?
2.5.1

Gesty dotykowe

Poziom A Wymagane prawem

Funkcje obsługiwane gestami wielopunktowymi (szczypanie, dwa palce) lub wymagającymi określonej ścieżki (przeciągnięcie po łuku) mają alternatywę w postaci pojedynczego kliknięcia/dotknięcia.

Jak sprawdzić:

  1. Sprawdź funkcje dotykowe – czy każdą da się wykonać pojedynczym dotknięciem (np. przyciski +/−, strzałki)?
2.5.4

Aktywowanie ruchem

Poziom A Wymagane prawem

Funkcje uruchamiane ruchem urządzenia (potrząśnięcie, przechylenie) mają alternatywę w interfejsie i można wyłączyć reagowanie na ruch.

Jak sprawdzić:

  1. Sprawdź, czy jakakolwiek funkcja reaguje na ruch urządzenia i czy ma alternatywę.
2.5.7

Ruchy przeciągania

Poziom AA Nowe w 2.2

Każda funkcja wymagająca przeciągania (drag and drop, suwaki, sortowanie) ma alternatywę w postaci pojedynczych kliknięć.

Jak sprawdzić:

  1. Znajdź elementy przeciągane i sprawdź, czy da się osiągnąć to samo kliknięciami.
2.5.8

Rozmiar celu (minimum)

Poziom AA Nowe w 2.2

Elementy klikalne mają co najmniej 24 × 24 piksele CSS albo są tak rozmieszczone, że wokół każdego mieści się okrąg o średnicy 24 px, nienachodzący na sąsiednie cele. Wyjątki: linki w tekście, elementy natywne przeglądarki.

Jak sprawdzić:

  1. Zmierz w DevTools rozmiar małych przycisków i ikon oraz odstępy między nimi.
3.2.2

Podczas wprowadzania danych

Poziom A Wymagane prawem

Zmiana wartości pola (wybór z listy, zaznaczenie opcji) nie powoduje automatycznie zmiany kontekstu, chyba że użytkownik został o tym uprzedzony.

Jak sprawdzić:

  1. Zmieniaj wartości list i pól klawiaturą – nie powinno dojść do przeładowania strony ani przeniesienia fokusu.
3.2.3

Spójna nawigacja

Poziom AA Wymagane prawem

Powtarzające się elementy nawigacji (menu, stopka, wyszukiwarka) występują na każdej podstronie w tej samej kolejności.

Jak sprawdzić:

  1. Porównaj kilka podstron – czy menu i elementy stałe są w tej samej kolejności?
3.2.4

Spójna identyfikacja

Poziom AA Wymagane prawem

Elementy o tej samej funkcji są nazywane i oznaczane tak samo w całym serwisie.

Jak sprawdzić:

  1. Porównaj etykiety i ikony powtarzających się funkcji na różnych podstronach.
3.2.6

Spójna pomoc

Poziom A Nowe w 2.2

Jeśli na wielu podstronach jest dostępna pomoc (dane kontaktowe, czat, formularz, FAQ), znajduje się ona zawsze w tym samym miejscu względem innych treści.

Jak sprawdzić:

  1. Przejrzyj kilka podstron (także w procesach, np. formularzach) – czy pomoc jest w tym samym miejscu?
3.3.1

Identyfikacja błędu

Poziom A Wymagane prawem

Jeśli formularz wykryje błąd, wskazuje, które pole jest błędne, i opisuje problem tekstem.

Jak sprawdzić:

  1. Wyślij formularz z błędami (puste pola, zły e-mail) i sprawdź, czy każdy błąd jest opisany tekstem przy polu.
  2. Sprawdź czytnikiem ekranu, czy po wejściu w pole słychać komunikat błędu.
3.3.2

Etykiety lub instrukcje

Poziom A Wymagane prawem

Pola formularza mają widoczne etykiety, a tam, gdzie trzeba – instrukcje (format daty, pola wymagane).

Jak sprawdzić:

  1. Przejrzyj formularze – czy każde pole ma widoczną etykietę, a wymagany format jest opisany przed polem?
3.3.3

Sugestie korekty błędów

Poziom AA Wymagane prawem

Jeśli wiadomo, jak poprawić błąd, komunikat podpowiada rozwiązanie (np. „Data musi mieć format DD.MM.RRRR”).

Jak sprawdzić:

  1. Wywołaj różne błędy w formularzach i oceń, czy komunikat mówi, jak je poprawić.
3.3.4

Zapobieganie błędom (prawnym, finansowym, w danych)

Poziom AA Wymagane prawem

Przy formularzach o skutkach prawnych lub finansowych (wnioski, płatności, zmiana danych) użytkownik może sprawdzić dane przed wysłaniem, poprawić je lub cofnąć operację.

Jak sprawdzić:

  1. Przejdź proces składania wniosku/zamówienia – czy przed wysłaniem jest krok podsumowania z możliwością poprawy?
3.3.7

Zbędne wprowadzanie danych

Poziom A Nowe w 2.2

W jednym procesie użytkownik nie musi ponownie wpisywać danych, które już podał – system uzupełnia je sam albo pozwala je wybrać (np. „adres do korespondencji taki sam jak zamieszkania”).

Jak sprawdzić:

  1. Przejdź wieloetapowe formularze i sprawdź, czy któreś dane trzeba podawać drugi raz.
3.3.8

Dostępne uwierzytelnianie (minimum)

Poziom AA Nowe w 2.2

Logowanie nie może wymagać testu poznawczego (zapamiętania hasła, przepisania kodu, rozwiązania zagadki), chyba że jest alternatywa albo pomoc – np. możliwość wklejenia hasła, menedżer haseł, logowanie linkiem e-mail.

Jak sprawdzić:

  1. Spróbuj zalogować się, wklejając hasło i korzystając z menedżera haseł.
  2. Sprawdź, czy CAPTCHA ma alternatywę.