ARIA-роли

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>.

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

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

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

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

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

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

Подробнее про эту категорию узнаете из «Абстрактные ARIA-роли».

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

• 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>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

• Таблица с HTML-элементами, встроенными ролями и возможными атрибутами из спецификации ARIA in HTML.
• Structural Roles, ARIA Authoring Practices Guide (APG).
• WAI-ARIA Roles, MDN.
• Периодическая таблица семантики.
• Пять правил использования ARIA, Джерард Коэн.

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

Скопировать ссылку "На собеседовании" Скопировано

Задать вопрос в рубрику

🤚 Я знаю ответ

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