Разметка ARIA: что это

Что такое ARIA

ARIA (Accessible Rich Internet Applications) — это спецификация для добавления семантической информации в HTML-код, чтобы помочь вспомогательным технологиям (экранным читалкам, голосовым интерфейсам и т. д.) лучше понимать структуру и поведение элементов на веб-странице.

Она особенно полезна в ситуациях, когда используются кастомные элементы интерфейса (например, выпадающие списки, вкладки, модальные окна), которые не имеют стандартного HTML-аналогa.

Зачем нужна ARIA

Стандартные HTML-элементы вроде <button>, <input>, <a> уже обеспечивают базовую доступность, но если вы создаете собственные элементы с использованием <div> или <span>, они становятся невидимыми или непонятными для ассистивных технологий.

ARIA позволяет:

• Обозначить роль элемента (role)
• Указать его текущее состояние или свойства (aria-*)
• Связать элементы логически

Основные атрибуты ARIA

Примеры использования

✅ Пример 1: Кнопка из <div> с ARIA

<div role="button" tabindex="0" aria-pressed="false" aria-label="Показать меню">

☰

</div>

Здесь role=”button” сообщает, что элемент работает как кнопка, а tabindex=”0″ делает его фокусируемым с клавиатуры.

✅  Пример 2: Модальное окно

<div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDesc">

<h2 id="dialogTitle">Подтверждение удаления</h2>

<p id="dialogDesc">Вы уверены, что хотите удалить файл?</p>

<button>Да</button>

<button>Нет</button>

</div>

Экранная читалка прочтет заголовок и описание при открытии диалога.

✅  Пример 3: Развертывающееся меню

<button aria-expanded="false" aria-controls="menuList" id="menuBtn">Меню</button>

<ul id="menuList" hidden>

<li><a href="#">Пункт 1</a></li>

<li><a href="#">Пункт 2</a></li>

</ul>

Здесь aria-expanded показывает, развернуто ли меню, а aria-controls связывает кнопку с соответствующим списком.

⚠️ Рекомендации по использованию

1. Используйте ARIA только там, где не хватает стандартного HTML. Лучше <button> с нативным поведением, чем <div role=”button”>.
2. Не злоупотребляйте aria-hidden=”true”, это скроет элемент от читалок, даже если он визуально виден.
3. Поддерживайте логику клавиатуры. Например, если это role=”menu”, нужно обеспечить навигацию с клавиатуры.
4. Тестируйте доступность с помощью экранных читалок, таких как NVDA, VoiceOver, JAWS.

Заключение

ARIA — это мощный инструмент для разработки доступных пользовательских интерфейсов. Он позволяет “объяснить” интерфейс тем пользователям, которые взаимодействуют с сайтом не глазами и мышкой, а через голос или тактильные устройства. Однако при его применении важно соблюдать баланс: ARIA дополняет HTML, но не заменяет его.