ARIA-роли

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

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

Кратко

Скопировано

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> без атрибута multiple и с size со значением 1.
  • grid — сетка.
  • listbox — выпадающий список с несколькими опциями на выбор, в том числе с картинками. Эквиваленты в HTML — <datalist> и <select> с атрибутами multiple и size со значением больше 1.
  • menu — меню в виде выпадающего списка интерактивных элементов как в программе или приложении.
  • menubar — строка меню с горизонтальным списком интерактивных элементов как в программе или приложении.
  • radiogroup — список радиокнопок.
  • tablist — список, группа вкладок.
  • tree — древовидный список.
  • treegrid — древовидная сетка.

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

  • button — кнопка. Эквиваленты в HTML — <button>, <summary> или <input> c типами button, image, reset, submit.
  • checkbox — чекбокс. Эквивалент в HTML — <input type="checkbox">.
  • gridcell — ячейка обычной или древовидной сетки.
  • link — ссылка. Эквивалент в HTML — <a>.
  • menuitem — пункт из меню в виде выпадающего или горизонтального списка интерактивных элементов.
  • menuitemcheckbox — чекбокс из меню в виде выпадающего или горизонтального списка интерактивных элементов.
  • menuitemradio — радиокнопка из меню в виде выпадающего или горизонтального списка интерактивных элементов.
  • option — элемент выпадающего списка. Эквивалент в HTML — <option>.
  • progressbar — индикатор выполнения задачи (прогресс-бар). Эквивалент в HTML — <progress>.
  • radio — радиокнопка. Эквивалент в HTML — <input type="radio">.
  • scrollbar — полоса прокрутки.
  • searchbox — поле поиска. Эквивалент в HTML — <input type="search">.
  • separator — интерактивный разделитель, с которым можно взаимодействовать.
  • 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>.
  • code — код. Эквивалент в HTML — <code>.
  • columnheader — заголовок ячейки или строки таблицы и обычной сетки. Эквивалент в HTML — <th scope="col">.
  • definition — определение термина. Эквивалент в HTML — <dd>.
  • deletion — удалённый контент. Эквивалент в HTML — <del>.
  • document — часть страницы с текстом и похожим содержимым, с которым пользователи вспомогательных технологий взаимодействуют только в режиме чтения.
  • 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>.
  • math — математическое выражение. Эквивалент в MathML — <math>.
  • meter — визуальное отображение числового значения в заданном диапазоне. Эквивалент в HTML — <meter>.
  • note — заметка или другая дополнительная информация об основном содержимом страницы.
  • paragraph — параграф. Эквивалент в HTML — <p>.
  • presentation и none — сброс семантики элемента.
  • row — строка таблицы или сетки. Эквивалент в HTML — <tr>.
  • rowgroup — строка с заголовком, её основным содержимым и итоговым результатом в таблице или сетке. Эквиваленты в HTML — <tbody>, <thead> и <tfoot>.
  • rowheader — заголовок ячейки или строки таблицы, обычной или древовидной сетки. Эквивалент в HTML — <th scope="row">.
  • 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 — область поиска. Эквивалент в HTML — <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 — список с оглавлением или содержанием без интерактивных элементов.

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

  • mark — выделенный или подсвеченный важный фрагмент текста. Эквивалент в HTML — <mark>.
  • comment — комментарий.
  • suggestion — предложение по изменению контента.
  • associationlist — ассоциативный список.
  • associationlistitemkey — ключ в ассоциативном списке.
  • associationlistitemvalue — значение ключа в ассоциативном списке.
  • 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>

        
        
          
        
      

Ссылки

Скопировано

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

Скопировано
Задать вопрос в рубрику
🤚 Я знаю ответ

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