WCAG 2.4.6 Nagłówki i etykiety

Kryterium sukcesu 2.4.6 pomaga zrozumieć, co zawiera strona, i znaleźć potrzebną część. Użytkownicy czytników ekranu przeskakują od nagłówka do nagłówka, osoby z niepełnosprawnościami poznawczymi polegają na jasnych nagłówkach, by śledzić strukturę, a każdy szybciej wypełnia formularz, gdy etykiety pól mówią dokładnie, czego się oczekuje. To poziom AA, a kryterium należy do normy EN 301 549 (punkt 9.2.4.6).

Czego wymaga kryterium

Nagłówki i etykiety opisują temat lub cel.

Ważne szczegóły według W3C:

• kryterium nie wymaga, by nagłówki lub etykiety istniały — wymaga, by te, które są, były opisowe;
• etykieta to tekst pokazywany wszystkim użytkownikom, który identyfikuje komponent (nie tylko element HTML <label>);
• etykiety mogą być krótkie, o ile jasno identyfikują treść;
• nagłówki i etykiety muszą też być poprawnie oznaczone w kodzie, aby technologie wspomagające mogły je znaleźć — ta część należy do kryterium 1.3.1 Informacje i relacje.

Typowe błędy w sklepie internetowym

• niejasne nagłówki sekcji na stronie produktu, np. „Więcej”, „Info” lub „Sekcja 2”;
• kilka identycznych nagłówków („Szczegóły”) na jednej stronie, które dotyczą różnych rzeczy;
• pola formularza z etykietą „Nazwisko”, choć imię i nazwisko są osobnymi polami, albo „Numer” bez wskazówki, czy chodzi o numer telefonu, czy domu;
• pole kuponu opisane tylko jako „Kod”;
• nagłówki używane do stylizacji — duży tekst, np. „Darmowa dostawa!”, oznaczony jako <h2>, podczas gdy prawdziwe tytuły sekcji są zwykłym tekstem w <div>.

Jak to sprawdzić

Automatycznie: dla tego kryterium nie ma reguły axe-core. Oprogramowanie wykryje, że nagłówek lub etykieta istnieje, ale nie oceni, czy opisuje treść, dlatego potrzebna jest kontrola ręczna. Powiązane problemy, takie jak brakujące etykiety pól (1.3.1, 4.1.2) i pominięte poziomy nagłówków (dobra praktyka), nasz skaner zgłasza w ramach osobnych reguł w bibliotece reguł.

Ręcznie: wyświetlić listę nagłówków strony (umożliwia to lista nagłówków czytnika ekranu lub rozszerzenie przeglądarki). Przeczytać je w oderwaniu od reszty: czy dają zarys strony? Następnie przejść przez każdy formularz — newsletter, konto, zamówienie — i przeczytać każdą etykietę, nie patrząc na pole. Czy wiadomo, co wpisać?

Jak to naprawić

• Pisać nagłówki nazywające treść: „Rozmiar i krój”, „Dostawa i zwroty”, „Opinie klientów (24)”.
• Zachować jeden <h1> na stronę, odpowiadający głównemu tematowi strony, i logicznie zagnieżdżać h2/h3.
• Formułować konkretne etykiety: „Adres e-mail”, „Numer telefonu (dla kuriera)”, „Kod rabatowy”.
• Do tytułów sekcji używać prawdziwych elementów nagłówków, a do dekoracji zwykłego tekstu ze stylami.

Powiązane kryteria

• 2.4.2 Tytuł strony — tytuł strony musi być opisowy.
• 2.5.3 Etykieta w nazwie — widoczna etykieta musi znajdować się w nazwie dostępnej.
• 2.4.1 Możliwość pominięcia bloków — nagłówki pomagają pomijać powtarzające się treści.

Najczęstsze pytania

Czy WCAG 2.4.6 wymaga nagłówków na każdej stronie?

Nie. W3C stwierdza, że 2.4.6 nie wymaga nagłówków ani etykiet. Wymaga, by istniejące nagłówki i etykiety opisywały swój temat lub cel. Kiedy struktura i etykiety są potrzebne, określają inne kryteria, np. 1.3.1 i 3.3.2.

Czy WCAG wymaga ścisłej kolejności nagłówków?

W WCAG 2.2 nie ma kryterium sukcesu, które zabraniałoby pomijania poziomów nagłówków. Logiczna kolejność (h1, potem h2, potem h3) to mocno zalecana dobra praktyka, a nasz skaner zgłasza pominięte poziomy jako problem dobrych praktyk, a nie jako błąd 2.4.6.

Czym jest etykieta w WCAG?

To tekst lub inny komponent z alternatywą tekstową, pokazywany wszystkim użytkownikom w celu identyfikacji komponentu, np. widoczny tekst obok pola formularza. Nie ogranicza się do elementu HTML label.