blog na temat dostępności stron internetowych

Przejdź do głównej treści

Główne zasady stosowania nagłówków

W poprzednim artykule (“Elementy nagłówkowe a dostępność“) opisałam pokrótce czym są nagłówki i dlaczego są one istotne z punktu widzenia dostępności. Skoro znamy już podstawy, czas przejść do konkretów: w tym artykule przedstawię najważniejsze reguły, jakich należy przestrzegać tworząc strukturę nagłówków w dokumencie HTML.

Nagłówek poziomu pierwszego powinien określać temat strony

Każdy dokument HTML powinien zawierać nagłówek <h1>, opisujący treść tego dokumentu.
W odróżnieniu od poprzednich wersji HTML, dokument HTML5 może zawierać więcej niż jeden element <h1>. Trzeba jednak pamiętać, że dodatkowe nagłówki poziomu pierwszego muszą być zawarte w elementach strukturalnych, takich jak <header>, <footer>, <article>, <section>, itp.
Następujący przykład przedstawia zatem prawidłową strukturę dokumentu HTML5:

<body>
  <h1>Prognoza pogody</h1>
  <section>
    <h1>Prognoza na dziś</h1>
    <p>Dzisiaj należy spodziewać się obfitych opadów deszczu.</p>
  </section>
  <section>
    <h1>Prognoza na jutro</h1>
    <p>Jutro będzie słonecznie.</p>
  </section>
</body>

Pomimo tego, że powyższy przykład jest zgodny ze specyfikacją HTML5, zaleca się mimo wszystko stosować tradycyjną hierarchię nagłówków. Czytniki ekranu mają problem z przedstawieniem swoim użytkownikom prawdziwej struktury takiego dokumentu, dlatego lepiej jest oznaczyć go w następujący sposób:

<body>
  <h1>Prognoza pogody</h1>
  <section>
    <h2>Prognoza na dziś</h2>
    <p>Dzisiaj należy spodziewać się obfitych opadów deszczu.</p>
  </section>
  <section>
    <h2>Prognoza na jutro</h2>
    <p>Jutro będzie słonecznie.</p>
  </section>
</body>

Nie nazywaj nagłówkiem coś, co nim nie jest

Elementy nagłówkowe powinny być stosowane tylko i wyłącznie do oznaczenia nagłówków. Wydaje się to oczywiste, a mimo to wielu autorów treści używa ich do oznaczenia fragmentów tekstu, który chcą jedynie wyróżnić wizualnie (nagłówki są automatycznie wyświetlane w powiększonej i pogrubionej czcionce). Jak wiemy HTML powinien być używany wyłącznie do opisania struktury informacji poprzez nadanie semantycznego znaczenia jego poszczególnym elementom; do zmiany prezentacji treści służy CSS.
Poniższy przykład jest zatem niepoprawny:

<h2>Kontakt</h2>
<p>Jeśli potrzebujesz szybkiej porady, zadzwoń pod numer:</p>
<h3>0800 000 000</h3>
<h2>Najnowsze wiadomości</h2<
<p>Tyle się ostatnio działo...</p>

Numer telefonu (“0800 000 000”) nie powininen być oznaczony jako nagłówek, gdyż nim nie jest; nie następuje po nim żadna treść, którą ten fragment tekstu opisuje. Jeśli chcemy wyróżnić numer telefonu wizualnie, musimy użyć do tego CSS, np.:

<h2>Kontakt</h2>
<p>Jeśli potrzebujesz szybkiej porady, zadzwoń pod numer: <span class="numer-tel">0800 000 000</span> </p>
.numer-tel {
  font-size: 1.5em;
  font-weight: bold;
}

Nagłówki muszą być oznaczone przy pomocy elementów nagłówkowych

Jeśli dany fragment treści jest nagłówkiem (stanowi tytuł opisujący treść, która po nim następuje), to powinien być oznaczony jako nagłówek przy użyciu odpowiedniego znacznika HTML. Nie wystarczy wizualne wyróżnienie tego elementu przy pomocy znacznika <strong> bądź też CSS. Poniższy przykład jest zatem niepoprawny:

<strong>Kontakt</strong>
<p>Jeśli potrzebujesz szybkiej porady, zadzwoń pod numer: <span class="numer-tel">0800 000 000</span> </p>

Dla osoby widzącej nie ma znaczenia, jak słowo “Kontakt” zostało oznaczone w HTML (przy użyciu elementu nagłówkowego czy też nie), o ile tylko będzie wyświetlone w sposób, który wyróżni je wizualnie i będzie sugerować, że tekst ten jest nagłówkiem. Dla osób korzystających z czytników ekranu stanowi to jednak fundamentalną różnicę.

