Составные конфигурации

Библиотека Axe-core предназначена для автоматизированного тестирования доступности веб-приложений и компонентов интерфейса. Один из ключевых механизмов её гибкой настройки — составные конфигурации, позволяющие комбинировать наборы правил, параметров и контекстов для достижения точного и детального аудита доступности.

Основы конфигураций

Конфигурация в Axe-core — это объект, который задаёт:

  • rules — набор правил, которые будут применяться при анализе. Каждое правило может быть включено, отключено или модифицировано.
  • tags — метки, которые помогают группировать правила по категориям (например, “wcag2a”, “wcag2aa”, “experimental”).
  • checks — дополнительные проверки элементов DOM.
  • includedContexts / excludedContexts — определяют области DOM, на которых должна применяться проверка или, наоборот, игнорироваться.
  • runOnly — параметр для запуска только конкретных правил, тегов или групп.

Пример базовой конфигурации:

const customConfig = {
  rules: {
    'color-contrast': { enabled: true },
    'image-alt': { enabled: false }
  },
  runOnly: {
    type: 'tag',
    values: ['wcag2aa', 'wcag21aa']
  }
};

В этом примере включено правило проверки контраста текста, а проверка наличия атрибута alt на изображениях отключена.

Комбинирование правил

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

const baseConfig = {
  rules: { 'label': { enabled: true } }
};

const experimentalConfig = {
  rules: { 'focus-order-semantics': { enabled: true } }
};

const combinedConfig = {
  ...baseConfig,
  rules: { ...baseConfig.rules, ...experimentalConfig.rules }
};

В этом примере происходит слияние правил из двух конфигураций, позволяя одновременно проверять корректность меток и порядок фокуса в интерфейсе.

Вложенные контексты и исключения

Axe-core поддерживает детальную настройку областей проверки через поля includedContexts и excludedContexts. Эти контексты могут быть CSS-селекторами, DOM-элементами или функциями, возвращающими набор элементов.

Пример:

const contextConfig = {
  includedContexts: ['#main-content', '.accessible-section'],
  excludedContexts: ['.ads-banner', '#hidden-modal']
};

Здесь проверка будет применяться только к основной части контента и специально отмеченным секциям, игнорируя баннеры и скрытые модальные окна.

Динамическая модификация конфигураций

Составные конфигурации можно динамически менять в процессе выполнения теста. Это удобно, если необходимо адаптировать проверку под конкретное состояние страницы.

const pageConfig = {
  rules: { 'color-contrast': { enabled: true } }
};

if (document.querySelector('.dynamic-component')) {
  pageConfig.rules['aria-roles'] = { enabled: true };
}

Такая стратегия позволяет адаптировать набор правил под изменяющийся DOM, повышая точность анализа.

Использование тегов для управления набором правил

Теги (tags) являются мощным инструментом для составных конфигураций. Можно создать конфигурацию с комбинированными тегами, чтобы запускать сразу несколько групп правил, например:

const taggedConfig = {
  runOnly: {
    type: 'tag',
    values: ['wcag2a', 'wcag2aa', 'best-practice']
  }
};

Эта конфигурация запускает проверку всех правил, относящихся к основным уровням доступности WCAG 2.0, а также к дополнительным лучшим практикам.

Практическая рекомендация по построению сложных конфигураций

  1. Выделять базовую конфигурацию с правилами, обязательными для всех страниц.
  2. Создавать модули расширений с экспериментальными или проектно-специфическими правилами.
  3. Использовать слияние объектов для комбинирования базовой и расширенной конфигураций.
  4. Определять включенные и исключенные контексты для тонкой настройки области проверки.
  5. Применять теги для группировки правил по категориям стандартов и уровней доступности.

Интеграция с тестовыми фреймворками

Составные конфигурации легко интегрируются с такими инструментами, как Jest, Cypress, Puppeteer, что позволяет создавать модульные и повторяемые проверки доступности на всех уровнях проекта. В этом случае объект конфигурации передается в метод axe.run:

const results = await axe.run(document, combinedConfig);

results содержит подробную информацию о найденных нарушениях, их приоритетах, селекторах элементов и рекомендациях по исправлению.

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

Оглавление