Проверка доступности компонентов

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

Aria-query содержит несколько ключевых структур данных:

  • Roles — набор всех стандартных ролей ARIA с их характеристиками.
  • Properties — атрибуты ARIA, их типы и правила использования.
  • Mappings — соответствие между HTML-элементами и ролями, предопределенные рекомендации по использованию атрибутов.

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

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

Каждая роль в Aria-query описана объектом с такими свойствами, как name, abstract, superClass, requiredProps и supportedProps.

Пример использования для получения всех ролей:

import { roles } from 'aria-query';

console.log(Array.from(roles.keys()));
  • roles.keys() возвращает все названия ролей.
  • requiredProps — атрибуты, которые обязательно должны присутствовать для данной роли.
  • supportedProps — атрибуты, которые могут присутствовать, но не обязательны.
  • abstract — булево значение, указывающее, что роль не предназначена для прямого использования в DOM.

Атрибуты ARIA

Aria-query предоставляет подробное описание всех атрибутов ARIA через объект aria:

import { aria } from 'aria-query';

console.log(aria.get('aria-label'));

Каждое свойство содержит информацию о типе (string, boolean, token), допустимых значениях и совместимости с определенными ролями. Это позволяет создавать проверку на уровне кода, например:

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

Сопоставление ролей с элементами HTML

Aria-query содержит объект elementRoles, который сопоставляет HTML-теги и их атрибуты с рекомендуемыми ARIA-ролями:

import { elementRoles } from 'aria-query';

console.log(elementRoles.get('button'));
  • Возвращает карту возможных ролей для конкретного тега.
  • Позволяет автоматически выводить рекомендации по добавлению атрибутов для соответствия стандартам доступности.
  • Используется для создания линтеров и тестов, которые проверяют корректность DOM структуры.

Проверка доступности компонентов

Для комплексной проверки компонентов можно использовать комбинацию roles, aria и elementRoles. Общий алгоритм:

  1. Определение роли компонента (явно через role или через HTML-элемент).
  2. Проверка обязательных атрибутов роли (requiredProps).
  3. Проверка поддерживаемых атрибутов (supportedProps) и их значений.
  4. Анализ соответствия структуры DOM ожиданиям ARIA (например, наличие дочерних элементов с определёнными ролями).

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

function validateButton(element) {
  const role = element.getAttribute('role') || 'button';
  const roleInfo = roles.get(role);
  
  if (!roleInfo) return { valid: false, errors: ['Неизвестная роль'] };

  const errors = [];

  roleInfo.requiredProps.forEach(prop => {
    if (!element.hasAttribute(prop)) {
      errors.push(`Отсутствует обязательный атрибут: ${prop}`);
    }
  });

  roleInfo.supportedProps.forEach(prop => {
    if (element.hasAttribute(prop)) {
      const value = element.getAttribute(prop);
      // Дополнительная проверка типов и допустимых значений
      const ariaProp = aria.get(prop);
      if (ariaProp.type === 'boolean' && !['true','false'].includes(value)) {
        errors.push(`Недопустимое значение для ${prop}: ${value}`);
      }
    }
  });

  return { valid: errors.length === 0, errors };
}

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

Aria-query активно используется для:

  • Автоматизированных тестов доступности на уровне компонентов.
  • Разработки линтеров для React, Vue, Angular.
  • Генерации рекомендаций по улучшению доступности страниц.
  • Анализа существующих приложений на предмет корректного применения ARIA.

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

import { render } from '@testing-library/react';
import { validateButton } from './ariaValidator';
import MyButton from './MyButton';

test('кнопка имеет корректную роль и атрибуты', () => {
  const { getByRole } = render(<MyButton />);
  const button = getByRole('button');
  const result = validateButton(button);
  expect(result.valid).toBe(true);
});

Расширение возможностей Aria-query

Библиотека позволяет создавать свои наборы ролей и атрибутов для внутренних компонентов, добавлять кастомные проверки и генерировать отчёты. Основные методы расширения:

  • Создание пользовательских карт ролей (new Map([...roles, ...customRoles])).
  • Добавление собственных правил для линтеров.
  • Интеграция с CI/CD для автоматической проверки доступности при деплое.

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

Оглавление