Checklista WCAG dla programisty (front-end)

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.1

Informacje i relacje

Poziom A Wymagane prawem

Struktura, którą widać na ekranie (nagłówki, listy, tabele, pola formularza z etykietami, grupy), musi być też zapisana w kodzie – tak, żeby czytnik ekranu mógł ją odczytać.

Jak sprawdzić:

1. Sprawdź strukturę nagłówków rozszerzeniem (np. HeadingsMap) – czy odpowiada temu, co widać?
2. Wyłącz style CSS – czy treść nadal ma sensowną strukturę?
3. Kliknij w etykietę pola formularza – kursor powinien przejść do pola.
4. W tabelach sprawdź, czy komórki nagłówkowe to <th>.

1.3.2

Zrozumiała kolejność

Poziom A Wymagane prawem

Jeśli kolejność czytania ma znaczenie, kolejność elementów w kodzie musi być taka sama jak ta widoczna na ekranie.

Jak sprawdzić:

1. Wyłącz CSS lub posłuchaj strony czytnikiem ekranu – czy treść czyta się w sensownej kolejności?
2. Przejdź klawiszem Tab – czy kolejność ma sens (patrz też 2.4.3)?

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.3.5

Określenie pożądanej wartości

Poziom AA Wymagane prawem

Pola formularza z danymi osobowymi (imię, e-mail, telefon, adres) mają w kodzie oznaczony cel przez atrybut autocomplete, dzięki czemu przeglądarka może je wypełnić automatycznie.

Jak sprawdzić:

1. Sprawdź w kodzie pola z danymi użytkownika – czy mają poprawne wartości autocomplete?
2. Spróbuj wypełnić formularz autouzupełnianiem przeglądarki.

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.2

Kontrola odtwarzania dźwięku

Poziom A Wymagane prawem

Jeśli dźwięk odtwarza się automatycznie dłużej niż 3 sekundy, musi być sposób, by go zatrzymać lub ściszyć niezależnie od głośności systemu.

Jak sprawdzić:

1. Otwórz stronę – czy coś zaczyna grać samo?
2. Jeśli tak, sprawdź, czy na początku strony jest dostępny z klawiatury przycisk zatrzymania.

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.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.

1.4.12

Odstępy w tekście

Poziom AA Wymagane prawem

Strona nie może się psuć, gdy użytkownik zwiększy odstępy: interlinię do 1,5, odstęp po akapicie do 2×, odstępy między literami do 0,12 i między słowami do 0,16 wielkości czcionki.

Jak sprawdzić:

1. Zainstaluj bookmarklet „Text Spacing” i uruchom go na stronie – nic nie może się uciąć ani nałożyć.

1.4.13

Treści spod kursora lub fokusu

Poziom AA Wymagane prawem

Treści pojawiające się po najechaniu myszą lub fokusie (dymki, podpowiedzi, podmenu) muszą dać się zamknąć klawiszem Esc, pozwolić najechać na siebie kursorem i nie znikać same, dopóki użytkownik z nich korzysta.

Jak sprawdzić:

1. Najedź kursorem na elementy z dymkami i przesuń kursor na dymek – nie powinien zniknąć.
2. Wywołaj dymek fokusem klawiatury i naciśnij Esc – powinien się zamknąć.

2.1.1

Klawiatura

Poziom A Wymagane prawem

Wszystko, co da się zrobić myszą, musi dać się zrobić samą klawiaturą: menu, przyciski, formularze, suwaki, okna dialogowe, odtwarzacze.

Jak sprawdzić:

1. Odłóż mysz. Przejdź całą ścieżkę (np. wypełnienie formularza kontaktowego) tylko klawiszami Tab, Shift+Tab, Enter, Spacja, strzałki i Esc.
2. Zanotuj każde miejsce, gdzie nie da się czegoś zrobić lub nie widać, gdzie jesteś.

2.1.2

Bez pułapki na klawiaturę

Poziom A Wymagane prawem

Jeśli fokus klawiatury wejdzie w jakiś element (np. osadzony odtwarzacz, edytor, okno), musi dać się z niego wyjść samą klawiaturą.

Jak sprawdzić:

1. Przejdź klawiszem Tab przez całą stronę, łącznie z osadzonymi elementami i oknami – czy zawsze da się iść dalej i wrócić?

2.1.4

Jednoznakowe skróty klawiaturowe

Poziom A Wymagane prawem

Jeśli strona ma skróty z jednego znaku (np. „s” = szukaj), użytkownik musi móc je wyłączyć, zmienić albo działają one tylko, gdy fokus jest na danym elemencie.

Jak sprawdzić:

