Поиск несоответствий в ролях

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

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

  • ARIA role — атрибут role в HTML, который определяет семантику элемента для вспомогательных технологий.
  • ElementRole — объект в Aria-query, описывающий, какие роли могут быть назначены конкретному элементу.
  • RoleMap — карта соответствия между HTML-элементами и их допустимыми ARIA-ролями.
  • PropsMap — карта допустимых свойств (attributes) для каждой роли.

Несоответствия возникают, если элемент получает роль, не поддерживаемую его типом. Например, <div> с ролью button допустим, а <span> с ролью checkbox — нет.

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

Импортировать необходимые модули:

import { roles, elementRoles } from 'aria-query';
  • roles — карта всех ролей ARIA с их свойствами.
  • elementRoles — карта, определяющая, какие роли допустимы для конкретного HTML-элемента.

Пример проверки всех ролей для элемента <input>:

const inputRoles = elementRoles.get('input');
console.log([...inputRoles.keys()]);

Результат покажет роли, которые ARIA допускает для элемента <input>, включая стандартные (textbox, checkbox, radio) и дополнительные.

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

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

function isRoleValidForElement(elementTag, role) {
  const validRoles = elementRoles.get(elementTag);
  if (!validRoles) return false;
  return validRoles.has(role);
}

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

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

Таким образом, легко отфильтровать все элементы с недопустимыми ролями.

Автоматическая проверка несоответствий в DOM

Для интеграции с реальной страницей можно пройтись по всем элементам с атрибутом role и проверить их валидность:

const elementsWithRoles = document.querySelectorAll('[role]');

elementsWithRoles.forEach(el => {
  const tagName = el.tagName.toLowerCase();
  const role = el.getAttribute('role');
  if (!isRoleValidForElement(tagName, role)) {
    console.warn(`Несоответствие роли: <${tagName} role="${role}">`);
  }
});

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

Дополнительные проверки свойств ролей

Каждая роль может требовать или запрещать определённые атрибуты ARIA. Для этого используется roles.get(role):

const buttonRole = roles.get('button');
console.log(buttonRole.requiredProps); // Обязательные свойства, например aria-pressed
console.log(buttonRole.prohibitedProps); // Свойства, запрещённые для этой роли

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

Рекомендации по использованию Aria-query

  1. Регулярная проверка ролей — интегрировать проверки в процесс сборки или тестирования компонентов.
  2. Валидация динамически создаваемых элементов — особенно важна для UI-фреймворков, где элементы создаются через JavaScript.
  3. Сопоставление с документацией WAI-ARIA — Aria-query предоставляет актуальные данные, что минимизирует риск ошибок в ручной проверке.

Пример комплексной функции проверки

function validateRoles(domRoot = document) {
  const elements = domRoot.querySelectorAll('[role]');
  const issues = [];

  elements.forEach(el => {
    const tag = el.tagName.toLowerCase();
    const role = el.getAttribute('role');

    if (!isRoleValidForElement(tag, role)) {
      issues.push({ element: el, issue: 'Недопустимая роль' });
      return;
    }

    const roleProps = roles.get(role);
    if (!roleProps) return;

    roleProps.requiredProps.forEach(prop => {
      if (!el.hasAttribute(prop)) {
        issues.push({ element: el, issue: `Отсутствует обязательное свойство: ${prop}` });
      }
    });

    roleProps.prohibitedProps.forEach(prop => {
      if (el.hasAttribute(prop)) {
        issues.push({ element: el, issue: `Запрещённое свойство: ${prop}` });
      }
    });
  });

  return issues;
}

console.log(validateRoles());

Этот подход позволяет получить полный список несоответствий, включая роли и свойства, и использовать его для улучшения доступности веб-страницы.

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

Оглавление