WCAG 2.4.6: Nagłówki i etykiety

Nagłówki i etykiety (WCAG 2.0/2.1 Poziom AA, 2.4.6)

Kryterium sukcesu 2.4.6 „Nagłówki i etykiety” WCAG 2.0/2.1 na poziomie AA wymaga, aby nagłówki i etykiety opisywały temat lub cel treści, którą wprowadzają. Celem tego kryterium jest ułatwienie użytkownikom zrozumienia struktury strony, nawigacji po niej oraz identyfikacji konkretnych sekcji i elementów sterujących. Poprawne stosowanie nagłówków i etykiet jest kluczowe dla zapewnienia dostępności, szczególnie dla osób korzystających z technologii wspomagających.

Dlaczego to jest ważne?

Dostępne i opisowe nagłówki oraz etykiety mają ogromne znaczenie dla szerokiej grupy użytkowników:

• Użytkownicy czytników ekranu: Nagłówki służą jako swoisty spis treści, umożliwiając szybką nawigację pomiędzy sekcjami strony. Etykiety informują o celu pól formularzy, przycisków czy innych elementów interaktywnych. Bez nich nawigacja staje się chaotyczna i czasochłonna.
• Osoby z niepełnosprawnościami poznawczymi: Jasne i zrozumiałe nagłówki oraz etykiety pomagają w zrozumieniu struktury i kontekstu treści, zmniejszając obciążenie poznawcze i ułatwiając skupienie się na istotnych informacjach.
• Osoby z ograniczonym wzrokiem: Powiększona czcionka w nagłówkach i etykietach, w połączeniu z ich opisowością, ułatwia szybkie skanowanie strony i znajdowanie poszukiwanych informacji.
• Osoby z niepełnosprawnościami ruchowymi: Spójne i logiczne etykiety dla elementów interaktywnych ułatwiają nawigację za pomocą klawiatury lub innych urządzeń wskazujących, redukując liczbę niezbędnych operacji.
• Wszyscy użytkownicy: Dobre nagłówki i etykiety poprawiają ogólną użyteczność strony, pomagając każdemu szybko znaleźć to, czego szuka.

Wymagania kryterium sukcesu 2.4.6

Oficjalne sformułowanie kryterium sukcesu 2.4.6 WCAG 2.0 (i 2.1) to:

2.4.6 Nagłówki i Etykiety (Poziom AA): Nagłówki i etykiety opisywały temat lub cel treści, którą wprowadzają.

Oznacza to, że każdy nagłówek (np. <h1> do <h6>) powinien jasno określać treść sekcji, którą poprzedza, a każda etykieta (np. <label> dla pól formularza, tekst przycisku, tekst linku) powinna jasno wskazywać cel lub funkcję elementu, do którego się odnosi.

Jak spełnić kryterium 2.4.6 – Praktyczne wytyczne

Dla nagłówków:

• Używaj semantycznych elementów nagłówkowych: Zawsze stosuj odpowiednie znaczniki <h1>, <h2>, <h3> itd. do strukturyzacji treści. Nie używaj stylów CSS do imitowania nagłówków.
• Zachowaj logiczną hierarchię: Struktura nagłówków powinna odzwierciedlać logiczny podział treści. Zaczynaj od <h1> dla głównego tytułu strony (lub głównej sekcji), a następnie używaj <h2> dla głównych sekcji, <h3> dla podsekcji itd., bez pomijania poziomów (np. nie przechodź z <h2> bezpośrednio do <h4>).
• Bądź opisowy i znaczący: Tekst nagłówka powinien precyzyjnie informować o tym, co znajduje się w sekcji, którą poprzedza. Unikaj ogólnikowych sformułowań.
• Jeden <h1> na stronę (lub główny obszar): Ogólną dobrą praktyką jest posiadanie tylko jednego <h1> na stronę, reprezentującego główny temat lub tytuł strony.

Dla etykiet:

