Heading hierarchy

Hierarchia nagłówków to dyscyplina polegająca na używaniu elementów <h1>–<h6> do tworzenia spójnego konspektu treści strony. Stosowana prawidłowo daje użytkownikom czytników ekranu darmowy spis treści. Stosowana błędnie — pomijane poziomy, nagłówki tylko dekoracyjne, wiele znaczników h1, divy jako nagłówki — czyni stronę niezrozumiałą dla użytkowników technologii asystujących.

Podstawowa struktura

<h1>Tytuł artykułu (jeden na stronę)</h1>
  <h2>Główna sekcja</h2>
    <h3>Podsekcja</h3>
    <h3>Podsekcja</h3>
  <h2>Główna sekcja</h2>
    <h3>Podsekcja</h3>
      <h4>Podsekcja podsekcji</h4>

Zasady:

1. Jeden <h1> na stronę — główny tytuł strony. Wiele znaczników h1 dezorientuje czytniki ekranu co do tożsamości strony.
2. Nie pomijaj poziomów przy schodzeniu w dół. Po <h2> może następować <h3> (jeden poziom głębiej), ale nie <h4> (dwa poziomy głębiej). Pominięcie poziomu sygnalizuje czytnikowi ekranu, że coś zostało pominięte.
3. Nagłówki odzwierciedlają strukturę treści, nie styl wizualny. Jeśli tekst wygląda jak duży, ale nie jest nagłówkiem nowej treści, użyj stylizowanego akapitu, nie nagłówka.
4. Brak pustych nagłówków. <h2></h2> jest bez znaczenia. Albo go wypełnij, albo usuń.

Dlaczego czytniki ekranu potrzebują nagłówków

Najczęstszą operacją nawigacyjną w czytnikach ekranu jest „skocz do następnego nagłówka” — klawisz H w JAWS i NVDA, tryb „Nagłówki” rotora w VoiceOver, kontrolka nagłówków w TalkBack.

Użytkownik otwierający długi artykuł naciska H wielokrotnie, by poczuć strukturę tekstu przed jego przeczytaniem. Jeśli nagłówki są spójne, dostaje darmowy konspekt. Jeśli są tylko dekoracyjne lub pomijają poziomy, dostaje szum.

Co psuje się w produkcji

• Brak <h1>. Strona nie ma głównego nagłówka. Czytniki ekranu odczytują tytuł strony z <title>, ale nawigacja po nagłówkach wewnątrz strony nie ma kotwicy. Częste na źle zbudowanych stronach CMS, gdzie tytuł artykułu jest narysowany jako stylizowany tekst, ale nigdy nie oznaczony <h1>.
• Wiele <h1>. „Tytuł hero” i „tytuł pierwszej sekcji” oznaczone <h1>. Użytkownicy czytników ekranu słyszą dwa h1 i nie mogą określić, który jest tytułem strony.
• Pomijane poziomy. <h1> → <h3>, bo projekt nie chciał tekstu w rozmiarze <h2>. Nawigacja czytnika ekranu odczytuje „brakujący poziom nagłówka”.
• Divy stylizowane jak nagłówki. <div class="hed-xl">Tytuł sekcji</div>. Czytnik ekranu nie dostaje żadnego nagłówka. Poprawka: użyj właściwego <hN>, stylizuj przez CSS.
• Nagłówki używane do układu. Wstawienie <h2> na etykiecie bocznego paska, by wyglądał jak nagłówek, choć etykieta nie jest nagłówkiem w sensie treści. Użyj stylizowanego akapitu.

Jak audytować hierarchię nagłówków

Trzy podejścia:

1. Lista nagłówków czytnika ekranu. Otwórz Insert+F7 w NVDA lub VO+U → Nagłówki. Wyświetlona lista powinna mieć sens jako konspekt strony. Jeśli nie ma — napraw znaczniki.
2. Rozszerzenie HeadingsMap. Renderuje wizualnie konspekt nagłówków strony. Poziomy i luki są od razu widoczne.
3. Skan axe-core. Wykrywa brakujące h1, pomijane poziomy (w niektórych konfiguracjach) i puste nagłówki.

Dlaczego jeden h1 na stronę jest punktem spornym

HTML5 pierwotnie sugerował, że zagnieżdżone elementy <section> tworzą własne zakresy nagłówków, dopuszczając wiele <h1>. Przeglądarki i czytniki ekranu nigdy nie zaimplementowały tego zachowania. Grupa Robocza WCAG W3C wróciła do zasady „jeden h1 na stronę” jako obowiązujących wytycznych. Większość nowoczesnych przewodników stylu i audytów dostępności egzekwuje regułę jednego h1.