Skip to content

Роли ARIA объяснённые

Шпаргалка по значениям ролей ARIA: роли ориентиров, документа, виджетов и «живых» областей с назначением и случаями применения.

Роли ARIA объявляют, что делает элемент. Роли ориентиров размечают области страницы. Роли документа структурируют содержимое. Роли виджетов помечают интерактивные элементы управления. Роли «живых» областей озвучивают динамические обновления.

Справочная таблица · 77 записи
77 of 77 rows
Ориентир
Обозначает шапку сайта в верхней части страницы.Логотип бренда, главный слоган, шапка-мастхед вверху страницы.
Группирует набор навигационных ссылок.Главные меню, «хлебные крошки», навигация внутри страницы.
Обозначает доминирующее содержимое документа.Единственное основное тело страницы.
Обозначает вспомогательное содержимое, отдельное от main.Боковые панели, связанные ссылки, выноски.
Группирует метаданные подвала о родительском документе.Строки копирайта, ссылки на политику конфиденциальности, юридический подвал.
Обозначает область, содержащую форму поиска.Поиск по сайту, формы фильтров, поля «найти».
Обозначает именованный, воспринимаемый раздел страницы.Собственные секции с доступным именем.
Обозначает область, содержащую набор полей формы.Именованные формы поиска, панели фильтров, секции опросов.
Обозначает область, ведущую себя как программное приложение.Редакторы на всю страницу, карты, игровые поверхности.
Документ
Обозначает самостоятельную композицию.Записи в блоге, новости, карточки товаров.
Обозначает заголовок раздела содержимого.Заголовки секций, когда нативные h1-h6 неприменимы.
Группирует список связанных элементов.Собственные маркированные или нумерованные списки.
Обозначает отдельный элемент внутри списка.Одна строка собственного списка.
Группирует набор связанных элементов формы.Наборы полей формы, группы радиокнопок, связанные поля.
Обозначает графическое содержимое с подписью.Изображения, схемы, диаграммы с меткой.
Обозначает данные, упорядоченные в строки и столбцы.Табличные данные, собранные из собственных элементов.
Обозначает видимую подпись таблицы, сетки или фигуры.Заголовки над таблицами данных, метки фигур.
Группирует набор связанных строк в таблице.Полосы шапки, тела и подвала таблицы.
Обозначает одну строку ячеек в таблице или сетке.Единственная строка записи собственной таблицы.
Обозначает ячейку заголовка столбца таблицы.Верхние метки таблицы данных.
Обозначает ячейку заголовка строки таблицы.Ведущая метка каждой строки таблицы.
Обозначает одну ячейку данных внутри строки.Отдельные значения строки собственной таблицы.
Обозначает слово или фразу, которое определяется.Ключи словаря, термины списков определений.
Обозначает значение предшествующего термина.Описание под определяемым термином.
Обозначает замечание рядом с основным содержимым.Советы, отступления, замечания в стиле сносок.
Обозначает список ссылок на членов группы.Оглавления и индексы ссылок (устарело в ARIA 1.2).
Обозначает прокручиваемый список секций статей.Потоки с бесконечной прокруткой, подгружающие больше содержимого.
Обозначает содержимое, записанное в математической нотации.Формулы, отрисованные из LaTeX или MathML.
Обозначает скалярное значение в известном диапазоне.Полосы занятости диска, оценки, индикаторы силы.
Обозначает конкретный момент или длительность.Метки времени, даты событий, истекшие времена.
Обозначает блок текста.Текстовые блоки, не записанные как нативные элементы p.
Обозначает цитату, взятую из другого источника.Выносные цитаты и цитируемые отрывки.
Обозначает фрагмент программного кода.Встроенные фрагменты и имена команд в тексте.
Обозначает текст с эмфатическим ударением.Ударённые слова внутри предложения.
Обозначает текст с сильной значимостью.Предупреждения, ключевые фразы, обязательные к прочтению метки.
Обозначает текст, выводимый ниже базовой линии.Химические формулы вроде H2O.
Обозначает текст, выводимый выше базовой линии.Маркеры сносок и экспоненты.
Обозначает простой контейнер без особого смысла.Обёртки раскладки и зацепки для стилей.
Убирает семантику у элемента.Декоративные изображения, таблицы раскладки, элементы-разделители.
Обозначает элемент как одно изображение.Спрайты иконок, группы SVG, графика, нарисованная средствами CSS.
Виджет
Обозначает нажимаемый элемент управления, запускающий действие.Собственные кнопки, кнопки-иконки, триггеры действий.
Обозначает ссылку на другой ресурс или место.Собственные якоря и ссылки маршрутов в приложении.
Обозначает переключатель одного пункта.Собственные чекбоксы, переключатели принятия условий.
Обозначает один вариант во взаимно исключающей группе.Собственные радиокнопки внутри radiogroup.
Обозначает бинарный переключатель вкл/выкл.Переключатели темы, звука и настроек.
Группирует метки набора вкладок.Полоса вкладок панели с вкладками.
Обозначает одну метку внутри tablist.Единственная вкладка, показывающая одну панель.
Обозначает панель содержимого для одной вкладки.Тело, показываемое, когда вкладка активна.
Обозначает окно-оверлей поверх страницы.Модальные окна, «шторки», поповеры, забирающие фокус.
Обозначает диалог, требующий ответа пользователя.Подтверждение удаления, запросы о несохранённых изменениях.
Обозначает поле ввода со всплывающим списком вариантов.Автодополнение, выбор с поиском, списки typeahead.
Обозначает элемент управления, задающий значение в диапазоне.Громкость, цена, непрозрачность, ползунки диапазона.
Обозначает список вариантов, предлагаемых пользователю.Раскрывающиеся меню, контекстные меню, палитры инструментов.
Обозначает один пункт внутри меню.Одна строка или пункт раскрывающегося меню.
Обозначает поле для свободного ввода текста.Собственные поля, поля поиска, окна комментариев.
Обозначает иерархический список элементов.Файловые проводники, вложенные меню, организационные схемы.
Обозначает список выбираемых вариантов.Собственные списки выбора для одного или многих вариантов.
Обозначает один вариант внутри listbox.Один выбираемый пункт собственного listbox.
Группирует набор взаимно исключающих вариантов.Собственные наборы радиокнопок, выбор тарифов, ответы по шкале.
Обозначает виджет из строк и столбцов ячеек.Раскладки электронных таблиц, виды календарного месяца.
Обозначает сетку, строки которой разворачиваются и сворачиваются.Вложенные таблицы данных, таблицы почтовых цепочек.
Обозначает один разворачиваемый пункт внутри дерева.Узел файла или папки в файловом проводнике.
Обозначает всплывающую подсказку к элементу управления.Подсказки при наведении, советы по фокусу для кнопок-иконок.
Обозначает элемент, показывающий прогресс задачи.Полосы отправки файлов и индикаторы загрузки.
Обозначает элемент управления, прокручивающий область содержимого.Собственные полосы прокрутки для панелей и каруселей.
Обозначает элемент управления, меняющий значение шагами.Выбор количества, числовые счётчики-степперы.
Обозначает текстовое поле для ввода поисковых запросов.Собственные строки поиска и поля фильтров.
Обозначает группу часто используемых элементов управления.Панели форматирования, ряды действий над редакторами.
Обозначает ряд постоянных триггеров меню.Полосы меню «Файл» и «Правка» в стиле приложений.
Обозначает пункт меню, включающийся и выключающийся.Переключатели параметров вида внутри раскрывающегося меню.
Обозначает один исключающий вариант внутри меню.Выбор порядка сортировки и темы в меню.
Обозначает разделитель между группами содержимого.Разделители меню, перетаскиваемые разделители панелей.
Живая область
Озвучивает срочное, важное сообщение.Ошибки форм, срочные уведомления, требующие внимания.
Озвучивает справочное обновление без прерывания.Подтверждение сохранения, прогресс, «мягкие» результаты.
Озвучивает новые записи в хронологическом потоке.Стенограммы чатов, журналы событий, ленты активности.
Озвучивает прокручивающийся или движущийся текст.Бегущие строки, прокручивающиеся новости, вращающиеся баннеры.
Озвучивает живой таймер или обратный отсчёт.Тайм-ауты сеансов, обратные отсчёты, секундомеры.