Поиск роли по тегу

Для работы с библиотекой aria-query требуется наличие Node.js. Установка производится через npm:

npm install aria-query

После установки библиотеку можно подключить в проекте:

const { roles, elements } = require('aria-query');

Здесь roles предоставляет информацию о всех ARIA-ролях, а elements — соответствие HTML-тегов и их ARIA-атрибутов.

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

Объект roles является картой (Map) всех ARIA-ролей. Каждая запись содержит имя роли в качестве ключа и объект с подробной информацией в качестве значения.

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

console.log(roles.get('button'));
/* Вывод:
{
  abstract: false,
  baseConcepts: [{ name: 'button', attributes: [] }],
  requiredProps: [],
  superClass: [...],
  props: new Map([...]),
  name: null
}
*/

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

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

Поиск роли по тегу

Библиотека предоставляет карту elements, где ключ — HTML-тег, а значение — объект с данными о поддерживаемых ARIA-ролях.

Пример структуры объекта для тега <button>:

console.log(elements.get('button'));
/* Вывод:
{
  name: null,
  roles: new Map([
    ['button', { required: true, implicit: true }]
  ])
}
*/

  • roles — карта ролей, которые могут быть ассоциированы с тегом.

    • Ключ — имя роли.

    • Значение — объект с флагами:

      • required: роль обязательна для тега.
      • implicit: роль присвоена автоматически без явного ARIA-атрибута.

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

const buttonRoles = elements.get('button').roles;
for (const [role, details] of buttonRoles) {
  console.log(role, details);
}

Фильтрация ролей

Иногда необходимо получить только неабстрактные роли или те, которые могут быть использованы явно. Для этого используется фильтрация:

const explicitRoles = Array.from(roles.entries())
  .filter(([roleName, roleData]) => !roleData.abstract)
  .map(([roleName]) => roleName);

console.log(explicitRoles.includes('button')); // true

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

Получение информации о свойствах роли

После нахождения роли по тегу, можно получить её доступные свойства и атрибуты:

const buttonRole = roles.get('button');
console.log([...buttonRole.props.keys()]);
// Выводит список всех ARIA-свойств, поддерживаемых ролью button

Эта информация важна для проверки соответствия HTML-элементов требованиям доступности.

Использование baseConcepts для связи с HTML

Каждая роль хранит массив baseConcepts, который связывает её с конкретными HTML-тегами и атрибутами:

roles.get('checkbox').baseConcepts.forEach(concept => {
  console.log(concept.name, concept.attributes);
});
  • name — имя HTML-тега (например, input).
  • attributes — массив объектов, определяющих обязательные атрибуты (type="checkbox").

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

Пример: проверка совместимости тега и роли

Можно проверить, подходит ли роль для конкретного тега:

function canTagHaveRole(tag, role) {
  const element = elements.get(tag);
  return element?.roles.has(role);
}

console.log(canTagHaveRole('button', 'button')); // true
console.log(canTagHaveRole('div', 'button'));    // false

Такой механизм используется при автоматизированной проверке доступности, например в тестах ESLint или инструментов типа axe-core.

Советы по эффективной работе с aria-query

  • Использовать roles для проверки свойств роли и elements для связи с HTML-тегами.
  • Фильтровать абстрактные роли при генерации списка доступных ролей для пользователей.
  • Применять baseConcepts для автоматической проверки корректного использования ARIA-атрибутов.
  • Для динамических интерфейсов проверять комбинации тегов и ролей, чтобы избежать конфликтов и дублирования.

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

Оглавление