Wróć do wszystkich kryteriów

2.4.6 Nagłówki i etykiety (ang.) Headings and Labels

Specjalizacje:

  • Content Creator
  • Designer
  • Deweloper

Elementy:

  • Formularze
  • Nagłówki i struktura
  • Przyciski i kontrolki

Poziomy:

  • AA

Spis treści

    Istota i cel kryterium

    Głównym założeniem tej wytycznej jest zagwarantowanie, że wszystkie wprowadzone na stronie nagłówki oraz etykiety będą precyzyjnie opisywać temat lub cel zawartości, którą otwierają bądź reprezentują.

    Dzięki temu użytkownicy mogą bez trudu zorientować się w ogólnej strukturze całego serwisu, sprawnie po nim nawigować oraz bezbłędnie rozpoznawać poszczególne sekcje i elementy sterujące interfejsu.

    Poprawne i świadome stosowanie tych komponentów eliminuje chaos informacyjny, ułatwiając komunikację z technologiami asystującymi.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#headings-and-labels

    Definicja w j. polskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/Translations/WCAG21-pl/#nag-owki-i-etykiety

    Słownik pojęć

    Nagłówek (ang.) heading
    –

    element strukturalny w kodzie strony (od <h1> do <h6>), który zarówno wizualnie, jak i programistycznie zapowiada treść znajdującą się w danej sekcji.

    Etykieta (ang.) label
    –

    zwięzły komunikat tekstowy jednoznacznie definiujący przeznaczenie pojedynczego pola, trwale powiązany z nim bezpośrednio w strukturze kodu.

    Wpływ na dostępność (Kogo wspierasz?)

    • Użytkownicy czytników ekranu: Pamiętaj, że dla osób niewidomych dobrze skonstruowane nagłówki pełnią funkcję w pełni interaktywnego spisu treści. Umożliwiają one błyskawiczne przeskakiwanie pomiędzy obszarami layoutu bez konieczności czasochłonnego odsłuchiwania całej strony od góry do dołu. Z kolei opisowe etykiety precyzyjnie informują o roli kontrolek formularza w momencie, gdy są one odczytywane poza kontekstem wizualnym.
    • Osoby z niepełnosprawnościami poznawczymi oraz zaburzeniami pamięci krótkotrwałej: Jasne i zrozumiałe opisy oraz tytuły sekcji pozwalają łatwo przewidzieć, co znajduje się w danym bloku tekstu. Drastycznie zmniejsza to codzienne obciążenie poznawcze i pomaga utrzymać skupienie na kluczowych informacjach.
    • Osoby z ograniczeniami motorycznymi: Logiczne i przewidywalne podpisy komponentów ułatwiają bezbłędną nawigację za pomocą samej klawiatury lub zaawansowanego sterowania głosowego. Pozwala to na precyzyjne wywoływanie konkretnych akcji i redukuje liczbę zbędnych operacji.

    Zasady wdrażania i wymagania techniczne

    Aby w pełni zrealizować to kryterium, musisz zadbać o to, by treść każdego nagłówka oraz każdej etykiety precyzyjnie i wiernie odzwierciedlała temat sekcji lub cel elementu interaktywnego.

    Zwróć szczególną uwagę na techniczną i merytoryczną korelację z innymi wytycznymi WCAG, ponieważ samo sformułowanie dobrego tekstu nie gwarantuje sukcesu na innych polach:

    • Relacja z Kryterium 1.3.1 (Info and Relationships): Możliwe jest pełne spełnienie kryterium 2.4.6 (tekst nagłówka idealnie opisuje sekcję), ale jednoczesne złamanie wytycznej 1.3.1, jeśli dany nagłówek nie został poprawnie wdrożony w kodzie HTML (np. zamiast natywnego tagu <h2> użyto pogrubionego i powiększonego elementu <div>). Sytuacja działa też w drugą stronę: semantycznie poprawny znacznik <h3>, który zawiera zupełnie niejasny lub pusty tekst (np. „Sekcja X”), zaliczy test 1.3.1, ale jednoznacznie obleje kryterium 2.4.6.
    • Relacja z Kryterium 4.1.2 (Name, Role, Value): Elementy formularza lub komponenty mogą posiadać techniczną nazwę dostępną programowo (np. poprzez niewidoczny dla oka atrybut aria-label="Wyszukaj w bazie wiedzy"), co pozwala zaliczyć kryterium 4.1.2. Jeśli jednak widoczna na ekranie etykieta tekstowa dla użytkowników jest całkowicie niejasna, chaotyczna lub błędna, element ten wciąż narusza wytyczną 2.4.6.
    • Wymagania dla nagłówków: Tekst umieszczony w tagach nagłówkowych (<h1>–<h6>) musi dawać jasny i jednoznaczny obraz tego, co znajduje się w treści poniżej. Porzuć metafory, poetyckie tytuły i nic niemówiące zwroty.
    • Wymagania dla etykiet: Każde pole wejściowe powinno posiadać podpis precyzyjnie określający rodzaj i format oczekiwanych danych (np. „Twój adres e-mail”, „Wpisz hasło (minimum 8 znaków)”).

    Wyjątki i sytuacje szczególne

    Pamiętaj o fundamentalnej zasadzie: to kryterium sukcesu nie nakłada na Ciebie obowiązku tworzenia ani przymusowego umieszczania nagłówków czy etykiet na stronie internetowej.

    Opisywana reguła określa wyłącznie warunek jakościowy o charakterze warunkowym: jeśli nagłówki lub etykiety zostały już przez Ciebie wprowadzone w projekcie (bądź ich obecność wymuszają inne niezależne wytyczne, np. kryterium 3.3.2 w kontekście formularzy), to ich treść musi w sposób jasny, dokładny i niebudzący wątpliwości opisywać swój cel lub temat.

    Warto również pamiętać o elementach graficznych wykorzystywanych w roli etykiet (np. ikony interfejsu). Ten sam obraz może być interpretowany w różny sposób w zależności od miejsca jego występowania, jednak zostanie uznany za w pełni opisowy i poprawny, o ile jego znaczenie w danym kontekście jest powszechnie i jednoznacznie zrozumiałe dla docelowych użytkowników (np. ikona koła zębatego jednoznacznie zapowiadająca sekcję ustawień konta).

    Przykłady implementacji

    Najczęstsze błędy

    • Stosowanie zbyt ogólnych tekstów nagłówków, które nie dają użytkownikowi żadnego pojęcia o zawartości sekcji (np. „Więcej”, „Tekst”, „Informacje”, „Sekcja 2”).
    • Wdrażanie etykiet w formularzach, które są nieprecyzyjne lub wprowadzają w błąd odnośnie rzeczywistych intencji systemu (np. etykieta „Wpisz dane” dla pola, które wymaga wprowadzenia wyłącznie 11-cyfrowego numeru PESEL).
    • Używanie identycznych tekstów nagłówków na tej samej stronie internetowej dla sekcji, które poruszają zupełnie odmienne tematy, co wywołuje ogromny chaos podczas nawigacji czytnikiem ekranu.
    • Pomijanie unikalnych, różnicujących informacji na samym początku nagłówków w rozbudowanych strukturach dokumentów (np. nazywanie kolejnych bloków: „Raport roczny – sekcja finansowa”, „Raport roczny – sekcja kadrowa” zamiast znacznie czytelniejszego: „Finanse – Raport roczny”, „Kadry – Raport roczny”).
    • Ważna uwaga techniczna: Całkowity brak powiązania etykiety z kontrolką (brak tagu <label>) lub całkowity brak znaczników nagłówkowych, choć formalnie stanowi bezpośrednie złamanie kryteriów 1.3.1 oraz 3.3.2, uniemożliwia dostarczenie opisowej treści, generując automatyczne uchybienie w obszarze intencji kryterium 2.4.6.

    Najlepsze praktyki

    • Pozycjonuj unikalne informacje na początku: Formułuj nagłówki w taki sposób, aby najważniejsze słowa kluczowe znajdowały się na samym początku frazy. Przyspiesza to skanowanie wzrokowe i skraca czas odsłuchu w technologiach asystujących.
    • Zachowaj maksymalną zwięzłość: Pamiętaj, że opisowość nie oznacza konieczności tworzenia długich zdań. Krótkie, esencjonalne hasło lub pojedyncze słowo jest znacznie łatwiejsze do przyswojenia przez ludzki mózg.
    • Dbaj o absolutną spójność nomenklatury: Stosuj jednolite nazewnictwo w obrębie całego serwisu. Jeśli na jednej podstronie używasz etykiety „Adres e-mail”, nie zmieniaj jej na innej podstronie na „Poczta elektroniczna” lub „E-mail”.
    • Zadbaj o naturalne położenie etykiet: Umieszczaj etykiety tekstowe bezpośrednio nad lub po lewej stronie pól edycyjnych. Jedynym wyjątkiem są pola wyboru (checkbox) oraz pola opcji (radio button), gdzie etykieta powinna naturalnie znajdować się po stronie prawej.

    Metody testowania

    • Narzędzie deweloperskie (ang.) Developer Tools: Otwórz drzewo DOM i dokładnie przeanalizuj strukturę dokumentu. Zweryfikuj, czy nagłówki zachowują ciągłość hierarchiczną oraz czy wszystkie pola formularzy posiadają przypisane unikalne identyfikatory prawidłowo powiązane z etykietami tekstowymi.
    • NVDA: Uruchom czytnik ekranu i wywołaj listę elementów, aby przejrzeć spis nagłówków obecnych na stronie. Następnie przejdź tabulatorem po polach formularza i oceń, czy słyszysz poprawny i w pełni czytelny komunikat opisujący cel każdej kontrolki bez patrzenia na monitor.
    • (ang.) WAVE Evaluation Tool: Wykorzystaj to automatyczne rozszerzenie, aby błyskawicznie wykryć błędy związane z brakiem etykiet dla pól formularzy (komunikat (ang.) Missing form label) lub ewentualne nieprawidłowości w strukturze nagłówków.
    • Testowanie manualne: Przeanalizuj treść pod kątem występowania ogólnikowych linków oraz zweryfikuj, czy treść każdego nagłówka precyzyjnie odpowiada faktycznemu tematowi bloku tekstu, który się pod nim znajduje.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 5 komponentów zawierających nagłówki (tytuły sekcji) oraz formularze z etykietami. Twoim zadaniem jest ocenić, czy tekst użyty w nich jest jasny, zrozumiały i trafnie opisuje to, co się pod nim kryje.

    Jak to sprawdzić?

    1. Czy po przeczytaniu samego nagłówka od razu wiesz, o czym będzie tekst poniżej?
    2. Czy etykiety jasno instruują użytkownika co dokładnie powinien wpisać? (Format, wymogi, precyzyjne polecenie).
    3. Zwróć uwagę na ogólnikowe frazy („Więcej”, „Informacje”, „Wpisz dane”) – często to pułapki dla użytkowników czytników ekranu.
    4. Kluczowe informacje powinny znajdować się na początku frazy, aby przyspieszyć skanowanie wzrokowe.

    Notatka: Zanim zajrzysz do rozwiązania, przetestuj i zapisz swoje wnioski na kartce.
    Proponowane narzędzia: Weryfikacja wizualna / Analiza copywritingu

    Link: https://pdc.ambiscale.com/training/wcag-2-4-6/

    #1 BŁĄD

    Problem: Skrajnie ogólny tytuł „Więcej informacji”.
    Dlaczego: Użytkownik przeglądający stronę przy użyciu czytnika ekranu widzi ten nagłówek w oderwaniu od kontekstu. Nie wie, co znajdzie w sekcji poniżej, przez co może ją po prostu pominąć.
    Naprawa: Zmień nagłówek na opisowy, np. „Raporty finansowe spółki”.

    #2 DOBRZE

    Dlaczego: Programista wzorowo zastosował się do techniki „Front-loading”. Najważniejsze słowo różnicujące obie podstrony („Zarząd”, „Historia”) zostało postawione na samym początku frazy. Nawigowanie czytnikiem ekranu w tym przypadku jest błyskawiczne, a skanowanie wzrokiem nie męczy oka. Gdybyśmy odwrócili kolejność (np. „Informacje o strukturze firmy – Zarząd”), użytkownik traciłby czas, słuchając początku zdania.

    #3 BŁĄD

    Problem: Niejasna etykieta „Wpisz dane”.
    Dlaczego: Sformułowanie jest zaledwie komendą. Nawet jeśli pod spodem drobnym drukiem znajduje się hint, główna etykieta (czytana jako pierwsza przez asystenta) nie precyzuje, jakich danych wymaga formularz. To stwarza ryzyko błędu użytkownika i silne zakłopotanie.
    Naprawa: Główna etykieta musi być jednoznaczna np. „Numer PESEL”. Wskazówka o 11 cyfrach na dole jest świetnym dodatkiem, ale nie zwalnia z obowiązku posiadania dobrej etykiety.

    #4 DOBRZE

    Dlaczego: Etykieta precyzyjnie mówi do czego służy pole kontrolne. Dodatkowo zdefiniowany jasno format „IBAN” w głównej etykiecie nie pozostawia cienia wątpliwości dla wpisującego.

    #5 BŁĄD

    Problem: Zastosowanie identycznych nagłówków („Szczegóły”) dla sekcji poruszających dwa całkowicie różne tematy.
    Dlaczego: Użytkownik niewidomy nawigujący skrótem klawiszowym wyświetla na czytniku ekranu wirtualny „spis treści” złożony z samych nagłówków. Na jego liście pozycje są nierozróżnialne – użytkownik nie wie, która sekcja w głębi dotyczy gwarancji, a która parametrów. Ponieważ tekst nagłówka nie określa unikalnego tematu, nie spełnia kryterium 2.4.6.
    Naprawa: Nadaj precyzyjne i unikalne nagłówki, np. „Gwarancja i reklamacje” dla pierwszej sekcji oraz „Specyfikacja techniczna” dla drugiej.

    Źródła

    Dodatkowe linki

     

     

    Wróć do wszystkich kryteriów