ARIA-роли

Все роли организованы в иерархическую структуру. Каждая имеет свой суперкласс и свои подклассы (кроме крайних в иерархии). Ниже суперкласс для роли указан после пояснения, в скобках.

Всего различают четыре вида ролей.

Абстрактные роли (Abstract Roles)

Используются, чтобы поддержать ролевую таксономию WAI-АРИИ с целью определения общих ролевых понятий. При разработке реальных документов их использовать не следует — они введены для онтологии (полноты описания). Примеры абстрактных ролей:

— roletype — базовая роль, являющаяся родительской для остальных в этой таксономии;

— window — окно браузера или приложения (roletype);

— widget — интерактивный компонент графического интерфейса пользователя (GUI). Родительский элемент для практически всех элементов управления (roletype);

— structure — общий тип для основных структурных элементов (roletype);

— command — форма виджета, выполняющего действие, но не получающего входных данных (HTML5-аналог — тег <command>) (widget);

— composite — виджет, включающий в себя навигационные элементы и дочерний контент (widget);

— landmark — область страницы, используемая как навигационный ориентир (region);

— section — структурная единица в документе или приложении, объединяющая контент в секцию (structure);

— sectionhead — структура, маркирующая связанную с ней секцию (structure);

— input — общий тип для виджета, представляющего поля ввода (widget);

— select — общий тип для элемента; формы, позволяющие сделать выбор из списка (input);

— range — общий тип для элемента; формы, позволяющие сделать выбор из диапазона значений (input).

Роли — виджеты (Widget Roles)

Роли, выполняющие роль автономного пользовательского интерфейса, или автономной части, пользовательского интерфейса:

— alert — сообщения с критически важной информацией (region);

— button — соответствует кнопке в широком смысле слова, то есть объекту с двумя положениями, который при нажатии запускает какие-то действия, определенные пользователем;

— checkbox — элемент управления с тремя возможными состояниями — true, false или mixed (input);

— radio — элемент, соответствующий радиокнопке — может быть выбран только один из группы (checkbox);

— radiogroup — группа радиокнопок (select);

— dialog — окно приложения, которое разработано, чтобы прервать текущую обработку применения, чтобы побудить п оль-зователя входить в информацию или требовать ответа;

— grid — интерактивный контроль в виде таблицы;

— gridcell — ячейка таблицы или древовидной структуры;

— link — интерактивная ссылка на внутренний или внешний ресурс;

— log — регион, в котором новая информация добавляется в определенном порядке к старой (region);

— marquee — область контента с изменяющейся информацией;

— menu — тип виджета, предлагающий пользователю список пунктов для выбора;

— menubar — представление пунктов меню, обычно в виде горизонтальной полоски;

— menuitem — пункт меню;

— option — элемент выбора из списка;

— listbox — виджет, позволяющий пользователю выбирать один или несколько пунктов из списка выбора;

— progressbar — аналог HTML5-элемента <progress>;

— scrollbar — графический объект, который управляет прокруткой содержания в области видимости (range);

— combobox — виджет, позволяющий выбрать текстовый элемент из списка или ввести текст в поле ввода;

— textbox — поле для ввода текста;

— slider — элемент для ввода данных пользователем, где пользователь выбирает значение в пределах данного диапазона (частный случай — <input type= ”range”>);

— Status — контейнер, содержание которого — информация для пользователя, недостаточно важно для элемента alert, чаще всего это статусная строка();

— tab — гримирующий элемент в виде tab-вкладки (widget);

— tabpanel — панель, собирающая tab-элементы (region);

— timer — тип региона, содержащего числовой счетчик, указывающий количество времени, прошедшего от стартовой точки или оставшегося до конечной точки (status);

— tooltip — контекстное всплывающее окно, показывающее описание для элемента (section);

— tree — тип списка, содержащий древовидно (nested) организованные подуровни (select);

— treeitem — пункт выбора в древовидной структуре (listitem, option).

Роли структуры документа (Document Structure Roles)

— document — регион, отмеченный как веб-документ;

— article — секция страницы, имеющая самостоятельное автономное содержание (соответствует <article></article>);

— definition — секция c определением термина или понятия (section);

— directory — шисок ссылок на членов группы, таких как статическое оглавление (list);

— group — секция, объединяющая элементы, не сгруппированные другими средствами;

— heading — соответствует контейнеру <header></header> в HTML5;

— img — контейнер для коллекции элементов, формирующих изображение;

— list — группа записей, объединенных в список;

— listitem — единичный элемент списка или директории;

— math — контейнер для представления математических выражений (section). Пример для формата MathML:

<div role="math" aria-label="6 divided by 4 equals 1.5">

<math xmlns="Http://www. w3.org/1998/Math/MathML">

<mfrac>

<mn>6</mn>

<mn>4</mn>

</mfrac>

<mo>=</mo>

<mn>1.5</mn>

</math>

</div>

— region — область веб-страницы или документа, имеющая большое самостоятельное значение (section);

— row — ряд ячеек таблицы (group);

— toolbar — коллекция обычно используемых кнопок функции представлена в компактной визуальной форме;

— note — секция, содержание которой вводное или вспомогательное для основного содержания ресурса (section).

Роли разметки (Landmark Roles)

Области страницы, предназначенной как навигационные ориентиры:

— application — регион, отмеченный как веб-приложение (в отличие от веб-документа);

— banner — область, занимающая определенное место, без привязки к содержанию (собственно буквальное значение этого термина);

— complementary — секция документа, служащая дополнением к основному содержанию;

— contentinfo — большой заметный регион, содержащий информацию о родительском документе;

— form — регион, содержащий коллекцию элементов вода;

— main — основная часть документа;

— navigation — регион, содержащий коллекцию элементов навигации, соответствует HTML5-контейнеру <nav></nav>;

— search — регион, содержащий коллекцию элементов ввода для поиска. Частный случай — <input type= "search">.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *