ARIA-роли

Что такое ARIA-роли и какими они бывают.

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

Кратко

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

ARIA-роль — это дополнительный атрибут из WAI-ARIA, который описывает основную функцию элемента. Роли отвечают на вопросы «Для чего нужен этот элемент?» или «Что делает этот элемент?».

Роли помогают только вспомогательным технологиям. Они не изменяют внешний вид элементов и не добавляют им нужную функциональность. Тут не обойтись без CSS и JavaScript.

Как пишется

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

Используйте атрибут role с нужным значением, чтобы явно задать роль элементу.

        
          
          <div role="tablist">  <button role="tab">Пёсели 🐶</button>  <div role="tabpanel">    <p>Пёсели — группа домашних животных, представители которой любят вкусную обувь и почесушки.</p>  </div></div>
          <div role="tablist">
  <button role="tab">Пёсели 🐶</button>
  <div role="tabpanel">
    <p>Пёсели — группа домашних животных, представители которой любят вкусную обувь и почесушки.</p>
  </div>
</div>

        
        
          
        
      

В коде показана примерная разметка вкладок. Теперь для вспомогательных технологий <div> с ролью tablist — это группа вкладок, <button> с ролью tab — вкладка, а второй <div> с ролью tabpanel — содержимое вкладки. Конечно, чтобы это стало полноценной панелью с вкладками, нужны ещё ARIA-атрибуты и магия JavaScript 🪄

Для role можно добавить больше одного значения. Несколько ролей могут понадобиться только в редких случаях для фолбэка, когда у одной из ролей плохая поддержка и при этом есть похожая на неё роль с лучшей поддержкой.

        
          
          <ul role="none presentation">  <li>История подушек</li>  <li>Каталог товаров</li></ul>
          <ul role="none presentation">
  <li>История подушек</li>
  <li>Каталог товаров</li>
</ul>

        
        
          
        
      

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

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

Типы ролей

Секция статьи "Типы ролей"

Чтобы правильно использовать роли на практике, полезно разобраться с их типами. В ARIA есть шесть типов ролей и их значений соответственно:

  • роли виджетов;
  • роли структуры документа;
  • роли ориентиров;
  • роли изменяющихся областей (live regions);
  • роли окон;
  • абстрактные роли.

Список всех ARIA-ролей с их подробным описанием найдёте в спецификации WAI-ARIA 1.2 (Web Accessibility Initiative – Accessible Rich Internet Applications 1.2).

Роли виджетов

Секция статьи "Роли виджетов"

Виджеты в ARIA — это интерактивные элементы, с которыми могут взаимодействовать пользователи. Они бывают самостоятельными (standalone) и составными (composite).

Составные роли задаются элементам, которые содержат в себе другие элементы. Обычно внутри них жёсткая иерархия, и вложить можно только определённые элементы.

  • combobox — комбинированный список. Эквивалент в HTML — <select>.
  • grid — сетка со строками и ячейками.
  • listbox — список неинтерактивных элементов, которые можно выбрать. Эквивалент в HTML — <select>.
  • menu — меню со списком интерактивных элементов.
  • menubar — меню с горизонтальным списком интерактивных элементов.
  • radiogroup — список радиокнопок.
  • tablist — список вкладок.
  • tree — древовидный список.
  • treegrid — древовидная сетка.

Самостоятельные роли — это роли элементов, которые расположены на странице отдельно или вложены в другие элементы с составными ролями.

  • button — кнопка. Эквиваленты в HTML — <button>, <summary> или <input> c типами button, image, reset, submit.
  • checkbox — чекбокс. Эквивалент в HTML — <input type="checkbox">.
  • gridcell — ячейка обычной сетки или древовидной сетки. Эквиваленты в HTML — <td> и <th>.
  • link — ссылка. Эквивалент в HTML — <a>.
  • menuitem — элемент из обычного меню или меню с горизонтальным списком интерактивных элементов.
  • menuitemcheckbox — чекбокс из обычного или горизонтального меню для интерактивных элементов.
  • menuitemradio — радиокнопка из обычного или горизонтального меню для интерактивных элементов.
  • option — элемент выпадающего списка. Эквивалент в HTML — <option>.
  • progressbar — индикатор выполнения задачи. Эквивалент в HTML — <progress>.
  • radio — радиокнопка. Эквивалент в HTML — <input type="radio">.
  • scrollbar — полоса прокрутки.
  • searchbox — поле поиска. Эквивалент в HTML — <input type="search">.
  • separator — разделитель, на котором можно сделать фокус. Эквивалент в HTML — <hr>.
  • slider — ползунок. Эквивалент в HTML — <input type="range">.
  • spinbutton — поле для ввода числа. Эквивалент в HTML — <input type="number">.
  • switch — переключатель или тип чекбокса, который что-то включает или выключает.
  • tab — вкладка.
  • tabpanel — содержимое вкладки.
  • textbox — поле для ввода текста. Эквиваленты в HTML — <textarea> или <input> с типами text, email, tel, url.
  • treeitem — элемент древовидного списка.

