2.4.6 Nagłówki i etykiety - poziom AA

Nagłówki i etykiety mają opisywać temat lub cel treści, którą poprzedzają albo elementu, którego dotyczą. Dzięki temu użytkownik szybciej rozumie, gdzie jest i co ma zrobić.

O co chodzi w kryterium 2.4.6 Nagłówki i etykiety w praktyce?

To kryterium dotyczy dwóch rzeczy, które bardzo często tworzysz jako redaktor:

1. Nagłówków, czyli tytułów sekcji na stronie (także w artykułach, opisach usług, BIP, regulaminach).
2. Etykiet, czyli opisów pól i kontrolek w formularzach (np. Imię, E-mail, Wybierz temat, Zgadzam się, Szukaj).

Sedno jest proste: nagłówek lub etykieta ma mówić użytkownikowi, czego dotyczy fragment treści lub co trzeba wpisać/wybrać. Jeśli są ogólne albo mylące użytkownik traci orientację i popełnia błędy.

Najczęstsze powody niespełnienia kryterium 2.4.6

Zbyt ogólne nagłówki

Nagłówki są zbyt ogólne i nie mówią, o czym jest sekcja, np. Informacje, Dokumenty, Więcej, Inne. Użytkownik nie wie, co znajdzie po rozwinięciu albo po przejściu dalej.

Nieadekwatne nagłówki

Nagłówki obiecują jedno, a w treści jest coś innego. To szczególnie częste przy kopiowaniu szablonów i przy stronach, gdzie sekcje są przepinane bez aktualizacji tytułów.

Niejasne etykiety

Etykiety pól są niejednoznaczne albo za krótkie, np. Kontakt, Dane, Treść. Użytkownik nie wie, czy ma wpisać e-mail, telefon, czy jedno i drugie.

Błędne etykiety

Etykiety opisują wygląd lub miejsce, zamiast celu, np. Pole po lewej, Wpisz poniżej. To psuje zrozumienie, bo etykieta ma nazywać cel pola.

Jak sprawdzić, czy spełniasz 2.4.6

Przejrzyj nagłówki na stronie i zrób prosty test: czy po samych nagłówkach da się z grubsza zrozumieć, o czym jest strona i gdzie jest potrzebna informacja?

Potem spójrz na formularze: czy po samych etykietach da się poprawnie wypełnić pola bez zgadywania?

Jeśli nie, to najczęściej trzeba doprecyzować nagłówki i etykiety.

Jak spełnić kryterium sukcesu 2.4.6

Nagłówki

W nagłówkach stosuj zasadę: tytuł ma streszczać sekcję jednym konkretem: 

• Zamiast Dokumenty lepiej Dokumenty do pobrania,
• zamiast Informacje lepiej Informacje o zapisach,
• zamiast Oferta lepiej Oferta zajęć na semestr letni.

Dzięki temu użytkownik od razu wie, czy to jest ta sekcja, której szuka.

Etykiety

W formularzach nazywaj pola tak, żeby było jasne, co ma się w nich znaleźć. Jeśli pole ma zebrać e-mail, etykieta powinna to mówić wprost. Jeśli użytkownik ma wybrać temat sprawy, niech etykieta brzmi Temat sprawy, a nie samo Temat.

Jeśli sekcja lub pole ma cel zadaniowy, pokaż ten cel w nagłówku/etykiecie. Przykład: zamiast Dane napisz Dane do kontaktu, zamiast Formularz napisz Zgłoś problem lub Zapisz się na wydarzenie, bo formularze mogą być przeróżne :)

Pełny tekst kryterium 2.4.6 Nagłówki i etykiety

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

Źródło: https://www.w3.org/Translations/WCAG21-pl/#nag-owki-i-etykiety

Chcesz wiedzieć więcej?

• 2.1.1 Klawiatura - poziom A
• 2.1.2 Brak pułapki na klawiaturę - poziom A
• 2.1.3 Klawiatura (bez wyjątków) - poziom AAA
• 2.1.4 Jednoznakowe skróty klawiaturowe - poziom A
• 2.2.1 Dostosowanie czasu - poziom A
• 2.2.2 Pauza, zatrzymanie, ukrycie - poziom A
• 2.2.3 Brak czasu - poziom AAA
• 2.2.4 Przerywanie - poziom AAA
• 2.2.6 Ostrzeżenie o limicie czasu - poziom AAA
• 2.3.1 Trzy błyski lub wartości poniżej progu - poziom A
• 2.3.2 Trzy błyski - poziom AAA
• 2.3.3 Animacja po interakcji (Poziom AAA)
• 2.4.1 Możliwość pominięcia bloków - poziom A
• 2.4.2 Tytuł strony - poziom A
• 2.4.3 Kolejność fokusu - poziom A
• 2.4.4 Cel łącza (w kontekście) - poziom A
• 2.4.5 Wiele dróg - poziom AA
• 2.4.6 Nagłówki i etykiety - poziom AA
• 2.4.7 Widoczny fokus - poziom AA
• 2.4.8 Lokalizacja - poziom AAA
• 2.4.9 Cel łącza (z samego łącza) - poziom AAA
• 2.4.10 Nagłówki sekcji - poziom AAA
• 2.5.1 Gesty wskazujące - poziom A
• 2.5.2 Rezygnacja ze wskazania - poziom A
• 2.5.3 Etykieta w nazwie - poziom A
• 2.5.4 Aktywowanie ruchem - poziom A
• 2.5.5 Rozmiar celu - poziom AAA
• 2.5.6 Równoległy mechanizm wprowadzania danych - poziom AAA