Йерархия на заглавията

Йерархията на заглавията е дисциплината на използване на елементи <h1>–<h6> за изграждане на последователен структурен план на съдържанието на дадена страница. При правилно прилагане тя предоставя на потребителите на екранни четци безплатно съдържание. При неправилно прилагане (пропуснати нива, заглавия само за визуален ефект, множество h1, обикновени div елементи използвани като заглавия) страницата става неразбираема за потребителите на помощни технологии.

Основната структура

<h1>Заглавие на статията (едно на страница)</h1>
  <h2>Основна секция</h2>
    <h3>Подсекция</h3>
    <h3>Подсекция</h3>
  <h2>Основна секция</h2>
    <h3>Подсекция</h3>
      <h4>Подподсекция</h4>

Правилата:

1. Едно <h1> на страница — основното заглавие на страницата. Множество h1 объркват екранните четци относно идентичността на страницата.
2. Без пропускане на нива при слизане надолу. След <h2> може да следва <h3> (едно ниво по-дълбоко), но не и <h4> (две нива по-дълбоко). Пропускането на ниво сигнализира на екранния четец, че нещо е пропуснато по средата.
3. Заглавията отразяват структурата на съдържанието, не визуалното оформление. Ако даден текст изглежда едър, но не е заглавие на ново съдържание, следва да се използва стилизиран параграф, а не заглавие.
4. Без празни заглавия. <h2></h2> е безсмислено. Полето трябва да се попълни или елементът да се премахне.

Защо екранните четци са от значение

Най-честата операция за навигация при екранни четци е „преминаване към следващото заглавие” — клавишът H в JAWS и NVDA, режимът „Headings” на ротора във VoiceOver, контролът за четене на заглавия в TalkBack.

Потребител, отварящ дълга статия, натиска H многократно, за да добие представа за структурата й, преди да прочете каквото и да е от нея. Ако заглавията са кохерентни, потребителят получава безплатен структурен план на материала. Ако заглавията са само за визуален ефект или пропускат нива, потребителят получава шум.

Какво се обърква в реална среда

• Няма <h1>. Страницата няма основно заглавие. Екранните четци обявяват заглавието на страницата от <title>, но навигацията по заглавия в самата страница няма опорна точка. Среща се при слабо структурирани CMS страници, при които заглавието на статията е показано като стилизиран текст, но никога не е маркирано като <h1>.
• Множество <h1>. „Заглавие на хиро секцията” и „заглавие на първата секция” са маркирани едновременно като <h1>. Потребителите на екранни четци чуват две h1 и не могат да разберат кое е заглавието на страницата.
• Пропуснати нива. <h1> → <h3>, тъй като дизайнът не е искал текст с размер <h2>. Навигацията на екранния четец съобщава „липсващо ниво на заглавие”.
• Div елементи, стилизирани като заглавия. <div class="hed-xl">Заглавие на секция</div>. Екранният четец не получава заглавие. Решение: да се използва правилният <hN>, а стилизирането да се извърши с CSS.
• Заглавия, използвани за оформление. Поставяне на <h2> върху етикет на странична лента, за да изглежда като заглавие визуално, но етикетът не е заглавие от гледна точка на съдържанието. Следва да се използва стилизиран параграф.

Как да се извърши одит на йерархията на заглавията

Три подхода:

1. Списък на заглавията в екранен четец. Отваря се Insert+F7 в NVDA или VO+U → Headings. Показаният списък трябва да има смисъл като структурен план на страницата. Ако не е така, маркирането трябва да се коригира.
2. Браузър разширение HeadingsMap. Визуализира структурния план на заглавията на страницата. Нивата и пропуските стават веднага видими.
3. Сканиране с axe-core. Открива липсващ h1, пропуснати нива (при определени конфигурации) и празни заглавия.

Защо едно h1 на страница е дискусионна точка

HTML5 първоначално предполагаше, че вложени <section> елементи създават собствени обхвати на заглавия, позволявайки множество <h1>. Браузърите и екранните четци никога не реализираха това поведение. Работната група по WCAG на W3C се върна към „едно h1 на страница” като оперативно ръководство. Повечето съвременни ръководства за стил и одити на достъпността налагат правилото за едно h1.