Nie omijaj poziomów nagłówków

Nie należy “przeskakiwać” żadnego z poziomów nagłówków. Po każdym z nagłówków można zamieścić jedynie nagłówek na wyższym poziomie, równorzędnym poziomie, badź też na poziomie niższym o 1 (i tylko 1!) stopień. Zatem:

  • po nagłówku <h1> może następować tylko element <h2> (oraz w przypadku HTML5 – <h1>, choć jak pisałam wcześniej nie jest to zalecane)
  • po nagłówku <h2> może następować element <h1>, <h2> lub <h3>
  • po nagłówku <h3> – <h1>, <h2>, <h3> lub <h4>, itd

Niestety często spotyka się następującą strukturę nagłówków:

<h1>Prognoza pogody</h1>
<p>....</p>
<h2>Prognoza na dziś</h2>
<p>....</p>
<h2>Prognoza na najbliższe dni</h2>
<p>....</p>
<h5>Jutro</h5>
<h5>Pojutrze</h5>

Jak widzimy, po nagłówku <h2>“Prognoza na najbliższe dni” nastąpiły nagłówki poziomu piątego. A co się stało z <h3> i <h4>? Taka struktura nagłówków może zdezorientować użytkowników czytnika ekranu. Osoby te mogą nie być pewne, czy sekcje oznaczone nagłówkami <h3> i <h4> nie istnieją, czy też są one niedostępne dla czytników ekranu.

Nagłówki muszą być prawidłowo zagnieżdżone

Należy zawsze upewnić się, że elementy nagłówkowe użyte na stronie są poprawnie zagnieżdżone, czyli że każdy z nagłówków ma nadany poziom, który wiernie oddaje strukturę informacji zawartej w dokumencie HTML. Nieprawidłowa hierarchia nagłówków może diametralnie zmienić znaczenie informacji przedstawionej na stronie z punktu widzenia osób korzystających z czytników ekranu. Widać to na poniższym przykładzie:

<h1>Oferty noclegowe</h1>
  <h2>Pomorze</h2>
    <h3>Gdańsk</h3>
    <h3>Sopot</h3>
    <h3>Szczecin</h3>
    <h3>Kraków</h3>
  <h2>Warszawa</h2>

Na pierwszy rzut oka kod ten wydaje się prawidłowy. Ale każdy, kto zna choć trochę geografię Polski (no i podstawy HTML) zauważy tu poważny błąd. Oznaczając “Kraków” przy pomocy elementu <h3> zamieściliśmy go w sekcji opisanej nagłówkiem “Pomorze”, a tym samym przenieśliśmy kilkaset kilometrów na północ…

Treść nagłówków powinna być jasna i zwięzła

Tekst zawarty w elemencie nagłówkowym powinien krótko i klarownie opisywać treść, która po nim następuje; pomoże to użytkownikom szybko przejrzeć treść strony i ułatwi znalezienie poszukiwanej informacji. Należy unikać slangu i metafor; niektórzy użytkownicy mogą mieć problem z ich zrozumieniem.

Każda sekcja powinna być opisana nagłówkiem

Każdy logicznie odrębny fragment treści powinien mieć nagłówek. Pomoże to użytkownikom (zwłaszcza osobom korzystających z czytnika ekranu) szybciej zorientować się w tym, w jaki sposób zorganizowana jest informacja na stronie, a co za tym idzie ułatwi dotarcie do pożądanej informacji. Gdyby ten oto artykuł nie był podzielony nagłówkami na odrębne sekcje, przebrnięcie przez niego byłoby dla większości osób znacznie trudniejsze.

Co dalej?

Stworzenie poprawnej struktury nagłówków w szablonach stron niestety nie wystarczy. Należy także upewnić się, że osoby, które na codzień zajmują się edycją tych stron, będą w stanie oznaczyć zamieszczaną treść przy użyciu elementów nagłówkowych, oraz że osoby te rozumieją, na czym polega poprawne ich stosowanie. Choć edytory systemów zarządzania treścią pozwalają zazwyczaj na oznaczanie tekstu przy pomocy podstawowych elementów HTML, autorzy treści (którzy nie muszą przecież znać języka HTML), często nie rozumieją, do czego one służą, jak należy poprawnie je stosować i dlaczego jest to istotne. Dlatego równie ważne jest zapewnienie podstawowego szkolenia osobom zajmującym się edycją stron.

Dodaj komentarz

Należy wypełnić wszystkie pola oznaczone asteryskiem (*).
Zanim komentarz zostanie opublikowany będzie musiał zostać zatwierdzony przez moderatora.

Możesz wykorzystać następujące elementy HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>