WCAG 3.2.4 Spójna identyfikacja

Kryterium sukcesu 3.2.4 pozwala nauczyć się serwisu raz. Użytkownicy czytników ekranu polegają na nazwach dostępnych, a osoby z niepełnosprawnościami poznawczymi lub trudnościami w uczeniu się — na rozpoznawaniu słów i ikon. Jeśli ten sam przycisk wyszukiwania nazywa się na jednej stronie „Szukaj”, a na innej „Znajdź”, mogą uznać, że to inna funkcja. To poziom AA; w normie EN 301 549 kryterium to występuje jako punkt 9.3.2.4.

Czego wymaga kryterium

Komponenty o tej samej funkcjonalności w obrębie zestawu stron internetowych muszą być identyfikowane w spójny sposób. „Ta sama funkcjonalność” oznacza, że komponent daje ten sam wynik po użyciu. Identyfikacja obejmuje widoczną etykietę, ikonę oraz tekst alternatywny lub nazwę dostępną.

Doprecyzowania z dokumentu W3C Understanding:

• spójne nie oznacza identyczne; sformułowanie może dopasować się do kontekstu, o ile funkcja jest rozpoznawalna;
• od komponentów, które robią różne rzeczy, nie oczekuje się jednakowych etykiet;
• kryterium dotyczy tylko komponentów, które faktycznie powtarzają się na kilku stronach.

Typowe błędy w sklepie internetowym

• „Dodaj do koszyka” na stronach produktów i „Kup” na stronach kategorii dla tej samej czynności, z różnymi nazwami dostępnymi;
• ikona koszyka ma tekst alternatywny „Koszyk” w jednym szablonie, a „Torba” lub brak nazwy w innym;
• pole wyszukiwania ma etykietę „Szukaj” w nagłówku i „Znajdź produkty” w menu mobilnym, z różnymi ikonami;
• ten sam link „Pobierz fakturę” ma w jednym miejscu ikonę drukarki, a w innym ikonę dokumentu;
• widoczna etykieta jest taka sama, ale aria-label różni się między stronami.

Jak to sprawdzić

Automatycznie: nasz skaner nie ma reguły dla tego kryterium. Może zgłosić brakujące nazwy (zob. 4.1.2), ale ocena, czy dwa komponenty mają wspólną funkcję, wymaga człowieka.

Ręcznie: należy spisać komponenty występujące na wielu stronach: wyszukiwanie, koszyk, konto, listę życzeń, „Dodaj do koszyka”, zapis do newslettera, przełącznik języka. Na kilku typach stron porównać ich widoczną etykietę, ikonę i nazwę dostępną (zbadać element w narzędziach przeglądarki lub użyć czytnika ekranu). Zanotować te, które różnią się przy tej samej funkcji.

Jak to naprawić

• Definiować etykiety raz, w tekstach tłumaczeń motywu, i używać ich ponownie w każdym szablonie.
• Stosować jeden zestaw ikon i ten sam tekst alternatywny dla każdej funkcji.
• Utrzymywać wartości aria-label zgodne z widocznymi etykietami, a nazwę dostępną zaczynać od widocznego tekstu.
• Gdy aplikacje dodają własne przyciski, zmieniać ich nazwy tak, by pasowały do sformułowań motywu.

Powiązane kryteria

• 3.2.3 Spójna nawigacja — powtarzana nawigacja w tej samej kolejności.
• 2.5.3 Etykieta w nazwie — nazwa dostępna zawiera widoczną etykietę.
• 4.1.2 Nazwa, rola, wartość — każdy element sterujący ma nazwę.

Najczęstsze pytania

Czy etykiety muszą być identyczne słowo w słowo?

Nie. WCAG mówi, że spójne nie oznacza identycznych. Etykiety muszą jasno pokazywać, że chodzi o tę samą funkcję — na przykład „Dodaj do koszyka” i „Dodaj do koszyka: niebieska kurtka” są spójne.

Czy 3.2.4 dotyczy ikon?

Tak. Ikony i ich teksty alternatywne również identyfikują elementy. Ikona torby dla koszyka na jednej stronie i ikona wózka z innym tekstem alternatywnym na innej mogą nie spełniać kryterium.

Czy automatyczne narzędzie może sprawdzić 3.2.4?

Nie. Ocena, czy dwa elementy mają tę samą funkcję, wymaga człowieka, dlatego jest to kontrola ręczna na kilku stronach.