Введение в ARIA

Что такое ARIA и как правильно этим пользоваться.

Время чтения: 13 мин

Кратко

Секция статьи "Кратко"

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

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

ARIA не влияет на внешний вид элементов и их поведение, а также не изменяет DOM. ARIA-атрибуты изменяют только то, как с элементами и страницами взаимодействуют браузеры, Accessibility API и вспомогательные технологии.

Кому помогает

Секция статьи "Кому помогает"

Главные пользователи ARIA — это люди с визуальными, моторными и когнитивными особенностями, которые пользуются вспомогательными технологиями и настройками доступности в операционных системах или браузерах. Это могут быть:

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

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

Как это понять

Секция статьи "Как это понять"

Внешний вид элементов не всегда совпадает с их функциями. К примеру, элемент в демо выглядит внешне как кнопка с текстом «Очистить форму».

Открыть демо в новой вкладке

Для этого элемента используется семантически нейтральный тег <div>. Поэтому для пользователей скринридеров это не кнопка, и они не могут сфокусироваться на элементе.

        
          
          <div class="button button-blue">Очистить форму</div>
          <div class="button button-blue">Очистить форму</div>

        
        
          
        
      

В этой ситуации ARIA поможет превратить <div> в кнопку. Добавим ARIA-роль button, а ещё поместим элемент в порядок фокуса с помощью HTML-атрибута tabindex="0".

        
          
          <div class="button button-blue" role="button" tabindex="0">Очистить форму</div>
          <div class="button button-blue" role="button" tabindex="0">Очистить форму</div>

        
        
          
        
      

Теперь элемент доступен для скринридеров. Пользователи могут установить на нём фокус и узнать, что это кнопка с названием «Очистить форму».

Самое лучшее решение проблемы с доступностью этой кнопки — HTML-тег <button>. Тогда не нужно добавлять к элементу дополнительные атрибуты и отслеживать клики с помощью скрипта. Это всё уже есть в теге по умолчанию. Звучит странно, но одно из главных правил использования ARIA — стараться не использовать ARIA.

        
          
          <button class="button button-blue">Очистить форму</button>
          <button class="button button-blue">Очистить форму</button>

        
        
          
        
      

Более сложный пример — сообщение об успешности или неуспешности действия. Как рассказать пользователям вспомогательных технологий, что на странице что-то произошло? Например, что форма успешно очищена.

Тут снова ARIA спешит на помощь. Добавим для сообщения об успешной очистке формы role="status" и свяжем с ним кнопку с помощью атрибута aria-controls. Благодаря этой ARIA-роли скринридер автоматически объявит сообщение, когда пользователь нажмёт на кнопку.

        
          
          <button class="button button-aqua" aria-controls="message">Очистить форму</button><div class="status-message" role="status" id="message"></div>
          <button class="button button-aqua" aria-controls="message">Очистить форму</button>
<div class="status-message" role="status" id="message"></div>

        
        
          
        
      
Открыть демо в новой вкладке

Когда не нужно использовать

Секция статьи "Когда не нужно использовать"

Мастерство владения ARIA заключается не столько в том, как это использовать, а когда это не стоит использовать.
ARIA Spec for the Uninitiated: Part 3, Джерард Коэн.

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

Есть несколько ресурсов, которые помогут быстро узнать о встроенных ролях HTML-тегов:

Когда пригодится

Секция статьи "Когда пригодится"

ARIA пригодится во всех случаях, когда возможностей HTML недостаточно. То есть, когда нет элементов с нужными ролями, свойствами и состояниями. Дополнительные атрибуты понадобятся в нескольких ситуациях:

  • Динамическое обновление контента. Например, таймеры, оповещения, подгружающиеся не сразу части страниц.
  • Кастомные интерактивные элементы и улучшение навигации с клавиатуры, особенно когда используется JavaScript. Примеры — выпадающий список, вкладки, тултип или всплывающее окно.
  • Добавление дополнительных ориентиров на страницу. Это такие части страницы, по которым могут быстро перемещаться пользователи вспомогательных технологий. Примеры — область вкладок или поиска.
  • Исправление проблем с доступностью в браузерах и для вспомогательных технологий из-за разной поддержки фич из HTML, CSS и других языков.

Как устроено

Секция статьи "Как устроено"

ARIA состоит из трёх частей — ролей, состояний и свойств.

Роли — основные цели и функции элемента. Задаются через role="".

Роли бывают разных типов. Одни могут отвечать за интерактивные элементы, к примеру, button и tab. Какие-то роли нужны для создания ориентиров на странице. Например, search и banner.

Есть роли для составных элементов, для которых нужны конкретные дочерние элементы. Например, у элемента с ролью list должен быть минимум один вложенный элемент с ролью lisitem. Это логично, ведь список делают списком пункты в нём.

Состояния (states) — в каком состоянии находятся интерактивный или неинтерактивный элемент.

