Nagłówki sekcji
Treść organizuje się za pomocą nagłówków. Tam gdzie strona zawiera wyodrębnione sekcje, każda z nich wymaga prawdziwego elementu nagłówka (`<h1>`–`<h6>`) — nie stylizowanych akapitów imitujących nagłówki.
Co wymaga kryterium
Gdy strona jest podzielona na sekcje, każda z nich musi posiadać programowy nagłówek. Kryterium nie wymaga, by każda strona była podzielona na sekcje — krótkie strony jednocelowe (ekran logowania) są dopuszczalne bez podnagłówków. Tam jednak, gdzie sekcje istnieją, wymagają prawdziwego znacznika <h1>–<h6>, aby technologie wspomagające mogły zbudować konspekt nagłówków.
Kryterium należy do poziomu AAA, lecz leżąca u jego podstaw praktyka — stosowanie prawdziwych nagłówków — jest też wymagana przez 1.3.1 (Informacje i relacje) na poziomie A, więc większość dostępnych stron spełnia je mimochodem.
Jak spełnić wymaganie
- Używaj
<h1>dla tytułu strony (raz na stronę) i schodź przez<h2>,<h3>dla zagnieżdżonych sekcji bez pomijania poziomów. - Zastąp
<div class="heading">i stylizowane<p>„nagłówki” prawdziwymi tagami nagłówkowymi. - Każdą wyodrębnioną sekcję długiej treści (artykuł, strona dokumentacji, panel ustawień z zakładkami) rozpocznij nagłówkiem.
- W komponentach kart działających jako zbiory podobnych sekcji każdej karcie nadaj nagłówek na odpowiednim poziomie.
- Sprawdź konspekt nagłówków za pomocą algorytmu konspektu HTML5 (axe DevTools, rozszerzenie headingsMap, walidator W3C).
Typowe błędy
- Pogrubione akapity udające nagłówki — przekonujące wizualnie, niewidoczne na liście nagłówków czytnika ekranu.
- Pomijane poziomy nagłówków (
<h1>przeskakuje do<h4>), bo zespół CMS dobierał poziomy według rozmiaru czcionki, a nie hierarchii. - Wiele elementów
<h1>na jednej stronie (dopuszczalne w konspekcie HTML5, ale psuje nawigację w większości technologii wspomagających). - Każda sekcja oznaczona
<h2>niezależnie od głębokości zagnieżdżenia, co spłaszcza konspekt. - Tekst hero oznaczony
<h1>, podczas gdy właściwy tytuł strony jest poniżej jako<h2>.
Dlaczego to ważne
Dla użytkowników czytników ekranu konspekt nagłówków jest spisem treści. JAWS i NVDA udostępniają go w oknie dialogowym (Insert+F6 w JAWS); VoiceOver wyświetla go w rotorze. Strona bez nagłówków lub z nagłówkami stosowanymi wyłącznie dla podkreślenia wizualnego zmusza tych użytkowników do przewijania wiersz po wierszu. Nawet przy zobowiązaniu tylko do poziomu AA traktowanie nagłówków sekcji jako podstawowej reguły redakcyjnej opłaca się z punktu widzenia SEO, wielokrotnego użycia treści i wygody redaktorów.