aria Map

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

Центральным объектом библиотеки является aria Map — карта, содержащая метаданные о всех стандартных ARIA-ролях и свойствах. Эта карта используется для валидации и анализа структуры DOM в контексте доступности.

Структура aria Map

Aria Map представляет собой объект, где каждая ключ-значение пара соответствует определённой роли ARIA:

import { roles } from 'aria-query';

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

Ключи карты — это имена ролей, например, 'button', 'checkbox', 'dialog'. Значения — объекты, содержащие подробную информацию о роли:

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

Пример структуры для роли 'button':

{
  name: 'button',
  description: 'An input that allows for user-triggered actions.',
  requiredProps: [],
  props: {
    'aria-pressed': 'tristate',
    'aria-disabled': 'boolean'
  },
  superClass: ['widget', 'command'],
  abstract: false
}

Работа с ролями

Метод roles.get(roleName) возвращает объект с полным описанием роли. Если роль не найдена, возвращается undefined.

Примеры:

import { roles } from 'aria-query';

// Получение данных о роли checkbox
const checkboxRole = roles.get('checkbox');
console.log(checkboxRole.props); // { 'aria-checked': 'tristate', 'aria-disabled': 'boolean' }

Метод roles.keys() возвращает массив всех доступных ролей:

const allRoles = Array.from(roles.keys());
console.log(allRoles.includes('dialog')); // true

Метод roles.values() позволяет итерировать по объектам ролей, получая все их свойства.

Связи между ролями

Aria Map хранит информацию о суперклассах роли. Это позволяет строить иерархию ролей и понимать, какие базовые свойства наследуются. Например, 'button' и 'checkbox' наследуются от 'widget', что значит, что для этих элементов допустимы общие свойства виджетов.

const role = roles.get('button');
console.log(role.superClass); // ['widget', 'command']

Проверка допустимых свойств

Aria Map позволяет проверять, какие ARIA-свойства применимы к конкретной роли:

const buttonProps = roles.get('button').props;
console.log('aria-disabled' in buttonProps); // true
console.log('aria-checked' in buttonProps); // false

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

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

Некоторые роли помечены как abstract: true. Они не предназначены для прямого использования в DOM, но служат базой для наследования другими ролями. Например, 'widget' — абстрактная роль, от которой наследуются 'button', 'checkbox', 'slider' и другие.

const widgetRole = roles.get('widget');
console.log(widgetRole.abstract); // true

Практическое использование

  1. Валидация атрибутов ARIA
import { roles } from 'aria-query';

function validateAria(roleName, props) {
  const role = roles.get(roleName);
  if (!role) return false;

  return Object.keys(props).every(prop => prop in role.props);
}

console.log(validateAria('button', { 'aria-disabled': true })); // true
console.log(validateAria('button', { 'aria-checked': true })); // false
  1. Создание инструментов для анализа доступности

Библиотека позволяет строить функции, которые проверяют правильность применения ARIA-атрибутов на страницах, помогают автоматизировать аудит доступности и формируют отчёты о нарушениях стандартов.

  1. Поддержка динамических компонентов

При создании компонентов на React или Vue можно использовать aria Map для автоматического присвоения корректных ARIA-атрибутов в зависимости от типа элемента и его состояния.

Совместимость с HTML и DOM

Aria Map не ограничивается только спецификацией ARIA: она учитывает соответствие HTML-элементам. Например, <button> по умолчанию имеет роль 'button', а <input type="checkbox"> — 'checkbox'. Это позволяет сопоставлять роли с существующими элементами и корректно расширять их с помощью ARIA-атрибутов.

Выводы о структуре и использовании

Aria Map в библиотеке aria-query — это мощный инструмент для:

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

Она обеспечивает строгую типизацию ролей и позволяет создавать интерфейсы, полностью соответствующие стандартам веб-доступности.

Оглавление