Метод axe.configure

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

Назначение метода

Метод axe.configure используется для кастомизации конфигурации анализа. Он позволяет:

  • Включать или отключать определённые правила.
  • Настраивать контексты сканирования (какие элементы страницы проверять, а какие игнорировать).
  • Задавать глобальные параметры работы библиотеки (например, флаги для включения experimental-функций).

Базовый синтаксис метода:

axe.configure(configurationObject);

где configurationObject — объект с параметрами настройки.

Основные поля конфигурации

Объект конфигурации может содержать несколько ключевых свойств:

1. rules

Позволяет включать, отключать или модифицировать правила проверки.

axe.configure({
  rules: [
    { id: 'color-contrast', enabled: true },
    { id: 'image-alt', enabled: false }
  ]
});
  • id — уникальный идентификатор правила.
  • enabled — логическое значение, включающее или отключающее правило.
  • Дополнительно можно передавать опции для правил через поле options.

Пример с настройкой опций правила:

axe.configure({
  rules: [
    {
      id: 'label',
      enabled: true,
      options: { requireVisibleLabel: true }
    }
  ]
});

2. checks

Позволяет изменять поведение отдельных проверок, которые используются внутри правил.

axe.configure({
  checks: [
    { id: 'color-contrast-check', enabled: false }
  ]
});

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

3. reporter

Определяет формат вывода результатов анализа. Поддерживаются встроенные репортеры (v2, v3) и возможность передавать кастомные функции.

axe.configure({
  reporter: 'v3'
});

Кастомный репортер позволяет интегрировать результаты в сторонние системы логирования или CI/CD.

4. selectors

С помощью поля selectors можно задавать селекторы, которые будут исключены из анализа.

axe.configure({
  selectors: {
    exclude: ['.no-axe', '#ignore-this']
  }
});

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

5. iframes

Позволяет включать или исключать проверку содержимого внутри iframe. По умолчанию сканирование iframe включено.

axe.configure({
  iframes: false
});

Примеры комплексной настройки

Пример, где одновременно настраиваются правила, селекторы и репортер:

axe.configure({
  rules: [
    { id: 'color-contrast', enabled: true },
    { id: 'aria-roles', enabled: false }
  ],
  selectors: {
    exclude: ['.third-party-widget', '.ads-banner']
  },
  reporter: 'v3'
});

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

Взаимодействие с другими методами Axe-core

Метод axe.configure часто используется совместно с:

  • axe.run() — запускает анализ с текущей конфигурацией.
  • axe.reset() — сбрасывает конфигурацию к стандартной, что полезно для тестов с разными настройками.
axe.configure({ rules: [{ id: 'color-contrast', enabled: false }] });
axe.run(document, (err, results) => {
  console.log(results.violations);
});
axe.reset(); // возвращает стандартные настройки

Особенности использования

  1. Конфигурация глобальна — одна настройка действует на все последующие вызовы axe.run() в текущей сессии.
  2. Динамическое обновление — настройки можно изменять во время работы приложения, что удобно для адаптивных интерфейсов.
  3. Поддержка экспериментальных правил — включение опций через axe.configure({ rules: [{ id: 'some-experimental', enabled: true }] }) позволяет тестировать новые проверки.

Метод axe.configure является фундаментальным инструментом для точной и гибкой настройки анализа доступности, обеспечивая контроль над правилами, проверками и исключениями в современных веб-приложениях.

Оглавление