• Zawsze łącz etykiety z kontrolkami formularzy: Używaj elementu <label> z atrybutem for, który odnosi się do id kontrolki formularza (<input>, <textarea>, <select>). Alternatywnie, umieść kontrolkę wewnątrz <label>.
• Bądź konkretny w tekście etykiety: Etykieta powinna jasno określać, jakie dane należy wprowadzić lub jaka jest funkcja kontrolki. Na przykład, zamiast „Wpisz tutaj”, użyj „Twoje imię i nazwisko”.
• Dla niestandardowych elementów interaktywnych: Używaj atrybutów WAI-ARIA, takich jak aria-labelledby (odwołuje się do istniejącego elementu z tekstem) lub aria-label (bezpośrednio dostarcza tekst etykiety), aby zapewnić dostępną nazwę dla elementów, które nie są natywnymi kontrolkami formularzy (np. niestandardowe przyciski, przełączniki).
• Opisowe linki i przyciski: Tekst linku lub przycisku powinien być zrozumiały poza kontekstem. Zamiast „Kliknij tutaj” czy „Więcej”, użyj „Czytaj więcej o polityce prywatności” lub „Pobierz raport roczny (PDF)”.
• Instrukcje i wskazówki: Jeśli pole formularza wymaga specjalnego formatu lub ma ograniczenia, dodaj jasne instrukcje obok etykiety (lub za pomocą aria-describedby).

Przykłady implementacji

Prawidłowe nagłówki

<!DOCTYPE html>
<html lang="pl">
<head>
    <title>Nasza firma - O nas</title>
</head>
<body>
    <h1>O nas</h1>
    <p>Jesteśmy wiodącym dostawcą rozwiązań technologicznych.</p>

    <h2>Nasza misja</h2>
    <p>Naszą misją jest...</p>

    <h2>Nasza historia</h2>
    <p>Firma została założona w 2000 roku.</p>

    <h3>Pierwsze lata (2000-2005)</h3>
    <p>W początkowym okresie skupialiśmy się na...</p>

    <h3>Rozwój i ekspansja (2006-obecnie)</h3>
    <p>Od 2006 roku dynamicznie się rozwijamy...</p>
</body>
</html>

Wyjaśnienie: Struktura nagłówków jest logiczna i hierarchiczna. <h1> dla głównego tematu, <h2> dla głównych sekcji, a <h3> dla podsekcji <h2>. Każdy nagłówek jasno opisuje treść sekcji.

Nieprawidłowe nagłówki

<!DOCTYPE html>
<html lang="pl">
<head>
    <title>Nasza firma - O nas</title>
</head>
<body>
    <p style="font-size: 2em; font-weight: bold;">O nas</p>
    <p>Jesteśmy wiodącym dostawcą rozwiązań technologicznych.</p>

    <h4>Nasza misja</h4> <!-- Pominięto h2 i h3 -->
    <p>Naszą misją jest...</p>

    <h2>Więcej informacji</h2> <!-- Nagłówek jest zbyt ogólny -->
    <p>Firma została założona w 2000 roku.</p>
</body>
</html>

Wyjaśnienie: Pierwszy „nagłówek” jest stylizowany tylko za pomocą CSS, co sprawia, że czytniki ekranu nie rozpoznają go jako nagłówka. Kolejny nagłówek (<h4>) pomija poziomy hierarchii (brakuje <h2> i <h3>), co dezorientuje użytkowników czytników ekranu. Nagłówek „Więcej informacji” jest zbyt ogólnikowy.

Prawidłowe etykiety

<!DOCTYPE html>
<html lang="pl">
<body>
    <form>
        <label for="imie">Imię:</label>
        <input type="text" id="imie" name="imie" required>
        <br>

        <label for="wiadomosc">Twoja wiadomość (maks. 500 znaków):</label>
        <textarea id="wiadomosc" name="wiadomosc" rows="5" cols="30" maxlength="500"></textarea>
        <br>

        <div role="group" aria-labelledby="newsletter-heading">
            <h3 id="newsletter-heading">Zapisz się do newslettera</h3>
            <input type="checkbox" id="newsletter" name="newsletter">
            <label for="newsletter">Chcę otrzymywać informacje o promocjach.</label>
        </div>

        <button type="submit">Wyślij formularz</button>
    </form>

    <p>
        Aby dowiedzieć się więcej, <a href="/kontakt">skontaktuj się z nami</a>.
    </p>
