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

Абстрактные ARIA-роли — это базовый тип ролей в WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications или коротко ARIA) и фундамент для других. Это сложная концепция, которая в первую очередь нужна авторам ARIA. Обычным разработчикам они помогут глубже понять устройство спецификации и модели ролей.

У абстрактных ролей нет практической пользы, но они важны для онтологии — описания того, как устроены и связаны между собой все ARIA-роли. Так что у них две задачи:

• поддерживать в порядке модель ролей в спецификации — на какие категории они делятся;
• упростить процесс добавления новых ролей: благодаря абстрактным ролям понятно, какие функции могут быть у новых сущностей и как они связаны с уже существующими.

HTML-теги и ARIA-роли делятся на несколько больших групп в зависимости от того, что они делают на странице, какое у них содержимое и как с ними взаимодействуют пользователи. Это элементы с поведением окон, интерактивные и для структуры страниц. Абстрактные роли как раз описывают эту классификацию.

С абстрактными ролями связан ещё один термин из WAI-ARIA — роль-суперкласс (superclass role). Они описывают, как конкретная роль встроена в модель из спецификации и какие у неё функции, ограничения и другие особенности.

Если заглянете в ARIA, в описании к каждой сущности найдёте роль-суперкласс, и обычно это абстрактные роли. К примеру, роль-суперкласс для кнопок button — command, пунктов нумерованного и ненумерованного списков listitem — section и так далее.

Ролью-суперклассом могут быть одновременно две абстрактные роли и даже другие их типы. Например переключатель switch основан на чекбоксе checkbox.

Всего есть 12 абстрактных ролей. roletype — базовая роль. На ней основаны ключевые window, structure и widget. На structure построены section, sectionhead и range. В свою очередь section — роль-суперкласс для landmark. Наконец, роль widget ведёт к command, input и composite. На последней роли базируется select.

Отношения между абстрактными ролями в виде схемы:

Теперь давайте подробнее разберёмся с каждой из этих ролей.

Базовая роль, на которой основаны другие. Она определяет структуру и функциональность всех элементов — от параграфа до кнопки. В общем-то это и есть сама концепция роли 👾

На roletype основаны ключевые абстрактные роли window, structure и widget.

Окна программ или экраны приложений. window — роль-суперкласс для диалоговых окон dialog.

Элементы, которые определяют структуру документа. Помогает вспомогательным технологиям отличать статичные элементы от интерактивных. К примеру, structure — роль-суперкласс для элементов без семантики generic или разделителя separator. Также на structure построены другие абстрактные роли section, sectionhead, landmark и range.

Структурные элементы для разделов документов или приложений. Роль-суперкласс для группы элементов group, картинок img, параграфов paragraph, цитат blockquote или нумерованных и нумерованных списков list.

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

landmark — роль-суперкласс для хедера banner, футера contentinfo, основной части страницы main или навигации navigation.

Заголовок, который описывает смысл или содержание документа и приложения. Роль-суперкласс для заголовков ячеек или строк таблиц columnheader и rowheader, заголовков heading и вкладок tab.

Элемент для ввода данных с диапазоном значений. Роль-суперкласс для индикаторов выполнения задачи progressbar, ползунков для выбора чисел из диапазона slider или числовых значений в заданном диапазоне meter.

Интерактивные элементы, с которыми взаимодействуют пользователи. Для вспомогательных технологий элементы на основе widget это знак, что на них можно нажать, сделать фокус с клавиатуры, ввести данные и так далее. Скринридеры изменяют режим взаимодействия с такими элементами и переключаются на подходящую навигацию, когда встречают их на странице. К примеру, навигация с клавиши Tab переключается на стрелки, если это группа радиокнопок.

widget — роль-суперкласс для абстрактных ролей command, input, composite и select. Также работает и для ролей, которые можем использовать на практике. Например, для вкладок tab, строк таблиц row и полосы прокрутки scrollbar.

Интерактивные элементы, в которые вводят данные. На input основаны, например, роли чекбоксов checkbox, радиокнопок radio, числовых полей spinbutton и текстовых полей textbox.

Интерактивные элементы, с которыми можно взаимодействовать всеми способами кроме ввода данных. К примеру, на основе command построены кнопки button, ссылки link и пункты меню menuitem.

Интерактивные элементы, в которых находятся другие. Роль-суперкласс для сеток grid, числовых полей spinbutton, панелей навигации tablist и для другой абстрактной роли select.

Интерактивные элементы с одной или несколькими опциями на выбор. Роль-суперкласс для сложных элементов — выпадающего списка listbox, «настоящего» меню menu, группы радиокнопок radiogroup и древовидного списка tree.