blog na temat dostępności stron internetowych

Przejdź do głównej treści

Elementy nagłówkowe a dostępność

Pierwszy z artykułów opisujących znaczniki HTML i ich prawidłowe zastosowanie postanowiłam poświęcić nagłówkom. Po pierwsze dlatego, że są one jednym z podstawowych elementów tworzących strukturę dokumentu HTML; stanowią część “szkieletu” strony internetowej. Po drugie dlatego, że nagłówki często wykorzystywane są przez osoby niewidome do nawigacji, a zatem szczególnie w tę grupę użytkowników uderza nieprawidłowa struktura nagłówków. A w końcu dlatego, że na większości sprawdzanych przeze mnie w trakcie audytów stron nagłówki są oznaczone nieprawidłowo.

Rola nagłówków

Element nagłówkowy ma na celu opisać temat treści, która po nim następuje. Nagłówki stanowią tytuły sekcji i podsekcji, dzielą treść strony na mniejsze części, pozwalając tym samym na łatwiejsze “skanowanie” strony w celu szybkiego odnalezienia poszukiwanej informacji. Nagłówki pomagają zatem w logiczny sposób zorganizować treść danej strony i określić związki pomiędzy jej poszczególnymi częściami.

Elementy nagłówkowe w HTML

W języku HTML istnieje sześć stopni nagłówków: <h1>, <h2>, <h3>, <h4>, <h5> i <h6>.
Element <h1> używany jest do oznaczenia głównego nagłówka strony, który powinien opisywać jej temat. W dokumencie HTML5 element <h1> może być również używany do oznaczania głównych nagłówków poszczególnych sekcji (elementów strukturalnych, takich jak <section> czy <article>).
Nagłówek <h2> powinien być stosowany do opisania treści fragmentu strony, który należy do sekcji opisanej poprzednim nagłówkiem <h1>, ale stanowi odrębną całość. Innymi słowy <h2> jest podtytułem zawartym w sekcji opisanej przez poprzedzający ją nagłówek <h1>.

Strukturę nagłówków stron internetowych można porównać do struktury tytułów rozdziałów w książce.
Wyobraźmy, że jeden z rozdziałów książki podróżniczej opisuje wakacje w Hiszpanii i jest podzielony na podrozdziały w następujacy sposób:

  1. Wakacje w Hiszpanii
    1. Hiszpania kontynentalna
      1. Katalonia
        1. Weekend w Barcelonie
        2. Najpiękniejsze miasteczka w okolicach Barcelony
      2. Madryt
    2. Baleary
      1. Majorka
      2. Ibiza

Jeśli treść tego rozdziału miałaby być przedstawiona na stronie internetowej, to struktura nagłówków tej strony powinna wyglądać następująco:

<h1>Wakacje w Hiszpanii</h1>
  <h2>Hiszpania kontynentalna</h2>
    <h3>Katalonia</h3>
      <h4>Weekend w Barcelonie</h4>
      <h4>Najpiękniejsze miasteczka w okolicach Barcelony</h4>
    <h3>Madryt</h3>
  <h2>Baleary</h2>
    <h3>Majorka</h3>
    <h3>Ibiza</h3>

Z powyższego przykładu jasno wynika, że poziom nagłówków i to, jak są zagnieżdżone, jest bardzo istotny dla prawidłowego przedstawienia treści zamieszczonej na stronie. Na przykład, jeśli nagłówek “Madryt” zostałby oznaczony przy pomocy znacznika <h4>, sugerowałoby to, że Madryt należy do Katalonii (a tak nie jest). Jak widzimy więc używanie właściwej struktury nagłówków jest istotne dla ukazania prawdziwej struktury dokumentu i przekazania zależności pomiędzy jego poszczególnymi częściami.

W jaki sposób osoby niewidome używają nagłówki do nawigacji?

Czytniki ekranu oferują różnego rodzaju skróty klawiszowe, które umożliwiają użytkownikom poruszanie się po stronie przy użyciu elementów HTML. Jednym z podstawowych i najczęściej używanych skrótów jest ‘H’; naciśnięcie tego klawisza powoduje przeskoczenie tzw. wirtualnego kursora do kolejnego nagłówka. A zatem, jeśli użytkownik czytnika ekranu znajduje się na przykład w sekcji tej strony opisanej nagłówkiem “Rola nagłówków”, naciśnięcie klawisza ‘H’ spowoduje przejście do “Elementy nagłówkowe w HTML” (czytnik ekranu poda również poziom tego nagłówka, np. “Elementy nagłówkowe w HTML, nagłówek drugiego poziomu”).

W ankiecie przeprowadzonej przez Webaim w maju 2012r. 82% użytkowników czytników ekranu powiedziało, że poziomy nagłówków są dla nich przydatne, kiedy poruszają się po stronie używając klawisza ‘H’. W kolejnej ankiecie, przeprowadzonej w lutym 2014r., 65% użytkowników zadeklarowało, że gdy szukają informacji na stronie internetowej, w pierwszej kolejności korzystają z nawigacji przy użyciu nagłówków.

To tyle tytułem wstępu

W kolejnym artykule postaram się szczegółowo opisać podstawowe zasady prawidłowego stosowania elementów nagłówkowych.

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>