Атрибуты HTML как ARIA-свойства

Библиотека aria-query предоставляет структурированный способ работы с ARIA-ролями, свойствами и состояниями в контексте HTML-документов. Основное назначение библиотеки — обеспечение корректной поддержки доступности (accessibility, a11y) при разработке интерфейсов на JavaScript, анализе и валидации разметки.

Основные понятия ARIA

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

  • Roles (роли): описывают назначение элемента (например, button, navigation, dialog).
  • Properties (свойства): описывают характеристики элемента, которые могут не быть очевидны из стандартных HTML-атрибутов (например, aria-checked, aria-expanded).
  • States (состояния): динамические состояния элементов (например, aria-hidden, aria-disabled).

В библиотеке aria-query эти категории представлены отдельными объектами, которые можно использовать для проверки соответствия HTML-элементов поддерживаемым ARIA-атрибутам.

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

Rоли в aria-query определяются как объекты с набором допустимых свойств и состояний. Например:

import { roles } from 'aria-query';

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

Результат представляет собой объект с полями:

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

Это позволяет динамически проверять корректность применения ARIA-ролей к HTML-элементам.

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

Библиотека предоставляет объект properties, где перечислены все ARIA-свойства и состояния:

import { properties } from 'aria-query';

const ariaChecked = properties.get('aria-checked');
console.log(ariaChecked.type); // boolean, tri-state и т.д.

Каждое свойство содержит:

  • type — тип значения (boolean, tristate, string и другие).
  • values — допустимые значения для свойства.
  • relatedConcepts — ссылки на HTML-атрибуты, которые соответствуют данному ARIA-свойству.

Это облегчает проверку соответствия HTML-атрибутов ARIA-спецификации и позволяет автоматически генерировать рекомендации по доступности.

Соответствие HTML и ARIA

Одна из ключевых функций aria-query — сопоставление стандартных HTML-атрибутов с ARIA-свойствами. Например:

  • input[type="checkbox"] автоматически соответствует роли checkbox и поддерживает свойство aria-checked.
  • a[href] соответствует роли link.
  • button соответствует роли button и поддерживает свойства aria-pressed и aria-disabled.

С помощью методов библиотеки можно проверять, поддерживает ли элемент заданную роль или свойство:

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

const isButtonRole = elementRoles.get('button')?.has('button'); // true

Валидация и динамическая проверка

Aria-query позволяет строить валидаторы, которые анализируют HTML-дерево и проверяют правильность использования ARIA:

  • Проверка, соответствует ли роль элементу.
  • Проверка, поддерживает ли элемент заданные свойства.
  • Генерация предупреждений для недопустимых комбинаций.

Пример проверки:

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

function validateAria(element) {
  const role = element.getAttribute('role');
  if (!roles.has(role)) {
    console.warn(`Неподдерживаемая роль: ${role}`);
  }

  [...element.attributes].forEach(attr => {
    if (properties.has(attr.name)) {
      const prop = properties.get(attr.name);
      if (!prop.values.includes(attr.value)) {
        console.warn(`Недопустимое значение ${attr.value} для ${attr.name}`);
      }
    }
  });
}

Применение в разработке интерфейсов

Использование aria-query полезно для:

  • Линтинга и статического анализа React, Vue или Vanilla JS приложений.
  • Генерации списков поддерживаемых ARIA-ролей и атрибутов.
  • Автоматической проверки совместимости HTML-элементов с ARIA-спецификацией.
  • Создания библиотек компонентов с встроенной поддержкой доступности.

Особенности работы с абстрактными ролями

Абстрактные роли не применяются напрямую к элементам, но служат базой для наследования. Например, роль widget является абстрактной, а конкретные элементы, такие как button или checkbox, наследуют её свойства. В aria-query это отражено через поле abstract и массив superClassRoles.

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

Aria-query часто используется совместно с ESLint-плагинами для a11y (eslint-plugin-jsx-a11y), что позволяет проверять JSX-разметку на корректность ARIA-атрибутов в проектах на React. Также библиотека удобна для генерации документации и схем в TypeScript, так как все роли и свойства представлены в виде структурированных объектов.

Оглавление