WCAG 2.2: co nowego, 9 nowych kryteriów i jak dostosować do nich stronę

WCAG 2.2 opublikowano w październiku 2023 r. Wersja dodaje 9 kryteriów sukcesu, a jedno, przestarzałe kryterium 4.1.1 o poprawności parsowania kodu, usuwa. Wszystkie nowości dotyczą rzeczy, które użytkownicy odczuwają na co dzień: fokusu zasłoniętego przez przyklejony nagłówek, za małych przycisków na telefonie, logowania wymagającego przepisywania kodów i formularzy, które każą wpisywać te same dane dwa razy. Poniżej omawiam każde z nich z przykładem.

Dziewięć nowych kryteriów WCAG 2.2

Do zgodności z poziomem AA trzeba spełnić sześć z nich: 2.4.11, 2.5.7, 2.5.8, 3.2.6, 3.3.7 i 3.3.8.

Fokus niezasłonięty: problem przyklejonych nagłówków

Użytkownik klawiatury przechodzi tabulatorem po stronie, a aktywny link chowa się pod przyklejonym menu, banerem cookies albo oknem czatu. Kryterium 2.4.11 wymaga, żeby element z fokusem nie był zasłonięty w całości. Rozwiązania są proste: przewijanie z marginesem równym wysokości nagłówka (właściwość scroll-padding w CSS), baner cookies, który nie przykrywa treści na stałe, i okno czatu otwierane dopiero po kliknięciu.

Rozmiar celu 24 piksele: przyciski na telefonie

Kryterium 2.5.8 wymaga, żeby klikalny element miał co najmniej 24 na 24 piksele CSS albo wystarczający odstęp od sąsiednich celów. Typowe naruszenia w sklepach: małe przyciski plus i minus przy ilości w koszyku, ikonki usuwania produktu, kropki karuzeli, linki w stopce ułożone ciasno jeden pod drugim. Wymóg poziomu AA jest łagodniejszy niż 44 piksele z poziomu AAA w WCAG 2.1, ale wciąż wyłapuje wiele interfejsów projektowanych tylko pod mysz.

Przeciąganie z alternatywą

Suwak ceny w filtrach sklepu, sortowanie elementów przez przeciąganie, mapa przesuwana palcem. Kryterium 2.5.7 wymaga, żeby każdą taką operację dało się wykonać pojedynczym kliknięciem, np. polami „od” i „do” obok suwaka ceny albo przyciskami „w górę” i „w dół” przy liście. Osoba z drżeniem rąk albo korzystająca z myszy nagłownej nie przeciągnie elementu precyzyjnie.

Spójna pomoc i zbędne wprowadzanie

• 3.2.6 Spójna pomoc: jeśli strona ma telefon, czat albo link do pomocy, jest on w tym samym miejscu na każdej podstronie, np. zawsze w stopce albo zawsze w nagłówku.
• 3.3.7 Zbędne wprowadzanie: w wieloetapowym formularzu dane podane wcześniej uzupełniają się same albo można je wybrać. Klasyczny przykład: checkbox „adres dostawy taki sam jak adres rozliczeniowy” w checkoucie.

Dostępne uwierzytelnianie

Kryterium 3.3.8 dotyczy logowania. Jeśli wymaga ono testu poznawczego, np. zapamiętania hasła, rozwiązania łamigłówki albo przepisania kodu, musi istnieć alternatywa albo pomoc. W praktyce wystarczy pozwolić na wklejanie hasła i kodów (zakaz wklejania to częsty błąd), obsługiwać menedżery haseł i oferować logowanie linkiem w mailu albo kluczem dostępu. Testy CAPTCHA polegające na rozpoznawaniu obiektów są na poziomie AA dopuszczone, ale na poziomie AAA już nie.

Usunięte kryterium 4.1.1

Kryterium 4.1.1 Parsowanie wymagało poprawnego składniowo kodu HTML. Współczesne przeglądarki i technologie wspomagające radzą sobie z drobnymi błędami składni, a realne problemy, które kryterium miało wyłapywać, obejmują inne kryteria. W WCAG 2.2 zostało więc usunięte. Nie znaczy to, że jakość kodu przestała mieć znaczenie: zduplikowane identyfikatory w formularzu nadal mogą łamać powiązanie etykiet z polami (kryterium 1.3.1).

Czy trzeba przejść z WCAG 2.1 na 2.2

Przepisy i norma EN 301 549 odwołują się dziś do WCAG 2.1. Strona zgodna z 2.2 spełnia jednocześnie 2.1, więc przy nowych projektach i przebudowach warto od razu celować w 2.2. Sześć nowych kryteriów AA to w większości drobne zmiany w komponentach, które przy sklepie warto zrobić razem z innymi poprawkami, np. w ramach przebudowy sklepu. Szczegóły wcześniejszej wersji opisuję w tekście o WCAG 2.1, a podstawy w tekście WCAG co to jest.

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