2.4.6 Nagłówki i etykiety

Krótko

Nagłówki powinny opisywać temat sekcji. Etykiety powinny opisywać cel pola, przycisku albo kontrolki. Nie muszą być długie, ale muszą być konkretne.

Problem w praktyce

Formularz ma pola „Dane”, „Numer” i „Dokument”. Użytkownik nie wie, czy ma wpisać PESEL, numer sprawy, numer telefonu czy numer faktury. Na stronie są też trzy sekcje „Informacje”, ale każda dotyczy czegoś innego.

2.4.6 nie ocenia technicznej hierarchii nagłówków. To zakres 1.3.1. Tutaj pytanie brzmi: czy nagłówek albo etykieta sensownie opisuje temat lub cel?

Kogo to dotyczy

• Osób korzystających z listy nagłówków w czytniku ekranu.
• Osób przechodzących szybko po formularzu klawiaturą.
• Osób z trudnościami poznawczymi, które potrzebują jasnych nazw pól i sekcji.
• Użytkowników w panelach administracyjnych, sklepach i formularzach urzędowych.

Dobry przykład

• Nagłówek „Dane kontaktowe” zamiast „Informacje”.
• Etykieta „Numer telefonu” zamiast „Numer”.
• Etykieta „Adres e-mail do potwierdzenia rezerwacji” w procesie zapisu.
• Nagłówek „Dokumenty do pobrania” zamiast „Dodatkowe”.

Zły przykład

• Trzy nagłówki „Ważne” na jednej stronie.
• Pole formularza nazwane „Dane”.
• Przycisk „OK” w miejscu, gdzie skutkiem jest usunięcie konta.
• Sekcja „Dokumenty”, która zawiera ustawienia powiadomień.

Przykłady kodu

<label for="case-number">Numer sprawy</label>
<input id="case-number" name="case-number">

<label for="number">Numer</label>
<input id="number" name="number">

<section>
  <h2>Dokumenty do pobrania</h2>
  <ul>
    <li><a href="/faktura.pdf">Faktura PDF</a></li>
  </ul>
</section>

Przykład graficzny

Jak sprawdzić

1. Przejrzyj listę nagłówków i sprawdź, czy każdy zapowiada temat sekcji.
2. Przejdź formularze i sprawdź, czy etykiety mówią, co wpisać albo wybrać.
3. Wyszukaj etykiety typu „Dane”, „Numer”, „Dokument”, „Inne”, „Dodatkowe”.
4. Sprawdź przyciski o nazwach „OK”, „Dalej”, „Zatwierdź” w miejscach z poważnym skutkiem.

Co sprawdzi automat, a czego nie

Automat może wykryć

• brak etykiety technicznej przy polu,
• puste nagłówki,
• część zduplikowanych nagłówków.

Automat nie oceni pewnie

• czy nagłówek dobrze opisuje treść,
• czy etykieta jest wystarczająco konkretna,
• czy nazwa przycisku jasno pokazuje skutek.

Typowe błędy

• Nagłówki „Informacje”, „Ważne”, „Dodatkowe” bez kontekstu.
• Etykiety pól z jednym ogólnym słowem.
• Przyciski „OK” dla różnych akcji.
• Nagłówek niezgodny z treścią sekcji.

Powiązane kryteria

• 1.3.1 Informacje i relacje: gdy trzeba sprawdzić techniczną strukturę nagłówków i etykiet.
• 3.3.2 Etykiety lub instrukcje: gdy formularz potrzebuje etykiet albo instrukcji.
• 2.4.4 Cel linku w kontekście: gdy opisowość dotyczy linków.

Źródła

• WCAG 2.2: 2.4.6 Headings and Labels (otwiera się w nowym oknie)
• Understanding WCAG 2.4.6: Headings and Labels (otwiera się w nowym oknie)
• How to Meet WCAG 2.4.6: Headings and Labels (otwiera się w nowym oknie)
• G130: Providing descriptive headings (otwiera się w nowym oknie)
• G131: Providing descriptive labels (otwiera się w nowym oknie)