12. ARIA Roles

ARIA Roles – это важная часть обеспечения доступности веб-страниц для людей с ограниченными возможностями. Они помогают сделать контент более понятным для вспомогательных технологий, таких как скринридеры.

Что такое ARIA Roles?

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

Представьте, что у вас есть div, который ведет себя как кнопка. Сам по себе div не имеет семантического значения кнопки. ARIA role позволяет это исправить.

Пример: Кнопка из Div

<div onclick="doSomething()" role="button" tabindex="0">Нажми меня</div>

В этом примере мы говорим скринридеру, что этот div – кнопка. tabindex="0" делает элемент доступным для навигации с помощью клавиши Tab.

Наиболее часто используемые ARIA Roles

Существует множество ARIA roles, но вот некоторые из наиболее распространенных:

• button: Определяет элемент как кнопку.
• link: Определяет элемент как ссылку.
• navigation: Обозначает секцию как навигационный блок.
• main: Указывает на основное содержание страницы.
• article: Определяет независимый блок контента (например, новостную статью).
• banner: Определяет баннер сайта (обычно заголовок).
• complementary: Дополнительный контент, связанный с основным контентом.
• contentinfo: Информация о содержимом страницы, такая как авторские права и ссылки на политику конфиденциальности.
• form: Определяет секцию как форму.
• search: Определяет секцию как поисковую форму.
• alert: Важное и обычно временное сообщение, которое требует внимания пользователя.

Пример: Навигация

<nav role="navigation">
  <ul>
    <li><a href="/">Главная</a></li>
    <li><a href="/about">О нас</a></li>
    <li><a href="/contact">Контакты</a></li>
  </ul>
</nav>

Здесь role="navigation" сообщает скринридеру, что это блок навигации. Хотя можно использовать и элемент <nav>, ARIA roles полезны, когда нужно добавить семантику к элементам, которые не имеют ее по умолчанию.

Пример: Alert

<div role="alert">
  Произошла ошибка! Пожалуйста, попробуйте еще раз.
</div>

Этот код сообщит пользователю скринридера о важной ошибке.

Жизненный пример

Многие современные JavaScript-фреймворки (React, Angular, Vue) активно используют ARIA roles для создания доступных компонентов. Например, компонент “вкладки” (tabs) часто реализуется с помощью div и ul/li, а ARIA roles используются для обозначения ролей tablist, tab и tabpanel, чтобы скринридер понимал структуру и взаимодействие.

На сайтах крупных компаний, таких как Google или Microsoft, ARIA roles используются повсеместно для обеспечения доступности сложных интерфейсов, таких как календари, редакторы документов и другие интерактивные элементы. При разработке веб-приложений, которые должны соответствовать стандартам доступности (например, WCAG), использование ARIA roles является обязательным.

Ключевые моменты

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