WCAG 2.1: wytyczne w praktyce, 13 obszarów i 17 kryteriów, które doszły względem 2.0

WCAG 2.1 to wersja wytycznych dostępności, do której odwołują się dziś polskie przepisy dla podmiotów publicznych i europejska norma EN 301 549. Ma 78 kryteriów sukcesu: 30 na poziomie A, 20 na poziomie AA i 28 na poziomie AAA. Do zgodności z prawem potrzeba 50 z nich, czyli wszystkich kryteriów A i AA. Poniżej przechodzę przez 13 wytycznych, z których składa się standard, i pokazuję, co w praktyce oznaczają dla zwykłej strony firmowej albo sklepu.

Struktura WCAG 2.1: zasady, wytyczne, kryteria

Cztery zasady (postrzegalność, funkcjonalność, zrozumiałość, solidność) dzielą się na 13 wytycznych, a te na kryteria sukcesu. Kryterium ma numer, np. 1.4.3, i poziom. Pierwsza cyfra to zasada, druga wytyczna, trzecia kryterium. Ogólne wprowadzenie do zasad i poziomów masz w tekście WCAG co to jest.

13 wytycznych WCAG 2.1 w praktyce

• 1.1 Alternatywa tekstowa: opis każdego obrazu, który niesie informację. Ikona koszyka ma tekst „koszyk”, a nie „ikona”.
• 1.2 Multimedia: napisy do filmów, transkrypcje nagrań, audiodeskrypcja tam, gdzie obraz niesie treść.
• 1.3 Możliwość adaptacji: struktura z nagłówków, list i tabel w kodzie, a nie tylko wizualnie. Formularz z etykietami powiązanymi z polami.
• 1.4 Rozróżnialność: kontrast, powiększanie tekstu bez utraty treści, informacja nie tylko kolorem.
• 2.1 Klawiatura: wszystko da się obsłużyć bez myszy, bez pułapek, z których fokus nie wychodzi.
• 2.2 Wystarczający czas: możliwość wydłużenia limitów czasu i zatrzymania karuzeli.
• 2.3 Ataki padaczki: brak treści migających częściej niż 3 razy na sekundę.
• 2.4 Nawigacja: tytuły stron, kolejność fokusa, widoczny fokus, linki opisujące cel.
• 2.5 Metody obsługi: gesty mają prostą alternatywę, etykieta przycisku zgadza się z tym, co czyta czytnik ekranu.
• 3.1 Możliwość odczytania: zadeklarowany język strony i fragmentów w innym języku.
• 3.2 Przewidywalność: nic nie dzieje się samo po wejściu w pole, nawigacja jest spójna na wszystkich podstronach.
• 3.3 Pomoc przy wprowadzaniu: opis błędów tekstem, podpowiedzi formatu, potwierdzenie przed ważną operacją.
• 4.1 Kompatybilność: elementy interaktywne mają nazwę i rolę dla technologii wspomagających, a komunikaty statusu są ogłaszane.

17 kryteriów, które doszły w WCAG 2.1

Wersja 2.1 z 2018 r. nie zmieniła kryteriów z 2.0, tylko dodała nowe, głównie z myślą o telefonach, osobach słabowidzących i z niepełnosprawnością poznawczą. Najważniejsze z nich na poziomach A i AA:

• 1.3.4 Orientacja (AA): strona działa w pionie i w poziomie, chyba że orientacja jest niezbędna.
• 1.3.5 Określenie celu pola (AA): pola z danymi użytkownika, np. imię, e-mail, mają w kodzie oznaczony cel, więc przeglądarka może je uzupełnić.
• 1.4.10 Dopasowanie do ekranu (AA): treść mieści się w szerokości 320 pikseli CSS bez przewijania w poziomie, co odpowiada powiększeniu 400%.
• 1.4.11 Kontrast elementów nietekstowych (AA): ramki pól, ikony i elementy wykresów mają kontrast co najmniej 3:1.
• 1.4.12 Odstępy w tekście (AA): zwiększenie interlinii do 1,5, odstępów akapitów do dwukrotności rozmiaru czcionki i odstępów liter oraz słów nie psuje układu.
• 1.4.13 Treść spod kursora (AA): dymki pojawiające się po najechaniu można zamknąć i nie znikają, zanim użytkownik je przeczyta.
• 2.5.3 Etykieta w nazwie (A): przycisk z napisem „Wyślij” ma tę samą nazwę dla czytnika ekranu i sterowania głosem.
• 4.1.3 Komunikaty o stanie (AA): komunikat „dodano do koszyka” jest ogłaszany przez czytnik ekranu, bez przenoszenia fokusa.

Pozostałe nowości to kryteria dotyczące skrótów klawiszowych, gestów, anulowania kliknięcia i sterowania ruchem urządzenia (poziom A) oraz pięć kryteriów AAA, m.in. minimalny rozmiar celu dotyku 44 na 44 piksele CSS. W WCAG 2.2 rozmiar celu na poziomie AA złagodzono do 24 pikseli, co opisuję w tekście o WCAG 2.2.

Kryteria, na których najczęściej wykładają się sklepy

Jak wdrożyć WCAG 2.1 bez przebudowy całej strony

Jak samodzielnie sprawdzić najważniejsze kryteria, opisuję w tekście o sprawdzaniu zgodności z WCAG. Automat wyłapie brak tekstu alternatywnego czy zły kontrast, ale nie oceni, czy opis obrazu ma sens albo czy kolejność fokusa jest logiczna. To wymaga testu klawiaturą i czytnikiem ekranu. Przy nowej stronie najtaniej zaplanować te rzeczy od razu, przy stronie internetowej na zamówienie.

Źródła: WCAG 2.1, rekomendacja W3C i Co nowego w WCAG 2.1, W3C WAI.