Вспомогательные методы

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

Метод axe.run

Метод axe.run является центральным инструментом библиотеки. Он выполняет анализ DOM и возвращает отчет о найденных нарушениях доступности.

Синтаксис:

axe.run(context, options, callback)

  • context — объект или селектор, ограничивающий область проверки. Может быть:

    • document — весь документ,
    • CSS-селектор — конкретный элемент,
    • DOM-узел — конкретный элемент.

  • options — объект конфигурации:

    • runOnly — ограничения по правилам или тегам;
    • rules — включение или отключение отдельных правил;
    • reporter — формат отчета.

  • callback — функция, получающая результаты анализа:

axe.run(document, { runOnly: ['wcag2a', 'wcag2aa'] }, (err, results) => {
  if (err) throw err;
  console.log(results.violations);
});

Ключевой особенностью является возможность запускать проверку на любом фрагменте DOM и фильтровать результаты по уровню критичности.

Метод axe.configure

Метод axe.configure позволяет глобально настраивать поведение Axe-core. Это особенно полезно при интеграции с фреймворками тестирования.

Пример настройки:

axe.configure({
  rules: [
    { id: 'color-contrast', enabled: true },
    { id: 'image-alt', enabled: false }
  ],
  checks: [
    { id: 'label', enabled: true }
  ]
});

Особенности:

  • Можно включать и отключать конкретные правила.
  • Возможна настройка индивидуальных проверок и тегов WCAG.
  • Настройки применяются глобально для всех последующих запусков axe.run.

Метод axe.reset

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

axe.reset();

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

Вспомогательные утилиты работы с результатами

Axe-core предоставляет несколько методов для удобного анализа результатов проверки.

axe.getRules

Возвращает список всех правил, доступных для проверки:

const rules = axe.getRules();
console.log(rules.map(r => r.id));

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

axe.getViolationsSummary

Позволяет получить краткую сводку найденных нарушений, группируя их по типу и критичности:

const summary = axe.getViolationsSummary(results.violations);
console.log(summary);

Сводка включает:

  • количество нарушений,
  • уровни критичности (minor, moderate, serious, critical),
  • ссылки на элементы DOM, где они обнаружены.

axe.filterResults

Метод позволяет фильтровать результаты по правилам или тегам:

const filtered = axe.filterResults(results.violations, {
  tags: ['wcag2aa']
});

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

Асинхронные вспомогательные методы

Axe-core полностью поддерживает промисы и async/await, что облегчает интеграцию с современными тестовыми фреймворками, такими как Jest или Cypress.

async function runAxe() {
  const results = await axe.run(document, { runOnly: ['wcag2a'] });
  console.log(results.violations);
}

Преимущества асинхронного подхода:

  • нет блокировки основного потока;
  • удобство использования в цепочках тестов;
  • простота обработки ошибок через try/catch.

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

Вспомогательные методы Axe-core упрощают интеграцию с фреймворками:

  • Cypress: использование cy.window().then(win => win.axe.run(...)) для запуска проверки внутри браузера.
  • Jest: подключение axe-core и использование промисов для проверки компонентов React.
  • Возможность формировать отчеты в формате JSON или HTML для CI/CD.

Настройка пользовательских проверок

Axe-core позволяет создавать кастомные проверки через axe.addRule:

axe.addRule({
  id: 'custom-link-title',
  selector: 'a',
  enabled: true,
  evaluate: (node) => node.title && node.title.length > 0
});

Параметры правила:

  • id — уникальный идентификатор;
  • selector — CSS-селектор элементов;
  • evaluate — функция проверки, возвращающая true/false;
  • enabled — флаг активации.

Это расширяет стандартный набор правил и позволяет проверять специфические требования проекта.

Оглавление