1. Sprawdź dokumentację i kod pod kątem skrótów jednoznakowych i naciśnij kilka liter na stronie poza polami tekstowymi.

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.4.1

Możliwość pominięcia bloków

Poziom A Wymagane prawem

Musi istnieć sposób, by pominąć powtarzające się bloki (menu, nagłówek) i przejść od razu do treści – zwykle link „Przejdź do treści” na początku strony.

Jak sprawdzić:

1. Wejdź na stronę i naciśnij Tab – pierwszym elementem powinien być link „Przejdź do treści”, a Enter powinien przenieść fokus do głównej treści.

2.4.2

Tytuł strony

Poziom A Wymagane prawem

Każda strona ma tytuł (<title>) opisujący jej temat lub cel.

Jak sprawdzić:

1. Otwórz kilka podstron i sprawdź nazwy kart przeglądarki – czy są różne i opisowe?

2.4.3

Kolejność fokusu

Poziom A Wymagane prawem

Kolejność, w jakiej klawisz Tab przechodzi przez elementy, jest logiczna i zgodna z sensem strony.

Jak sprawdzić:

1. Przejdź Tabem przez stronę i formularze – czy fokus idzie w kolejności czytania?
2. Otwórz okno dialogowe – czy fokus do niego przechodzi, a po zamknięciu wraca na przycisk, który je otworzył?

2.4.4

Cel łącza (w kontekście)

Poziom A Wymagane prawem

Z treści linku (albo z linku i jego najbliższego kontekstu, np. zdania lub akapitu) musi wynikać, dokąd prowadzi.

Jak sprawdzić:

1. Wyświetl listę linków (w NVDA: Insert+F7) i sprawdź, czy każdy jest zrozumiały.
2. Wyszukaj na stronie frazy „kliknij tutaj”, „więcej”.

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.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.2

Rezygnacja ze wskazania

Poziom A Wymagane prawem

Akcja wykonuje się przy puszczeniu przycisku myszy / oderwaniu palca (a nie przy samym naciśnięciu) albo da się ją przerwać, przesuwając kursor poza element.

Jak sprawdzić:

1. Naciśnij przycisk myszy na elemencie, zjedź kursorem poza niego i puść – akcja nie powinna się wykonać.

2.5.3

Etykieta w nazwie

Poziom A Wymagane prawem

Dostępna nazwa elementu (odczytywana przez czytnik, używana przy sterowaniu głosem) zawiera tekst, który widać na etykiecie – najlepiej na początku.

Jak sprawdzić:

1. Porównaj widoczny tekst elementów z ich nazwą dostępną (DevTools → Accessibility).

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.1.1

Język strony

Poziom A Wymagane prawem

Domyślny język strony jest określony w kodzie (atrybut lang w elemencie <html>).

Jak sprawdzić:

1. Zajrzyj do źródła strony: element <html> powinien mieć lang="pl".

3.1.2

Język części

Poziom AA Wymagane prawem

Fragmenty w innym języku niż reszta strony (cytat po angielsku, wersja w języku ukraińskim) mają oznaczony język.

Jak sprawdzić:

1. Znajdź na stronie fragmenty obcojęzyczne i sprawdź w kodzie, czy mają atrybut lang.

3.2.1

Po otrzymaniu fokusu

Poziom A Wymagane prawem

Samo przejście fokusem na element nie może powodować zmiany kontekstu – otwarcia nowego okna, wysłania formularza czy przeniesienia na inną stronę.

Jak sprawdzić:

1. Przejdź Tabem po wszystkich elementach – nic nie powinno się dziać samo, poza pokazaniem fokusu.

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.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ę.

4.1.2

Nazwa, rola, wartość

Poziom A Wymagane prawem

Każdy element interfejsu (przycisk, pole, przełącznik, zakładka, menu) ma w kodzie nazwę, rolę i aktualny stan, które mogą odczytać technologie wspomagające.

Jak sprawdzić:

1. Sprawdź w DevTools (zakładka Accessibility) nazwę i rolę elementów interaktywnych.
2. Przejdź po komponentach czytnikiem ekranu – czy słychać nazwę, typ i stan (zaznaczony, rozwinięty)?

4.1.3

Komunikaty o stanie

Poziom AA Wymagane prawem

Komunikaty o stanie (np. „Dodano do koszyka”, „Znaleziono 12 wyników”, „Formularz wysłany”), które pojawiają się bez przenoszenia fokusu, są ogłaszane przez czytnik ekranu.

Jak sprawdzić:

1. Wykonaj akcję z komunikatem (dodanie do koszyka, filtr) z włączonym czytnikiem ekranu – czy komunikat został odczytany?