Что такое aria-query

aria-query — это специализированная библиотека для JavaScript, предназначенная для работы с спецификацией ARIA (Accessible Rich Internet Applications). Она предоставляет структурированные данные о ролях ARIA, их состояниях и свойствах, а также о соответствующих элементах HTML, что делает возможным создание инструментов для проверки доступности веб-приложений и компонентов пользовательского интерфейса.

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

Основные структуры данных

Roles (Роли)

Роли в ARIA определяют назначение элемента в интерфейсе. В aria-query роли представлены объектом rolesMap, который содержит ключи — названия ролей, и значения — объект с подробной информацией о каждой роли.

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

import { roles } from 'aria-query';

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

Вывод включает:

  • abstract: булево значение, указывающее, является ли роль абстрактной и не применяемой напрямую к элементам.
  • superClass: массив родительских ролей, определяющий иерархию наследования.
  • props: свойства, которые могут быть применены к элементу с этой ролью.
  • requiredProps: обязательные для роли атрибуты.
  • nameRequired: булево значение, указывающее, требуется ли у элемента имя (например, текст или aria-label).

Elements (Элементы)

Библиотека также содержит карту элементов HTML и SVG, сопоставленных с ролями. Это позволяет определить, какая роль может быть применена к конкретному тегу.

Пример использования:

import { elementRoles } from 'aria-query';

const rolesForButton = elementRoles.get('button');
console.log(rolesForButton); // Set { 'button', 'menuitem', ... }

Каждый элемент хранит множество ролей, которые корректны для его применения.

Свойства и состояния ARIA

ARIA различает свойства (properties) и состояния (states). В aria-query они представлены через объект aria.

import { aria } from 'aria-query';

const ariaChecked = aria.get('aria-checked');
console.log(ariaChecked);

Ключевые поля свойства ARIA:

  • type: тип значения (boolean, token, string, idref и т.д.).
  • values: допустимые значения для token-типов.
  • defaultValue: значение по умолчанию.
  • deprecated: булево значение, показывающее, устарело ли свойство.
  • relatedRoles: роли, для которых свойство применимо.

Состояния и свойства помогают создавать валидаторы доступности, проверяющие соответствие элементов спецификации ARIA.

Основные методы работы с aria-query

Получение всех ролей

import { roles } from 'aria-query';

const allRoles = Array.from(roles.keys());
console.log(allRoles);

Метод keys() возвращает набор всех доступных ролей, что удобно для анализа и генерации документации.

Проверка корректности роли для элемента

import { elementRoles } from 'aria-query';

function isRoleValidForElement(element, role) {
  const validRoles = elementRoles.get(element);
  return validRoles ? validRoles.has(role) : false;
}

console.log(isRoleValidForElement('button', 'button')); // true
console.log(isRoleValidForElement('div', 'checkbox')); // true или false

Это позволяет автоматически определять нарушения ARIA, предотвращая ошибки доступности.

Работа с наследованием ролей

import { roles } from 'aria-query';

const listRole = roles.get('list');
console.log(listRole.superClass); // Array of parent roles

Роли могут наследовать свойства и ограничения от других ролей. Например, menuitemcheckbox наследует menuitem. Это важно для проверки совместимости свойств.

Практическое применение

  1. Валидация компонентов UI — проверка, соответствует ли роль, имя и состояние элемента спецификации ARIA.
  2. Генерация документации — автоматическое создание списков ролей и допустимых атрибутов для внутренних библиотек компонентов.
  3. Инструменты тестирования доступности — интеграция с ESLint-плагинами или CI/CD для автоматической проверки ARIA в проекте.
  4. Динамическая проверка HTML — создание утилит, которые анализируют HTML-разметку и сопоставляют элементы с ролями и свойствами ARIA.

Примеры комплексного анализа

import { roles, elementRoles, aria } from 'aria-query';

function validateElement(element, role, attributes) {
  const validRoles = elementRoles.get(element);
  if (!validRoles || !validRoles.has(role)) {
    return false; // Роль недопустима для этого элемента
  }

  const roleData = roles.get(role);
  for (const required of Object.keys(roleData.requiredProps)) {
    if (!attributes.hasOwnProperty(required)) return false;
  }

  return true;
}

const result = validateElement('button', 'button', { 'aria-pressed': true });
console.log(result); // true или false

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

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

Оглавление