Свойства (properties) — дополнительные функции элемента.

Состояния и свойства похожи друг на друга и задаются через атрибут aria-*="". Их часто объединяют и называют ARIA-атрибутами. Основная разница между ними в том, что значения атрибутов свойств часто не так сильно изменяются, как у атрибутов состояний. К примеру, значение свойства aria-label изменяется реже, чем состояния aria-checked.

ARIA-атрибуты тоже бывают разными. Какие-то атрибуты можно сочетать практически со всеми ролями элементов, например, aria-live и aria-label. Какие-то подходят только для интерактивных элементов, например, aria-hidden и aria-pressed. Есть атрибуты, которые обязательно нужны для определённых ролей. К примеру, у элемента с ролью combobox обязательно должно быть состояние aria-expanded.

Полные список ролей и список атрибутов из спецификации ARIA 1.2.

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

Секция статьи "Правила использования"

Есть пять основных правил использования ARIA.

Не используйте ARIA

Секция статьи "Не используйте ARIA"

Не используйте ARIA, если можно использовать HTML-теги и атрибуты.

В большинстве случаев вместо ARIA-атрибутов можно использовать семантические HTML-теги.

        
          
          <!-- Неправильно ⛔ --><div role="banner">  <div role="navigation"></div></div><!-- Правильно ✅ --><header>  <nav></nav></header>
          <!-- Неправильно ⛔ -->
<div role="banner">
  <div role="navigation"></div>
</div>

<!-- Правильно ✅ -->
<header>
  <nav></nav>
</header>

        
        
          
        
      

Не изменяйте семантику

Секция статьи "Не изменяйте семантику"

Не изменяйте встроенную семантику элементов без серьёзной необходимости.

Когда используете ARIA-роли, встроенные роли HTML-тегов перезаписываются. Поэтому для кастомных элементов лучше использовать семантически нейтральные <div> и <span>, если это не исключительный случай.

        
          
          <!-- Неправильно ⛔ --><h2 role="tab">Я первая вкладка</h2><!-- Правильно ✅ --><div role="tab">  <h2>Я первая вкладка</h2></div>
          <!-- Неправильно ⛔ -->
<h2 role="tab">Я первая вкладка</h2>

<!-- Правильно ✅ -->
<div role="tab">
  <h2>Я первая вкладка</h2>
</div>

        
        
          
        
      

Все интерактивные элементы доступны для клавиатуры

Секция статьи "Все интерактивные элементы доступны для клавиатуры"

Роль — это обещание, что элемент будет вести себя в соответствии с ней. Если это интерактивный элемент, то он должен получать фокус с клавиатуры. К примеру, между вкладками принято перемещаться стрелками вправо и влево, а раскрывать нажатием на Enter или пробел.

Для того, чтобы сделать кастомный элемент интерактивным, используют HTML-атрибут tabindex. Старайтесь избегать положительных чисел в качестве значения атрибута и используйте его только там, где это действительно нужно. К примеру, зрячим пользователям клавиатуры не нужен фокус на параграфах, заголовках и похожем текстовом содержимом страницы.

        
          
          <!-- Неправильно ⛔ --><span role="button" tabindex="1">Загрузить фото</span><!-- Правильно ✅ --><span role="button" tabindex="0">Загрузить фото</span>
          <!-- Неправильно ⛔ -->
<span role="button" tabindex="1">Загрузить фото</span>

<!-- Правильно ✅ -->
<span role="button" tabindex="0">Загрузить фото</span>

        
        
          
        
      

Подробнее про навигацию с клавиатуры для разных интерактивных элементов рассказано в разделе про паттерны APG (ARIA Authoring Practices Guide, Руководства по авторским ARIA-практикам).

Будьте осторожны с role="presentation" и aria-hidden="true"

Секция статьи "Будьте осторожны с role="presentation" и aria-hidden="true""

Не используйте role="presentation" и aria-hidden="true" на видимых элементах, которые находятся в порядке фокуса.

Роль presentation удаляет семантику элемента. Интерактивный элемент останется в порядке фокуса даже со сброшенной семантикой. В этом случае пользователи скринридеров смогут на нём сфокусироваться, но не узнают роль элемента.

Свойство aria-hidden скрывает элемент от скринридеров и других вспомогательных технологий, но не скрывает его визуально. Если используете этот ARIA-атрибут на неинтерактивном элементе с вложенным интерактивным, то вложенный элемент унаследует этот атрибут. Это тоже приведёт к проблемам с доступностью для вспомогательных устройств.

        
          
          <!-- Неправильно ⛔ --><button role="presentation">Передать привет</button><button aria-hidden="true">Передать привет</button><div aria-hidden="true">  <button>Передать привет</button></div><!-- Правильно ✅ --><!--  Описание картинки берётся из параграфа,  а с параграфом связан <div> с ролью картинки--><div role="img" aria-labelledby="caption">  <img src="dog.png" alt="" role="presentation">  <p id="caption">Собака наклонила голову, прижала уши и смотрит с интересом прямо в камеру.</p></div><button>  <span class="emoji" aria-hidden="true">👊</span>  <span class="text">Передать привет</span></button>
          <!-- Неправильно ⛔ -->
