Справочник HTML & CSS

aria-*

Атрибуты доступности: роль, название и состояние элемента для программ чтения с экрана.

Синтаксис

<button aria-label="Close">×</button>

Параметры

Параметр	Тип	Описание
role	button \| dialog \| alert \| …	Роль элемента, если подходящего тега нет.
aria-label	text	Название элемента для программ чтения с экрана.
aria-hidden	true	Скрыть элемент от программ чтения с экрана.
aria-expanded	true \| false	Раскрыт ли управляемый блок.

Примеры

Кнопка-иконка с названием и декоративный значок:

<button aria-label="Close">×</button>
<p><span aria-hidden="true">★</span> Top rated</p>

Сообщение, которое зачитывается сразу:

<button onclick="msg.textContent = 'Added to cart'">Add</button>
<p id="msg" role="status" aria-live="polite"></p>

Примечания

Первое правило ARIA: если есть подходящий HTML-тег, используйте его. <button> лучше, чем <div role="button"> — он сам фокусируется и нажимается клавишами. ARIA меняет только то, что слышит пользователь программы чтения с экрана, но не поведение элемента.

См. также

tabindex — Управляет тем, можно ли перейти к элементу клавишей Tab.
title — Дополнительная информация об элементе; показывается подсказкой при наведении мыши.
hidden — Скрывает элемент: он не показывается и недоступен программам чтения с экрана.

Вопросы и ответы по теме

В учебнике

Доступность — Как сделать страницу удобной для всех — работа с клавиатуры, фокус, подписи и alt, aria-label, контраст и смысловые теги.

Спасибо, что читаете!