Когда и как следует использовать ARIA?

ARIA (Accessible Rich Internet Applications) — это набор атрибутов, которые добавляют семантику доступности — роли, состояния и свойства, которые не может выразить встроенный HTML. Но самое важное правило ARIA: предпочитайте встроенный HTML в первую очередь.

Почему это важно

<!-- ❌ re-inventing a button with ARIA -->
<div role="button" tabindex="0" onclick="..." onkeydown="...">Save</div>

<!-- ✅ just use a button — it has the role, focus, and keyboard handling built in -->
<button>Save</button>

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

Три вида ARIA

<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>

<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />

<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>

Live regions — объявление динамических изменений

<div aria-live="polite">3 results found</div>  <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->

Это действительно полезный ARIA: информирование программ чтения с экрана об изменениях содержимого без перезагрузки страницы (результаты поиска, уведомления, ошибки валидации).

Смертный грех: ложь вспомогательным технологиям

Неправильный ARIA хуже, чем его отсутствие — он дает пользователям программ чтения с экрана ложную информацию. И ARIA изменяет только семантику, а не поведение: role="button" на <div> не делает его focusable или clickable; вы должны сами добавить tabindex и обработчики клавиш.

Почему это важно

Используйте семантический HTML для 95% случаев; используйте ARIA для заполнения пробелов в пользовательских элементах (вкладки, раскрывающиеся списки, меню) и объявления динамических обновлений через live regions.

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