Спецификация WAI-ARIA

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

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

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

Roles

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

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

Пример получения всех ролей:

import { roles } from 'aria-query';

roles.forEach((role, roleName) => {
  console.log(roleName, role.abstract, role.superClass);
});

Properties

props содержит перечень всех ARIA-свойств и состояний:

  • name: название свойства.
  • type: тип данных (string, boolean, token, idref и т.д.).
  • values: допустимые значения, если это перечислимый тип.
  • relatedConcepts: описание связи свойства с другими семантическими элементами HTML.
  • deprecated: указывает на устаревшие атрибуты.

Пример проверки допустимых свойств для роли button:

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

const buttonProps = roles.get('button').props;
buttonProps.forEach(prop => {
  console.log(prop, aria.get(prop));
});

Elements

elements — это сопоставление HTML-тегов с ARIA-ролями. Структура данных позволяет:

  • Проверять, какие роли могут быть применены к конкретному элементу.
  • Определять дефолтные роли HTML-элементов.
  • Понимать ограничения на использование свойств ARIA в разных тегах.

Пример проверки допустимых ролей для <div>:

import { elements } from 'aria-query';

const divRoles = elements.get('div');
console.log([...divRoles]);

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

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

Использование roles и props позволяет проверить, допустимо ли применение конкретного свойства к роли:

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

const buttonRole = roles.get('button');
const isAllowed = buttonRole.props.has('aria-pressed');
console.log(isAllowed); // true, если свойство поддерживается

Получение всех возможных значений свойства

Для перечислимых атрибутов можно получить полный набор допустимых значений:

import { aria } from 'aria-query';

const ariaOrientation = aria.get('aria-orientation');
console.log(ariaOrientation.values); // ["horizontal", "vertical"]

Иерархия ролей и супер-классы

Каждая роль может наследовать свойства от родительских ролей (superClass). Это обеспечивает полиморфизм ролей, что особенно важно для динамических компонентов:

const gridcellRole = roles.get('gridcell');
console.log(gridcellRole.superClass); // ["sectionhead", "widget"]

Понимание иерархии позволяет:

  • Автоматизировать проверку совместимости свойств.
  • Использовать наследуемые свойства без явного указания.
  • Создавать кастомные компоненты с корректной семантикой.

Практическое применение в валидации

Aria-query активно применяется для:

  • Анализа DOM на соответствие стандартам ARIA.
  • Создания тестов для автоматической проверки доступности.
  • Генерации рекомендаций для разработчиков интерфейсов.

Пример функции, проверяющей валидность применения свойства к элементу:

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

function isAriaValid(tagName, roleName, propName) {
  const role = roles.get(roleName);
  const elementRoles = elements.get(tagName) || new Set();
  
  if (!elementRoles.has(roleName)) return false;
  return role.props.has(propName);
}

console.log(isAriaValid('button', 'button', 'aria-pressed')); // true
console.log(isAriaValid('div', 'button', 'aria-pressed')); // false

Использование с TypeScript

Библиотека имеет строгие типы, что позволяет:

  • Автодополнение при работе с ролями и свойствами.
  • Безопасное применение свойств ARIA к элементам.
  • Интеграцию с инструментами линтинга и статического анализа.

Пример:

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

const checkboxRole = roles.get('checkbox');
checkboxRole.props.forEach(prop => {
  const ariaProp = aria.get(prop);
  console.log(ariaProp?.type);
});

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

Aria-query строится вокруг трех ключевых сущностей:

  1. roles — описывает семантическую сущность, её наследование и поддерживаемые свойства.
  2. props — описывает конкретные атрибуты ARIA, их типы и допустимые значения.
  3. elements — связывает HTML-теги с ролями и ограничивает возможности применения свойств.

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

Оглавление