Роли, состояния и свойства

Библиотека aria-query предназначена для работы с ARIA-спецификациями в контексте веб-разработки. Она предоставляет структурированные данные о ARIA-ролях, состояниях и свойствах, позволяя анализировать доступность интерфейсов, автоматизировать проверки и строить инструменты для тестирования.

Aria-query экспортирует три ключевых объекта: roles, elements, properties. Каждый из них представляет собой карту (Map), содержащую детализированную информацию о конкретных ARIA-концептах.

Роли (Roles)

Роли описывают назначение элемента в пользовательском интерфейсе и помогают вспомогательным технологиям правильно интерпретировать содержимое.

Доступ к ролям

import { roles } from 'aria-query';

console.log(roles.get('button'));

Роль хранится как объект с множеством полей:

  • name: логическое имя роли.
  • abstract: флаг, указывающий, что роль не может быть напрямую назначена элементу.
  • superClass: массив ролей, от которых наследуются свойства.
  • props: карта поддерживаемых ARIA-свойств.

Пример анализа роли

const buttonRole = roles.get('button');

console.log(buttonRole.abstract); // false
console.log(buttonRole.superClass); // [['command', 'widget', 'input']]
console.log(buttonRole.props); // Map { 'aria-pressed' => { type: 'boolean', required: false }, ... }

superClass используется для определения иерархии ролей. Например, роль menuitem наследует свойства от command, что облегчает проверку соответствия спецификации.

Состояния и свойства (States and Properties)

ARIA определяет состояния (aria-checked, aria-hidden) и свойства (aria-label, aria-labelledby) для элементов. В aria-query они объединены в объект properties.

import { properties } from 'aria-query';

console.log(properties.get('aria-checked'));

Каждое свойство имеет следующую структуру:

  • type: тип значения (boolean, token, idref, string, etc.).
  • values: массив допустимых значений (для token).
  • required: флаг обязательности свойства для конкретной роли.
  • inherits: флаг, показывающий, может ли свойство наследоваться от родителя.

Проверка соответствия роли

const buttonProps = roles.get('button').props;

if (buttonProps.has('aria-pressed')) {
    console.log('Роль button поддерживает состояние aria-pressed');
}

Такой подход позволяет программно проверять, какие свойства и состояния применимы к конкретной роли.

Элементы (Elements)

Объект elements предоставляет информацию о HTML-элементах и их совместимости с ролями. Структура ключа — тег, а значение — карта с ролями и их характеристиками:

import { elements } from 'aria-query';

console.log(elements.get('button'));

Пример структуры:

Map {
  'button' => {
    abstract: false,
    requiredContextRole: null,
    supportedRoles: Map { 'button' => { ... } }
  }
}
  • supportedRoles показывает, какие роли могут быть назначены элементу.
  • requiredContextRole указывает, в каком контексте роль корректна.
  • abstract отмечает элементы, которые не используются напрямую.

Типы данных ARIA

Для всех состояний и свойств aria-query определяет типы значений:

  • boolean — true/false.
  • tristate — true/false/mixed.
  • token — строка из фиксированного набора значений.
  • idref — идентификатор другого элемента.
  • string — произвольный текст.

Эта типизация позволяет выполнять статический анализ интерфейса, обеспечивая соответствие стандартам доступности.

Интеграция с инструментами тестирования

Aria-query активно используется в таких библиотеках, как eslint-plugin-jsx-a11y и axe-core. Она обеспечивает:

  • Валидацию назначенных ролей.
  • Проверку правильности использования ARIA-состояний и свойств.
  • Автоматическую генерацию предупреждений для некорректных комбинаций.

Пример проверки роли и свойства в коде React:

const role = 'checkbox';
const prop = 'aria-checked';

if (roles.has(role) && roles.get(role).props.has(prop)) {
    console.log(`${prop} корректно для роли ${role}`);
} else {
    console.warn(`${prop} нельзя использовать с ролью ${role}`);
}

Программная навигация по ARIA

Aria-query позволяет программно строить карты доступности:

  • Получить все роли с определенным свойством.
  • Найти элементы, которые поддерживают конкретную роль.
  • Проверять наследование свойств через superClass.
const rolesWithAriaHidden = Array.from(roles).filter(([name, role]) =>
    role.props.has('aria-hidden')
).map(([name]) => name);

console.log(rolesWithAriaHidden);

Такой подход облегчает создание адаптивных UI-библиотек, в которых компоненты автоматически получают корректные ARIA-атрибуты.

Итоговая структура

  • roles — полная карта ролей с их иерархией и поддерживаемыми свойствами.
  • properties — все состояния и свойства с типами, значениями и наследованием.
  • elements — соответствие HTML-элементов и ролей.

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

Оглавление