ARIA (Accessible Rich Internet Applications)
ARIA - атрибуты HTML, которые передают роль, состояние и свойства элементов вспомогательным технологиям (screen reader, брайлевские дисплеи).
Ключевые атрибуты
<!-- role - назначение элемента -->
<div role="button" tabindex="0">Нажми</div>
<!-- aria-label - текстовое описание без видимого текста -->
<button aria-label="Закрыть диалог">✕</button>
<!-- aria-labelledby - ссылка на элемент-метку -->
<h2 id="modal-title">Подтверждение</h2>
<div role="dialog" aria-labelledby="modal-title">...</div>
<!-- aria-hidden - скрыть от screen reader -->
<span aria-hidden="true">★★★★☆</span>
<span class="sr-only">4 из 5 звёзд</span>
<!-- aria-expanded - состояние раскрытия -->
<button aria-expanded="false" aria-controls="menu">Меню</button>
<!-- aria-live - уведомления об изменениях -->
<div aria-live="polite">Товар добавлен в корзину</div>
Правило первое
Используйте нативные элементы - они уже содержат ARIA-семантику. <button> лучше, чем <div role="button">.