Неявные и явные роли элементов

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

  • Явная роль (explicit role) задается через атрибут role. Например:
<div role="button">Кликни меня</div>

В этом случае <div> получает поведение кнопки не по умолчанию, а благодаря явному указанию роли.

  • Неявная роль (implicit role) определяется автоматически на основе семантики HTML-элемента. Например:
<button>Отправить</button>

Здесь <button> автоматически обладает ролью button, даже без атрибута role.

Библиотека aria-query предоставляет API для проверки и получения таких ролей.

Получение информации о ролях

Модуль roles из aria-query содержит объекты, описывающие каждую роль. Для каждой роли доступны следующие свойства:

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

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

import { roles } from 'aria-query';

const buttonRole = roles.get('button');
console.log(buttonRole.requiredProps); // []
console.log(buttonRole.props); // { aria-pressed: 'boolean', aria-expanded: 'boolean', ... }

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

Библиотека предоставляет elementRoles, объект, связывающий HTML-элементы с ролями:

import { elementRoles } from 'aria-query';

const rolesForDiv = elementRoles.get('div');
console.log(rolesForDiv); // Set { 'button', 'region', ... }

Каждый элемент может иметь несколько потенциальных неявных ролей, в зависимости от его атрибутов и контекста. Например:

  • <header> → роль banner (implicit)
  • <footer> → роль contentinfo (implicit)
  • <ul> → роль list (implicit)
  • <li> → роль listitem (implicit)
  • <main> → роль main (implicit)

Если элемент содержит атрибут role, эта роль переопределяет неявную роль.

Проверка явной и неявной роли элемента

Для анализа ролей часто используется следующий подход:

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

function getRoles(elementName, explicitRole = null) {
  const implicitRoles = elementRoles.get(elementName) || new Set();
  if (explicitRole) {
    return { explicit: explicitRole, implicit: [...implicitRoles] };
  }
  return { implicit: [...implicitRoles] };
}

console.log(getRoles('button'));
// { implicit: ['button'] }

console.log(getRoles('div', 'button'));
// { explicit: 'button', implicit: ['button', 'region', ...] }

Таким образом, можно получить полное представление о роли элемента в DOM и определить, есть ли конфликт между явной и неявной ролью.

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

Роли могут быть абстрактными, что означает невозможность использования их напрямую. Например, command является абстрактной и должна наследоваться конкретными ролями (button, link).

const commandRole = roles.get('command');
console.log(commandRole.abstract); // true

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

  • корректность роли для элемента;
  • совместимость заданных ARIA-свойств;
  • необходимость обязательных свойств.

Пример функции для проверки соответствия роли элементу:

function isRoleValidForElement(elementName, roleName) {
  const implicitRoles = elementRoles.get(elementName) || new Set();
  return implicitRoles.has(roleName);
}

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

Контекст и комбинирование ролей

Некоторые неявные роли зависят от структуры документа. Пример:

  • <li> внутри <ul> → роль listitem
  • <li> вне <ul> → не имеет неявной роли

Для сложных интерфейсов с кастомными компонентами важно учитывать контекст, чтобы не нарушать семантику и доступность. Библиотека aria-query предоставляет полную карту возможных неявных и явных ролей, что упрощает автоматическую проверку компонентов и линтеров для JSX/React.

Практическая схема использования

  1. Определить элемент и проверить его неявные роли через elementRoles.
  2. Проверить, разрешена ли явная роль через roles.
  3. Сверить требуемые свойства и состояния ARIA (requiredProps, props).
  4. Учесть контекст (например, вложенность элементов и семантику).
  5. Применить явную роль только при необходимости, чтобы не ломать неявную семантику.

Вывод

Использование aria-query позволяет программно различать явные и неявные роли, валидировать свойства ARIA и строить доступные веб-компоненты с корректной семантикой. Это фундаментальный инструмент для анализа HTML и JSX, упрощения линтинга и построения библиотек компонентов с полной поддержкой доступности.

Оглавление