Nagłówki

Nagłówki informują o organizacji treści na stronie. Przeglądarki internetowe, dodatki i wspomagające technologie mogą używać ich do nawigacji w przeglądarce.

Pozycja nagłówka

Nagłówki określamy według ich rangi (lub poziomu). Najważniejsza pozycja ma rangę 1 (<h1>), najmniej ważny nagłówek 6 (<h6>). Nagłówki o równym lub wyższym poziomie zaczynają nową sekcję, nagłówki o niższym poziomie zaczynają nowe podrozdziały, które należą do wyższej sekcji rankingowej. Pomijanie pozycji może być mylące i należy unikać tego tam, gdzie jest to możliwe:  Upewnij się, że <h2> nie jest bezpośrednio przed <h4>. Możesz pominąć szereg, gdy zamykasz podsekcje, na przykład <h2> rozpoczynając nową sekcję, może występować razem z <h4>, gdy zamyka poprzednią sekcję.

Wyjątek dla stałych sekcji strony

W stałych sekcjach strony, na przykład w paskach bocznych, nagłówki nie powinny zmieniać się w zależności od kolejności w obszarze zawartości. W tych wypadkach ważniejsza jest spójność stron. 

Organizuj fragmenty tekstu

W poniższym przykładzie nagłówki służą do porządkowania fragmentów tekstu na stronie, na przykład głównej zawartości:

PRZYKŁAD:

Nagłówki odzwierciedlające organizację strony

Nagłówki są przydatne do etykietowania regionów stron. Użyj aria-labelledby aby powiązać nagłówki z ich obszarem strony, zgodnie z opisem w sekcji Identyfikowanie regionów w tym samouczku. Jeśli nagłówki są widoczne, regiony są łatwe do zidentyfikowania dla wszystkich użytkowników. 

Przypadek 1: Główny nagłówek przed nawigacją 

W tym pierwszym przykładzie nagłówek z pozycją 1 jest pierwszą nagłówkiem dokumentu. Wszystkie inne nagłówki służące do uporządkowania strony (menu nawigacyjne, pasek boczny, stopka) są niższe niż jeden z poziomów, a więc także nagłówek głównej zawartości.

PRZYKŁAD:

Zobacz pełny przykład kodu, aby zobaczyć nagłówki używane w ten sposób.

Przypadek 2: Główny nagłówek po nawigacji

W tym drugim przykładzie nagłówek główny nie jest nazwą lokalną, lecz nagłówkiem treści, który ma rangę 1. Podpozycje w treści są w rangi 2, podobnie jak wszystkie inne nagłówki strukturalne.
PRZYKŁAD:

Powiązane zasoby WCAG 2.0

Te samouczki zapewniają najlepsze praktyczne wskazówki dotyczące wdrażania dostępności w różnych sytuacjach. Na tej stronie zostały połączone następujące kryteria sukcesu WCAG 2.0 i techniki z różnych poziomów zgodności:
Kryteria powodzenia:

• 1.3.1 Informacje i relacje: Informacje, struktura i relacje przekazywane przez prezentację mogą być programowo określone lub dostępne w tekście. (Poziom A) 
• 2.4.1 Bloki obejściowe : mechanizm umożliwia pominięcie bloków treści, które są powtarzane na wielu stronach sieci Web. (Poziom A) 
• 2.4.6 Nagłówki i etykiety: nagłówki i etykiety opisują temat lub cel. (Poziom AA) 
• 2.4.10 Nagłówki sekcji: Nagłówki sekcji służą do porządkowania zawartości . (Poziom AAA) 

Techniki:

• ARIA12: Używanie roli = nagłówek do identyfikacji nagłówków 
• G130: Zapewnienie opisowych nagłówków 
• G141: Organizowanie strony przy użyciu nagłówków 
• H42: Używanie h1-h6 do identyfikacji nagłówków 
• H69: Udostępnianie elementów nagłówkowych na początku każdej sekcji treści 
• H80: Identyfikacja celu łącza przy użyciu tekstu linkującego połączonego z poprzednim elementem nagłówkowym 
• PDF9: Udostępnianie nagłówków przez oznaczanie zawartości tagami nagłówków w dokumentach PDF

Poprzedni: Identyfikowanie regionów
Dalej: Struktura treści

Na podstawie:
https://www.w3.org/WAI/tutorials/page-structure/headings/