Nagłówki i etykiety

Czego wymaga kryterium

Gdy sekcja posiada nagłówek lub element formularza ma etykietę, tekst musi faktycznie opisywać to, co następuje. Użytkownicy czytników ekranu traktują nagłówki i etykiety jak spis treści strony — użytkownicy JAWS naciskają H, aby przeskakiwać między nagłówkami, a tryb formularza odczytuje etykiety na głos przy każdym przeniesieniu fokusa na pole. Ogólnikowy tekst niszczy ten cały model nawigacji.

Kryterium nie wymaga, by nagłówki istniały wszędzie — wymaga jedynie, by te, które istnieją, były opisowe. (Informacje o tym, kiedy nagłówki są wymagane, zawiera kryterium 2.4.10 na poziomie AAA).

Jak spełnić kryterium

• Nagłówki powinny opisywać sekcję, a nie intencję projektową: „Adres dostawy” zamiast „Sekcja 2”, „Najczęściej zadawane pytania” zamiast „Więcej informacji”.
• Każdy element formularza należy połączyć z widoczną etykietą <label>, której tekst opisuje pole. Należy unikać stosowania placeholdera jako etykiety — znika on podczas wpisywania.
• W przypadku etykiet ukrytych wizualnie (pole wyszukiwania, przyciski z ikonami) należy używać aria-label lub klasy .visually-hidden, lecz etykieta musi być konkretna.
• Gdy dwa nagłówki na stronie dotyczą naprawdę tego samego tematu (np. dwie sekcje „Komentarze” na stronie forum), należy dodać kontekst odróżniający: „Komentarze z 14 lipca”, „Komentarze z 15 lipca”.
• Warto zweryfikować każdy nagłówek lub etykietę liczącą trzy słowa lub mniej — tam najczęściej kumuluje się ogólnikowość.

Typowe błędy

• „Informacje”, „Szczegóły”, „Więcej”, „Sekcja”, „Formularz” użyte jako nagłówki bez dalszego kontekstu.
• Etykiety formularzy takie jak „Pole 1”, „Wpisz tutaj” lub brak etykiety (wyłącznie placeholder).
• Nagłówki siatek kart brzmiące „Dowiedz się więcej” — przekształcone z wezwań do działania przez zmianę szablonu.
• Strona wyników wyszukiwania, na której każdy nagłówek wyniku to dosłownie słowo „Wynik”.
• Tabele, w których nagłówki kolumn to „Kolumna 1”, „Kolumna 2” zamiast „Data”, „Kwota”, „Status”.

Dlaczego to ważne

W badaniach użytkowników czytników ekranu prowadzonych przez WebAIM nawigacja za pomocą nagłówków jest konsekwentnie najczęstszą strategią orientacji na nowej stronie — bardziej powszechną niż czytanie od góry do dołu. Ogólnikowe nagłówki niszczą tę mapę. Ogólnikowe etykiety destabilizują formularze: użytkownik trafia na pole opisane jedynie jako „dane wejściowe” i musi cofnąć się, by przeczytać otaczający tekst, który tryb formularza często ukrywa.