Checklista WCAG dla redaktora treści

Kryteria, za które odpowiada osoba publikująca treści w CMS: teksty alternatywne, nagłówki, linki, dokumenty i język.

12 kryteriów WCAG 2.2 na poziomach A i AA, w tym 12 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.2.1

Tylko audio lub tylko wideo (nagranie)

Poziom A Wymagane prawem

Nagranie samego dźwięku (np. podcast) potrzebuje transkrypcji. Nagranie samego obrazu bez dźwięku (np. animacja instruktażowa) potrzebuje opisu tekstowego lub ścieżki audio.

Jak sprawdzić:

  1. Znajdź na stronie wszystkie pliki audio i nieme wideo.
  2. Sprawdź, czy obok każdego jest link do transkrypcji lub opisu tekstowego i czy zawiera wszystkie istotne informacje.
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.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.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.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.
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.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.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?
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.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.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ć.