</body>
</html>

Wyjaśnienie: Każde pole formularza ma przypisaną etykietę <label>, która jasno opisuje jego cel. Grupa pól dla newslettera używa aria-labelledby, aby powiązać nagłówek z grupą. Tekst przycisku i linku jest opisowy i zrozumiały poza kontekstem.

Nieprawidłowe etykiety

<!DOCTYPE html>
<html lang="pl">
<body>
    <form>
        <input type="text" id="imie" name="imie" placeholder="Wpisz swoje imię"> <!-- Brak label -->
        <br>

        <span>Wiadomość:</span><br> <!-- Brak powiązania z textarea -->
        <textarea id="wiadomosc" name="wiadomosc" rows="5" cols="30"></textarea>
        <br>

        <button type="submit">OK</button> <!-- Brak opisowego tekstu -->
    </form>

    <p>
        <a href="/galeria">Kliknij tutaj</a> aby zobaczyć zdjęcia. <!-- Tekst linku jest nieopisowy -->
    </p>
</body>
</html>

Wyjaśnienie: Pierwsze pole tekstowe używa tylko atrybutu placeholder, który znika po wpisaniu tekstu i nie jest dostępny dla czytników ekranu jako etykieta. Tekst „Wiadomość:” to zwykły <span>, który nie jest programowo połączony z <textarea>. Przycisk „OK” nie informuje o tym, co zostanie wykonane. Link „Kliknij tutaj” jest nieopisowy i nie informuje, dokąd prowadzi bez czytania otaczającego tekstu.

Najlepsze praktyki i typowe pułapki

Najlepsze praktyki:

• Planuj strukturę treści: Przed rozpoczęciem kodowania, zaplanuj logiczną hierarchię nagłówków i strukturę formularzy.
• Testuj z czytnikami ekranu: Regularnie testuj swoją stronę za pomocą popularnych czytników ekranu (np. NVDA, JAWS, VoiceOver), aby upewnić się, że nagłówki i etykiety są poprawnie interpretowane.
• Zachowaj spójność: Używaj spójnego języka i terminologii w nagłówkach i etykietach na całej stronie.
• Etykiety przed polami formularzy: Zazwyczaj etykiety umieszcza się przed polami formularzy (lub nad nimi) dla lepszej czytelności i dostępności.
• Pola wymagane: Wyraźnie oznaczaj pola wymagane (np. za pomocą tekstu „(wymagane)” lub symbolu * oraz atrybutu required).

Typowe pułapki:

• Używanie tagów nagłówkowych do stylizacji: Stosowanie <h1>–<h6> tylko dla większej czcionki, bez uwzględnienia ich semantyki.
• Pominięcie etykiet dla pól formularzy: Zamiast tego poleganie na atrybucie placeholder lub wizualnym umieszczeniu tekstu obok pola.
• Niespójna hierarchia nagłówków: Przechodzenie z <h2> do <h4> bez użycia <h3>.
• Generyczne nagłówki i etykiety: Używanie sformułowań takich jak „Sekcja 1”, „Element” lub „Prześlij” bez dodatkowego kontekstu.
• Niewystarczające etykiety dla linków i przycisków: Używanie „Kliknij tutaj”, „Więcej” zamiast opisowego tekstu.
• Używanie atrybutu title jako zamiennika <label>: Atrybut title nie jest odpowiednim zamiennikiem dla <label> dla dostępności.

Zasoby dodatkowe

• Understanding Success Criterion 2.4.6: Headings and Labels (W3C)
• WCAG 2.1 Success Criterion 2.4.6: Headings and Labels