2.4.6 Nagłówki i etykiety

/ Jak strony go nie spełniają

• Każda sekcja strony z usługami ma nagłówek „Dowiedz się więcej” albo „Przegląd”, więc lista nagłówków to w kółko te same dwa zwroty.
• Formularz zamówienia ma dwa pola z etykietą „Adres”, jedno do faktury, drugie do dostawy, i żadna etykieta nie mówi, które jest które.
• Nagłówek zastępczy z szablonu, na przykład „Tytuł sekcji”, trafił na produkcję nad prawdziwą treścią.
• Przyciski w każdym wierszu tabeli mają napisy „Dalej” i „Wyślij”, bez słowa o tym, co robią z danym wierszem.
• Po przebudowie nagłówek „Cennik” stoi nad blokiem opinii klientów, a ceny przeniesiono do innej sekcji.

/ Jak sprawdzić samodzielnie

1. Otwórz konspekt nagłówków darmowym rozszerzeniem przeglądarki, takim jak HeadingsMap, albo listę nagłówków w czytniku ekranu (w NVDA Insert+F7). Przeczytaj same nagłówki i sprawdź, czy każdy mówi, co zawiera jego sekcja.
2. Porównaj każdy nagłówek z treścią pod nim. Nagłówek, który został z szablonu albo z wcześniejszego układu, nie spełnia kryterium, nawet jeśli jest dobrze napisany.
3. Przeczytaj każdą widoczną etykietę pola osobno i zastanów się, czy mówi, co wpisać. Najuważniej przyjrzyj się parom, które łatwo pomylić, jak dwa pola adresu albo dwa pola daty.
4. Sprawdź przyciski i kontrolki z ikonami. Ich widoczny tekst lub symbol powinien mówić, co się stanie, a ikona będąca jedyną etykietą powinna być powszechnie rozpoznawana w tym miejscu.
5. Tam, gdzie ten sam nagłówek powtarza się na stronie, na przykład „Specyfikacja” pod kilkoma produktami, sprawdź, czy otaczająca struktura odróżnia jeden od drugiego.

/ Jak to naprawić

• Przepisz każdy nagłówek tak, żeby nazywał swój temat, i zacznij od słowa, które go wyróżnia: „Powódź: przygotowanie” i „Pożar: przygotowanie” zamiast „Przygotowanie na wypadek powodzi” i „Przygotowanie na wypadek pożaru”.
• Niech każda etykieta mówi dokładnie, co wpisać w pole: „Adres do faktury” i „Adres dostawy”, „Data urodzenia” zamiast „Data”.
• Nazywaj przyciski od tego, co robią, na przykład „Usuń fakturę” albo „Pobierz raport”, a nie „Dalej” czy „Wyślij”.
• Kontrolce, która ma tylko ikonę, daj tekst alternatywny podający jej cel, na przykład aria-label="Szukaj" na przycisku z lupą, a samych ikon jako etykiet używaj tylko dla symboli powszechnie rozumianych.
• Przeglądaj nagłówki za każdym razem, gdy treść się przesuwa albo szablon jest używany ponownie, i przed publikacją przeszukaj kod pod kątem tekstu zastępczego, takiego jak „Lorem ipsum” czy „Tytuł sekcji”.

/ Co sprawdza nasz skaner

Żaden automatyczny test w naszym skanie nie rozstrzyga tego kryterium, bo to, czy nagłówek opisuje swoją sekcję, trzeba przeczytać. Pokrewne błędy są zgłaszane gdzie indziej: pominięty poziom nagłówka i brak h1 przy 1.3.1, pole bez etykiety przy 1.3.1, kontrolka bez nazwy dostępnej przy 4.1.2. Test HTML_CodeSniffer dla 2.4.6 zgłasza tylko uwagę, którą skan odrzuca. Nagłówki i etykiety czyta człowiek w audycie ręcznym.