Роли структуры документа

Секция статьи "Роли структуры документа"

Этот тип ролей нужен для описания структуры страниц и их отдельных частей. Например, для заголовков, текста, картинок, навигации и прочего.

  • application — часть документа с кастомными интерактивными элементами для ввода данных.
  • article — законченный и самодостаточный раздел документа. Эквивалент в HTML — <article>.
  • blockquote — цитата. Эквивалент в HTML — <blockquote>.
  • caption — видимая подпись к таблице, сетке и похожим элементам. Эквивалент в HTML — <caption>.
  • cell — ячейка таблицы. Эквиваленты в HTML — <td> и <th>.
  • code — код. Эквивалент в HTML — <code>.
  • columnheader — заголовок ячейки или строки таблицы. Эквивалент в HTML — <th>.
  • definition — определение термина. Эквивалент в HTML — <dd>.
  • deletion — удалённый контент. Эквивалент в HTML — <del>.
  • document — тело документа. Эквивалент в HTML — <body>.
  • emphasis — фраза или слово со смысловым акцентом. Эквивалент в HTML — <em>.
  • feed — список из самодостаточных блоков контента, которые могут подгружаться по мере прокрутки.
  • figure — автономное изображение, иллюстрация или другой контент с подписью или без неё. Эквивалент в HTML — <figure>.
  • generic — элемент-контейнер без имени и семантики. Эквиваленты в HTML — <div> и <span>.
  • group — группа элементов, которая не должна быть частью основного содержимого. Эквиваленты в HTML — <details>, <fieldset> и <optgroup>.
  • heading — заголовок. Эквиваленты в HTML — <h1><h6>.
  • img и image — одно или несколько изображений. Эквивалент в HTML — <img>.
  • insertion — добавленный контент. Эквивалент в HTML — <ins>.
  • list — список. Эквиваленты в HTML — <ul>, <ol>, <dl>.
  • listitem — элемент списка. Эквиваленты в HTML — <li> и <dt>.
  • math — математическое выражение. Эквивалент в MathML — <math>.
  • meter — визуальное отображение числового значения в заданном диапазоне. Эквивалент в HTML — <meter>.
  • note — заметка или вводная часть текста или другого контента.
  • paragraph — параграф. Эквивалент в HTML — <p>.
  • presentation и none — сброс семантики элемента.
  • row — строка таблицы. Эквивалент в HTML — <tr>.
  • rowgroup — строки таблицы с заголовком, её основным содержимым и итоговым результатом. Эквиваленты в HTML — <tbody>, <thead> и <tfoot>.
  • rowheader — заголовок ячейки или строки таблицы. Эквивалент в HTML — <th>.
  • separator — разделитель, на который можно сделать фокус. Эквивалент в HTML — <hr>.
  • strong — важное слово или фраза. Эквивалент в HTML — <strong>.
  • subscript — подстрочный текст. Эквивалент в HTML — <sub>.
  • superscript — надстрочный текст. Эквивалент в HTML — <sup>.
  • table — таблица. Эквивалент в HTML — <table>.
  • term — термин. Эквиваленты в HTML — <dt> и <dfn>.
  • time — дата, время или период времени. Эквивалент в HTML — <time>.
  • toolbar — панель с часто используемыми контролами в компактном виде.
  • tooltip — тултип.

