Инструменты браузера для ARIA

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

Основные экспорты библиотеки:

  • roles — объект, содержащий описание всех ARIA-ролей.
  • elementRoles — отображение HTML-элементов на возможные ARIA-роли.
  • roleValues — все допустимые значения ролей и атрибутов.
  • attributes — описание всех ARIA-атрибутов и их допустимых значений.

Библиотека не выполняет проверку DOM в реальном времени, а предоставляет статическую модель ARIA, что делает её идеальной для линтеров, тестов и генераторов кода.

Структура ролей и их свойства

Каждая роль в aria-query описывается объектом, который включает:

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

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

import { roles } from 'aria-query';

const buttonRole = roles.get('button');
console.log(buttonRole);
/*
{
  abstract: false,
  baseConcepts: [{ name: 'button', attributes: [] }],
  props: { 'aria-pressed': null },
  requiredProps: [],
  superClass: [['roletype', 'widget', 'command']]
}
*/

Ключевой момент: props и requiredProps помогают линтерам выявлять ошибки, например использование aria-pressed вне интерактивных элементов.

Сопоставление HTML-элементов с ролями

elementRoles — это карта соответствий элементов DOM и ARIA-ролей. Она позволяет определить, какие роли могут быть назначены конкретным элементам и какие значения считаются корректными.

import { elementRoles } from 'aria-query';

const divRoles = elementRoles.get('div');
console.log(divRoles);
/*
Set { 'button', 'checkbox', 'menuitem', ... }
*/

Особенности использования:

  • Поддерживаются как нативные роли, так и дополнительные ARIA-обозначения.
  • Наборы ролей представлены как Set, что позволяет легко проверять включение или исключение определённых ролей.
  • Комбинация elementRoles и roles даёт полный контроль над семантикой элементов при динамическом создании интерфейса.

Работа с атрибутами ARIA

Библиотека предоставляет объект attributes, где для каждого ARIA-атрибута указаны:

  • Возможные типы значений (string, boolean, tristate и др.).
  • Перечень допустимых значений (например, для aria-live: "off" | "polite" | "assertive").
  • Связанные роли, где атрибут применим.

Пример проверки атрибута:

import { attributes } from 'aria-query';

const ariaLive = attributes.get('aria-live');
console.log(ariaLive);
/*
{
  type: 'token',
  values: ['off', 'polite', 'assertive'],
  applicableRoles: ['alert', 'log', 'status']
}
*/

Важно: использование атрибута вне списка applicableRoles считается ошибкой доступности.

Применение в линтерах и тестах

Библиотека aria-query является ядром многих инструментов проверки доступности, таких как eslint-plugin-jsx-a11y. Она позволяет:

  1. Верифицировать корректность ролей и атрибутов.
  2. Проверять соответствие роли элементу HTML.
  3. Автоматически рекомендовать исправления ошибок.

Пример простого валидатора роли для элемента:

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

function validateRole(elementName, roleName) {
  const possibleRoles = elementRoles.get(elementName);
  if (!possibleRoles || !possibleRoles.has(roleName)) {
    return false;
  }
  const role = roles.get(roleName);
  return !role.abstract;
}

console.log(validateRole('div', 'button')); // true
console.log(validateRole('span', 'menu'));  // false

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

superClass роли задаёт иерархию, которая позволяет понимать, какие свойства и состояния унаследованы. Например, все виджеты (widget) поддерживают интерактивные ARIA-свойства, а специализированные элементы, такие как checkbox или radio, добавляют свои собственные.

Использование суперклассов облегчает:

  • Автоматическую генерацию правил линтинга.
  • Анализ совместимости атрибутов с ролями.
  • Определение поведения кастомных компонентов, повторяющих стандартные роли.

Полезные паттерны использования

  1. Динамическая генерация компонентов с корректными ARIA-атрибутами.
  2. Валидация JSX-разметки при сборке проекта.
  3. Создание собственных правил доступности для специфичных интерфейсов.
  4. Синхронизация данных о ролях между фронтендом и документацией.

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

Оглавление