Стандарти · ARIA

Роля Структура на документа

heading

Маркира елемент като заглавие. Първо се използват <h1>–<h6> — те носят правилната семантика и правилното ниво безплатно. Към role="heading" се прибягва само когато трябва да се повиши елемент, който не може да бъде <h*>.

Кога да се използва

Винаги се избира <h1> до <h6> на първо място. Нативният елемент за заглавие предоставя ролята, нивото и вградения стил на потребителския агент.

role="heading" е подходящо само когато не може да се използва нативно заглавие — обикновено в ограничена CMS система, която рендира целия текст като <p> или <div>. В такъв случай ТРЯБВА да се зададе aria-level с число от 1 до 6 (или по-голямо, но помощните технологии на практика игнорират нива над 6).

Нивата на заглавията не трябва да се прескачат: след <h2> не трябва да следва <h4> без <h3> между тях. Потребителите на екранни четци, навигиращи по заглавия, разчитат на последователна структура.

Чести грешки

  • role="heading" без aria-level. Ролята задължително трябва да носи нивото.
  • Визуално оформени „заглавия” (едър получер текст), обвити в <div> или <span> без роля на заглавие. Потребителите на екранни четци ги пропускат напълно.
  • Множество елементи <h1> на една страница, когато се предвижда само едно основно заглавие. Добрата практика е един <h1> на страница, който назовава основното съдържание.
  • Прескачане на нива — от h2 директно на h4 — нарушава структурата на документа.
  • Декоративен текст, оформен като заглавие, но без да е предвиден за такова, маркиран като заглавие. Обърква навигацията с екранен четец.

Пример

<!-- Предпочитан вариант -->
<h2>How to file a complaint</h2>

<!-- Само когато <h2> е невъзможно -->
<div role="heading" aria-level="2">How to file a complaint</div>