Роли ориентиров

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

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

  • banner — область хедера страницы. Эквивалент в HTML — <header>.
  • complementary — область с дополнительным содержимым, которая не теряет смысл отдельно от страницы. Эквивалент в HTML — <aside>.
  • contentinfo — область футера страницы. Эквивалент в HTML — <footer>.
  • form — область с формой. Эквивалент в HTML — <form>.
  • main — область с основным содержимым страницы. Эквивалент в HTML — <main>.
  • navigation — область с навигацией. Эквивалент в HTML — <nav>.
  • region — область с независимой частью основного содержимого. Эквивалент в HTML — <section>.
  • search — область поиска.

Роли изменяющихся областей

Секция статьи "Роли изменяющихся областей"

Изменяющаяся или «живая» область — это часть страницы, которая динамически обновляется и изменяется. Благодаря таким областям пользователи скринридеров могут узнать, что содержимое страницы изменилось без её обновления и фокуса на изменившемся элементе.

  • alert — область с важной информацией.
  • log — область с информацией о логах.
  • marquee — область с постоянно изменяющейся информацией.
  • status — область с дополнительной информацией, которая не особо важна и описывает состояние изменений. Эквивалент в HTML — <output>.
  • timer — область счётчика, который отсчитывает время.

Роли окон

Секция статьи "Роли окон"

Используются для всплывающих и диалоговых окон. Роли окон похожи на составные роли, так как в такие элементы обычно вложены другие.

  • alertdialog — диалоговое окно с важным сообщением.
  • dialog — обычное диалоговое окно. Эквивалент в HTML — <dialog>.

Абстрактные роли

Секция статьи "Абстрактные роли"

Нужны для онтологии и реализации других ролей в браузерах.

  • command — интерактивный элемент, в который нельзя вводить данные.
  • composite — интерактивный элемент, который содержит другие интерактивные элементы.
  • input — интерактивный элемент для ввода данных.
  • landmark — ориентир, область документа для навигации.
  • range — элемент для ввода данных с функциями ползунка.
  • roletype — базовая роль, на которой основаны другие роли.
  • section — структурный элемент, который содержит раздел документа или приложения.
  • sectionhead — заголовок раздела документа или приложения.
  • select — интерактивный элемент формы с выбором опций.
  • structure — элемент структуры документа.
  • widget — интерактивный элемент интерфейса.
  • window — окно браузера или приложения.

Устаревшие и нестандартные роли

Секция статьи "Устаревшие и нестандартные роли"

Некоторые роли устарели. Лучше их избегать.

  • directory — список с оглавлением или содержанием без интерактивных элементов.

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

  • mark — выделенный или подсвеченный важный фрагмент текста. Эквивалент в HTML — <mark>. Из черновика спецификации WAI-ARIA 1.3.
  • comment — комментарий. Из черновика спецификации WAI-ARIA 1.3.
  • suggestion — предложение по изменению контента. Из черновика спецификации WAI-ARIA 1.3.
  • associationlistitemkey — ключевой элемент в ассоциативном списке.
  • text — делает текстом элемент с нетекстовым содержимым. Не входит в спецификацию и поддерживается только VoiceOver.

Подсказки

Секция статьи "Подсказки"

💡 У многих семантических HTML-тегов уже есть встроенные роли.

💡 В первую очередь используйте роли для семантически нейтральных тегов — <div> или <span>.

        
          
          <div role="search">  <label for="search">Поиск по сайту</label>  <input id="search" type="search"></div>
          <div role="search">
  <label for="search">Поиск по сайту</label>
  <input id="search" type="search">
</div>

        
        
          
        
      

💡 Будьте осторожны с ролью presentation и не используйте её для интерактивных элементов. Эта роль сбрасывает встроенную семантику элемента. Например, если добавляете presentation к кнопке, то она может остаться в порядке фокуса. При фокусе на таком элементе пользователи вспомогательных технологий не узнают, что это кнопка.

💡 Если у элемента составная роль, то вложите в него хотя бы один дочерний элемент.

        
          
          <div role="menu">  <span role="menuitem"></span></div>
          <div role="menu">
  <span role="menuitem"></span>
</div>

        
        
          
        
      

Ссылки

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

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

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

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

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