Атрибут role используется в ARIA (Accessible Rich Internet Applications) для явного определения типа пользовательского интерфейса элемента. Это помогает вспомогательным технологиям, таким как скринридеры, понимать назначение элемента и передавать эту информацию пользователям с ограниченными возможностями. Он дополняет семантику HTML, особенно для элементов, которые не имеют встроенной семантики, или когда стандартной семантики недостаточно.

Например:

Элемент div, которому назначена роль button, будет восприниматься скринридером как кнопка, даже если он не имеет стандартного поведения и семантики HTML-кнопки.

<div role="button" tabindex="0" aria-pressed="false">
  Нажми меня
</div>

Роль navigation на элементе nav (хотя nav уже имеет встроенную семантику навигации) может дополнительно улучшить ее интерпретацию в некоторых случаях.

<nav role="navigation">
  <ul>
    <li><a href="/">Главная</a></li>
  </ul>
</nav>

Некоторые сложные виджеты, созданные на основе несемантических элементов, получают свои роли для корректного представления:

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Вкладка 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Вкладка 2</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Содержимое вкладки 1.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Содержимое вкладки 2.
</div>

Атрибут role классифицирует элементы по их функции и цели, обеспечивая более точное и полезное взаимодействие для пользователей, использующих вспомогательные технологии. Важно использовать его вместе с другими атрибутами ARIA (например, aria-label, aria-expanded, aria-hidden), которые передают состояние и свойства элементов.

Следует помнить:

Приоритет всегда отдается нативной семантике HTML5. Если существует подходящий HTML-элемент, используйте его вместо имитации его поведения через role и другие атрибуты ARIA. Например, используйте <button> вместо <div role="button">.
Изменение роли элемента не меняет его встроенного поведения. Например, role="button" на div не делает его фокусируемым или активируемым по нажатию Space или Enter без дополнительных JavaScript.

Для чего был добавлен атрибут roll?