heading

Как сделать заголовок с помощью WAI-ARIA.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

ARIA-роль структуры документа для заголовка.

Роль heading есть у <h1><h6> по умолчанию.

Пример

Секция статьи "Пример"
        
          
          <div role="heading" aria-level="1">Главный заголовок</div><div role="heading" aria-level="2">Второстепенный заголовок</div><div role="heading" aria-level="3">Ещё менее значимый заголовок</div>
          <div role="heading" aria-level="1">Главный заголовок</div>
<div role="heading" aria-level="2">Второстепенный заголовок</div>
<div role="heading" aria-level="3">Ещё менее значимый заголовок</div>

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Добавьте к тегу role="heading". Лучше, чтобы это были семантически нейтральные <div> или <span>. Одно из правил использования ARIA — не перезаписывать роли без необходимости.

В большинстве случаев лучше использовать <h1><h6> вместо роли heading.

У элемента с явно заданной ролью heading обязательно должен быть атрибут aria-level с нужными значениями от 1 до 6. Если значение атрибута не задано, по умолчанию применится 2.

Также для этой роли можно использовать все глобальные ARIA-атрибуты.

Как понять

Секция статьи "Как понять"

Роль нужна для создания заголовков, когда нет возможности использовать подходящие HTML-теги.