Связь HTML-элементов и ARIA-ролей

Библиотека Aria-query предназначена для сопоставления HTML-элементов с соответствующими ARIA-ролями. Она обеспечивает разработчикам возможность проверять корректность использования ARIA-атрибутов и ролей, а также строить динамические интерфейсы с соблюдением доступности (accessibility).

В основе работы лежат два ключевых понятия: элементы и роли. Библиотека предоставляет данные о том, какие HTML-теги могут иметь какие роли, какие роли являются валидными для конкретных элементов, а также какие ARIA-атрибуты поддерживаются для этих ролей.

Структура данных

В Aria-query данные организованы в виде Map-объектов:

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

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

import { elementRoles } from 'aria-query';

console.log(elementRoles.get('button'));
// Set { 'button' }

Здесь ключом является тег HTML (button), а значением — Set ролей, допустимых для этого элемента. Для <div> это может быть множество ролей, например button, dialog, tabpanel и другие, в зависимости от контекста.

Проверка корректности ARIA-ролей

Для динамических интерфейсов важно убедиться, что элемент имеет совместимую роль. С помощью Aria-query это делается так:

import { elementRoles } from 'aria-query';

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

console.log(isRoleValidForElement('div', 'button')); // true
console.log(isRoleValidForElement('span', 'textbox')); // false

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

Связь ролей и атрибутов

Каждая ARIA-роль поддерживает определённый набор атрибутов и состояний. Эти данные находятся в объекте roles:

import { roles } from 'aria-query';

const buttonRole = roles.get('button');
console.log(buttonRole); 
/*
{
  abstract: false,
  requiredProps: new Set(),
  superClass: [{ concept: ['widget'] }],
  accessibleNameRequired: true,
  props: new Map([...])
}
*/
  • abstract — определяет, является ли роль абстрактной (не назначается напрямую элементу).
  • requiredProps — свойства, которые должны быть заданы для корректной работы роли.
  • superClass — иерархия ролей, указывающая на наследуемые свойства.
  • accessibleNameRequired — флаг, указывающий, что элемент с этой ролью должен иметь доступное имя.

Использование roles позволяет автоматически проверять соответствие атрибутов и избегать ошибок при применении ARIA в коде.

Практика: сопоставление элементов и ролей

Aria-query особенно полезна для генерации динамических форм и виджетов. Пример: проверка, может ли <section> быть region и требует ли он имени:

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

const tagName = 'section';
const role = 'region';

if (elementRoles.get(tagName)?.has(role)) {
  const roleData = roles.get(role);
  console.log(`Роль ${role} валидна для <${tagName}>`);
  if (roleData.accessibleNameRequired) {
    console.log('Необходимо задать доступное имя (aria-label или aria-labelledby)');
  }
}

Таким образом, библиотека связывает семантику HTML с ARIA-ролями, гарантируя соответствие стандартам доступности.

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

  • Абстрактные роли нельзя назначать напрямую элементам (abstract: true), они служат для организации иерархий. Пример: widget, structure.
  • Конкретные роли можно применять к HTML-элементам (abstract: false), например button, checkbox, dialog.

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

Методы и утилиты

Кроме Map-объектов, Aria-query предоставляет полезные методы:

  • getElementRoles(tagName) — возвращает все допустимые роли для элемента.
  • getRole(roleName) — возвращает объект с данными о роли, включая свойства и атрибуты.
  • getRoleKeys() — список всех ролей.

Пример фильтрации элементов по роли:

import { elementRoles } from 'aria-query';

const elementsSupportingButton = [...elementRoles.entries()]
  .filter(([tag, roles]) => roles.has('button'))
  .map(([tag]) => tag);

console.log(elementsSupportingButton); 
// ['button', 'div', 'input', ...]

Использование в тестировании и линтинге

Aria-query активно применяется в сочетании с инструментами тестирования доступности, такими как eslint-plugin-jsx-a11y. Она обеспечивает:

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

Пример интеграции с тестами:

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

const tagName = 'input';
const role = 'checkbox';

assert(elementRoles.get(tagName).has(role), `<${tagName}> не может быть ${role}`);

Это позволяет поддерживать консистентность семантики интерфейсов и предотвращает ошибки доступности на раннем этапе разработки.

Итоговая структура данных в Aria-query

  • elementRoles — Map тег → Set ролей
  • roles — Map роль → свойства роли (атрибуты, состояния, наследование)
  • roleKeys — массив всех доступных ролей

Связь HTML-элементов и ARIA-ролей через Aria-query делает возможным динамическое сопоставление, валидацию и поддержку доступности интерфейсов без ручной проверки документации.

Хотите, я могу подготовить разбор примеров реального использования Aria-query в React-компонентах, где будут показаны динамические роли и проверка атрибутов?

Оглавление