Что такое первое правило ARIA и когда ARIA действительно нужна?

Первое правило ARIA: если для задачи есть нативный HTML-элемент с нужным поведением и семантикой, используйте его, а не добавляйте роль к <div>.

Почему

Нативная <button> уже умеет фокус, Enter и пробел, имеет роль и состояние для скринридера. <div role="button"> — это только подсказка: поведение с клавиатуры придётся писать самому.

<!-- плохо -->
<div role="button" onclick="save()">Сохранить</div>

<!-- хорошо -->
<button type="button" onclick="save()">Сохранить</button>

Когда ARIA нужна

• Составные виджеты, для которых нет HTML-аналога: вкладки (role="tablist"), дерево, комбобокс.
• Состояния и свойства: aria-expanded, aria-selected, aria-controls, aria-label, aria-live.
• Если заменить семантику невозможно, а пользователю она нужна.

Важно

ARIA меняет только то, что слышит ассистивная технология, но не добавляет поведения и не делает элемент фокусируемым. «Нет ARIA лучше, чем плохая ARIA».

Коротко для собеседования

Сначала нативный HTML, ARIA только когда его не хватает, и всегда с реализованной клавиатурной поддержкой.