advanced

ARIA

Применяйте ARIA roles, states и properties только когда native HTML недостаточен и поведение виджета совпадает с объявляемой семантикой.

ARIA добавляет roles, states и properties, когда native HTML не выражает виджет. **Первое правило ARIA: не используйте ARIA, если работает native HTML.** ARIA описывает; не реализует keyboard, focus и обработку событий.

					<!-- Предпочтительно native -->
<select>...</select>

<!-- Кастомный listbox нуждается в role, keyboard и state -->
<ul role="listbox" aria-activedescendant="opt-2">
  <li id="opt-1" role="option">One</li>
  <li id="opt-2" role="option" aria-selected="true">Two</li>
</ul>

| Ошибка | Исправление | |--------|-------------| | `role="button"` на div без клавиш | `<button>` или Space/Enter | | Role не совпадает с поведением | Паттерн APG для tabs, combobox, dialog | | `aria-hidden` на сфокусированном потомке | Ломает focus и объявления |

Для сложных виджетов — WAI-ARIA Authoring Practices; вместе с тестами, не только атрибутами.

На интервью: role vs native; `aria-expanded`, `aria-controls`, `aria-activedescendant`; почему `aria-label` перекрывает видимый текст.

Типовые ошибки: roles без поведения; лишний ARIA на native; спам live regions; путаница menu и listbox.

Компромисс — быстрый кастомный UI против полной ответственности за accessibility behavior.

Чеклист:

Сначала native HTML; ARIA только при необходимости.
Полный keyboard и focus для custom roles.
APG для составных виджетов.
Проверка accessibility tree, не только ESLint plugins.