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

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

Например:

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

html

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

html

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

html

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

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

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