Strona: Nagłówek strony w kontekście WCAG 2.1 / Dostępność / Politechnika Rzeszowska

Nagłówki strony internetowej

red. Piotr Rysz

W skrócie:

  • przygotuj treść strony w oparciu o nagłówki - strona musi zawierać przynajmniej nagłówek pierwszego stopnia (<h1>),
  • stosuj odpowiednie znaczniki HTML - nie należy stosować formatowania nagłówków jedynie za pomocą zwiększania/pogrubiania czcionki itp.,
  • zachowaj właściwą kolejność/hierarchię nagłówków,
  • zadbaj o to, żeby treść nagłówków jasno i jednoznacznie opisywała temat lub cel informacji, którą reprezentują,
  • szczegóły poniżej.

Nagłówek jest podstawowym elementem tworzącym strukturę treści strony internetowej. Za pomocą nagłówków możemy zorganizować treść strony w logiczny sposób oraz ustalić związek pomiędzy jej poszczególnymi częściami.

Zastosowanie nagłówków sprawi, że treść strony będzie lepiej postrzegana przez wszystkich, pozwoli na łatwiejszy odbiór informacji oraz ułatwi nawigację, szczególnie osobom korzystającym z czytnika ekranu.

Samo zastosowanie nagłówków nie jest wystarczające. Należy zadbać o to, żeby ich treść jasno i jednoznacznie opisywała temat lub cel informacji, którą reprezentują.

Jak prawidłowo stosować nagłówki

  • należy zastosować odpowiednie, przeznaczone do tego celu, znaczniki HTML - nie należy stosować formatowania nagłówków jedynie za pomocą zwiększania/pogrubiania czcionki itp.,
  • należy zachować właściwą kolejność/hierarchię nagłówków - kolejne poziomy nagłówków muszą zawsze występować w logicznej kolejności i bez przeskoków między poziomami,
  • strona internetowa musi posiadać nagłówek poziomu pierwszego (<h1>).

HTML

Nagłówki wprowadzamy za pomocą znaczników: <h1>, <h2>, ..., <h6>, np.:

<h1>Nagłówek pierwszego poziomu</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing...</p>
<h2>Nagłówek drugiego poziomu</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing...</p>
<h3>Nagłówek trzeciego poziomu</h3>
...
<h3>Nagłówek trzeciego poziomu</h3>
...

System portalowy

W systemie portalowym nagłówki oznaczamy poprzez zaznaczenie tekstu, na podstawie którego ma zostać zdefiniowany nagłówek. Następnie wybieramy przycisk "Formaty", dalej "Nagłówki" i wskazujemy odpowiedni poziom nagłówka.

Automatyczne generowanie nagłówków w systemie portalowym

W systemie portalowym nagłówki pierwszego i drugiego stopnia generowane są automatycznie:

  • nagłówek pierwszego stopnia na podstawie tytułu strony,
  • nagłówek drugiego stopnia na ogół na podstawie zawartości pola "Nazwa" formularza edycji strony (OPTicms menu Konfiguracja / Zarządzanie stronami).

Również nagłówek trzeciego stopnia zostanie wygenerowany automatycznie, jeżeli przy edycji treści strony zostanie uzupełnione opcjonalne pole "Tytuł" (moduł "Akapity").

W formularzu edycji treści strony przy polach "Tytuł" i "Treść" dodane zostały komentarze informujące jaki poziom nagłówka zostanie zastosowany lub należy zastosować.

Kryteria sukcesu WCAG dla nagłówków

Na podstawie autoryzowanego tłumaczenie na język polski.
Kryteria sukcesu - definicja.

WCAG 2.1, kryterium sukcesu: 1.3.1 Informacje i relacje (poziom A)

Informacje, struktura oraz relacje między treściami przekazywane poprzez prezentację mogą być odczytane przez program komputerowy lub istnieją w postaci tekstu.

WCAG 2.1, kryterium sukcesu: 2.4.6 Nagłówki i etykiety (poziom AA)

Nagłówki i etykiety opisują temat lub cel.

Nasze serwisy używają informacji zapisanych w plikach cookies. Korzystając z serwisu wyrażasz zgodę na używanie plików cookies zgodnie z aktualnymi ustawieniami przeglądarki, które możesz zmienić w dowolnej chwili. Więcej informacji odnośnie plików cookies.

Akceptuję