<button role="presentation">Передать привет</button>

<button aria-hidden="true">Передать привет</button>

<div aria-hidden="true">
  <button>Передать привет</button>
</div>

<!-- Правильно ✅ -->
<!--
  Описание картинки берётся из параграфа,
  а с параграфом связан <div> с ролью картинки
-->
<div role="img" aria-labelledby="caption">
  <img src="dog.png" alt="" role="presentation">
  <p id="caption">Собака наклонила голову, прижала уши и смотрит с интересом прямо в камеру.</p>
</div>

<button>
  <span class="emoji" aria-hidden="true">👊</span>
  <span class="text">Передать привет</span>
</button>

        
        
          
        
      

Интерактивным элементам нужны имена

Секция статьи "Интерактивным элементам нужны имена"

У всех интерактивных элементов должны быть доступные имена. Они подробнее раскрывают цель элемента. Скринридеры объявляет их перед ролью.

Имена задаются двумя способами:

  • с помощью HTML — текстовое содержимое тегов и атрибутов alt и title;
  • с помощью ARIA-атрибутов aria-label и aria-labelledby.
        
          
          <!-- Неправильно ⛔ --><button>  <img src="logo.svg" alt=""></button><!-- Правильно ✅ --><button>  <img src="logo.svg" alt="Твиттер"></button><button aria-label="Твиттер">  <img src="logo.svg" alt=""></button>
          <!-- Неправильно ⛔ -->
<button>
  <img src="logo.svg" alt="">
</button>

<!-- Правильно ✅ -->
<button>
  <img src="logo.svg" alt="Твиттер">
</button>

<button aria-label="Твиттер">
  <img src="logo.svg" alt="">
</button>

        
        
          
        
      

Дополнительные правила

Секция статьи "Дополнительные правила"
  • Не засоряйте разметку лишними ARIA-ролями и атрибутами.
  • Всегда тестируйте элементы с ARIA в разных браузерах и с разными скринридерами.

Спецификация

Секция статьи "Спецификация"

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) — техническая спецификация, которая описывает как устроена и должна работать ARIA-разметка. Спецификация похожа на ECMAscript. Она описывает, как надо реализовывать ARIA в браузерах и конкретных языках, которые называют хостовыми. К примеру, в вебе хостовые языки — это HTML и SVG.

У WAI-ARIA есть несколько версий.

  • WAI-ARIA 1.0, 20 марта 2014.
  • WAI-ARIA 1.1, 14 декабря 2017. Актуальные рекомендации.
  • WAI-ARIA 1.2, 8 декабря 2021. Кандидат в рекомендации.
  • WAI-ARIA 1.3, 22 июля 2022. Черновик.

За обновлениями WAI-ARIA можно следить на странице с новостями W3C.

Связанные рекомендации

Секция статьи "Связанные рекомендации"
  • APG — рекомендации на простом языке о том, как правильно использовать ARIA.
  • Using ARIA — рекомендации, как делать более доступными HTML-элементы при помощи ARIA 1.1.

Связанные спецификации

Секция статьи "Связанные спецификации"

Поддержка и тестирование

Секция статьи "Поддержка и тестирование"

Тема поддержки ARIA не самая простая. Дело в том, что в этом участвует несколько сторон — браузеры, Accessibility API и операционные системы, а также вспомогательные технологии. У них могут быть разные версии, баги и реализации фич ARIA.

Поддержка ARIA браузерами достаточно высокая — 98.7% в 2022 году, если верить Can I Use. Скринридеры сильно отличаются друг от друга и обычно у них разные подходы к реализации фич из ARIA.

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

Так что, ARIA познаётся при тестировании собственными силами и с реальными пользователями вспомогательных технологий.

Есть несколько сайтов, которые помогут заранее прикинуть уровень поддержки атрибутов ARIA:

За багами из-за разной реализации ARIA в скринридерах и браузерах удобно следить по багтрекерам:

Есть отдельный инструмент для поиска по GitHub-репозиториям — Find accessibility stats by github repository.

Автоматические инструменты эффективны для поиска основных и очевидных проблем с ARIA и кодом в целом. Вот некоторые из них:

На сайте W3C найдёте полный список инструментов для оценки доступности.

Ссылки

Секция статьи "Ссылки"

На собеседовании

Секция статьи "На собеседовании"

Это партнёрская рубрика, мы выпускаем её совместно с сервисом онлайн-образования Яндекс Практикум. Приносите вопрос, на который не знаете ответа, в задачи, мы разложим всё по полочкам и опубликуем. Если знаете ответ, присылайте пулреквест на GitHub.

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.