Что означают accessibility и ARIA roles в веб-приложении?

Смысл вопроса

Accessibility (a11y) — свойство продукта быть usable людьми с разными возможностями и в разных условиях. ARIA roles — способ сообщить AT роль элемента в UI, когда семантики HTML не хватает.

Роли

Примеры: role="dialog", role="tablist", role="status". Роль меняет то, как элемент представлен в accessibility tree. К роли часто нужны состояния (aria-selected) и клавиатура по гайдам APG.

<div role="tablist" aria-label="Разделы">
  <button role="tab" aria-selected="true">Обзор</button>
  <button role="tab" aria-selected="false">Детали</button>
</div>

Но нативный <button> уже имеет роль button — лишняя ARIA не нужна.

Итог

A11y — цель; ARIA roles — инструмент семантики для AT при кастомных виджетах, не замена правильному HTML.