foundation

Нативная семантика перед ARIA

Предпочитайте нативные controls и добавляйте ARIA только когда семантику или state нельзя выразить одним HTML.

ARIA меняет accessibility tree, но не добавляет поведение браузера. `button` лучше `div role="button"`: уже есть focus, keyboard activation, disabled и интеграция с формами. Первое правило ARIA: если есть нативный элемент — используйте его.

ARIA — для имён, состояний и связей, которые HTML не выражает: `aria-expanded`, `aria-controls`, `aria-invalid`, `aria-live` — и атрибуты синхронны с реальным UI.

					<!-- Предпочтительно -->
<button type="button" aria-expanded="false" aria-controls="menu">Меню</button>

<!-- Избегайте, если хватает нативного -->
<div role="button" tabindex="0">Меню</div>

На интервью: первое правило ARIA, расчёт accessible name, типичные states.

Типовые ошибки: неверные roles хуже отсутствия ARIA; `aria-label`, скрывающий видимый текст.

Компромисс: быстрые div-виджеты против нативного поведения — ARIA именует state, но не воспроизводит keyboard и интеграцию с формами.

Чеклист:

Начинайте с нативного HTML.
ARIA только для недостающей семантики.
Синхронизируйте ARIA с state компонента.
Проверяйте accessibility tree.