Роли определяют, чем является объект

Роль сообщает вспомогательной технологии, что представляет собой элемент: кнопку, вкладку, уведомление или диалоговое окно. Она отвечает на вопрос: что это?

Большинство тегов HTML уже имеют встроенную неявную роль. nav — это область навигации, h1 — заголовок, button — кнопка.

Когда подходящего нативного тега нет, задайте атрибут role вручную, чтобы присвоить обычному элементу распознаваемую идентичность.

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

Роли ориентиров делят страницу на области, такие как баннер, основное содержимое и навигация, чтобы пользователи могли сразу перейти к нужному разделу.

Роли структуры описывают статическое содержимое: заголовок, список, элемент списка и иллюстрацию. Они обозначают структуру вашей информации.

Элемент получает одну роль. Нельзя одновременно сделать его кнопкой и ссылкой, поэтому выберите идентичность, соответствующую его реальному назначению.

Выбор роли — это договор. role=tab означает, что необходимо предоставить родительский tablist, поддержку клавиатуры и связанную панель вкладки.

Никогда не назначайте элементу роль, которая у него уже есть. Избыточная роль у настоящей кнопки лишь добавляет лишний шум и риск.

role=presentation лишает элемент семантики. Это полезно для таблицы, используемой только для вёрстки, но опасно для всего, что пользователям нужно понимать.

Сначала правильно задайте роль. Состояния и свойства имеют смысл только после того, как у элемента появилась чёткая идентичность, к которой их можно привязать.

Вы узнали, что роль сообщает, чем является элемент. Предпочитайте нативные неявные роли, добавляйте одну явную роль только при необходимости и соблюдайте её условия.