Логирование процесса

Для работы с библиотекой Axe-core в JavaScript необходимо подключить пакет через npm:

npm install axe-core

После установки библиотека подключается в коде следующим образом:

const axe = require('axe-core');

Для веб-приложений можно использовать скрипт напрямую в браузере:

<script src="https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.9.7/axe.min.js"></script>

Инициализация происходит через функцию axe.run(), которая принимает два аргумента: DOM-узел, на котором будет производиться аудит, и объект конфигурации правил.

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

Структура результатов аудита

После выполнения axe.run() возвращается объект results, который содержит следующие ключевые свойства:

  • violations — массив нарушений доступности, обнаруженных на странице. Каждый элемент включает id правила, impact (уровень серьёзности), description и список элементов DOM, на которых обнаружено нарушение.
  • passes — массив проверок, успешно пройденных элементами страницы.
  • incomplete — проверки, которые не были завершены полностью (например, из-за динамического контента).
  • inapplicable — правила, не применимые к текущему DOM.

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

Логирование результатов

Простое логирование в консоль

axe.run(document, {}, (err, results) => {
  if (err) throw err;

  console.log('Нарушения:');
  results.violations.forEach(v => {
    console.log(`Rule: ${v.id}`);
    console.log(`Impact: ${v.impact}`);
    console.log(`Description: ${v.description}`);
    v.nodes.forEach(node => {
      console.log(`  Target: ${node.target.join(', ')}`);
      console.log(`  HTML: ${node.html}`);
    });
  });
});

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

Можно использовать функции map и reduce для структурирования вывода:

const formatViolations = results => 
  results.violations.map(v => ({
    rule: v.id,
    impact: v.impact,
    description: v.description,
    targets: v.nodes.map(n => n.target.join(', '))
  }));

axe.run(document, {}, (err, results) => {
  if (err) throw err;
  console.table(formatViolations(results));
});

Асинхронное логирование и обработка ошибок

Axe-core поддерживает промисы:

axe.run(document, {})
  .then(results => {
    results.violations.forEach(v => {
      console.log(`[${v.impact}] ${v.id} — ${v.description}`);
    });
  })
  .catch(err => {
    console.error('Ошибка выполнения Axe-core:', err);
  });

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

Настройка уровня детализации

Для логирования можно ограничивать вывод, используя фильтрацию по уровню серьёзности:

const severityLevels = ['critical', 'serious'];
axe.run(document, {}, (err, results) => {
  if (err) throw err;

  const filtered = results.violations.filter(v => severityLevels.includes(v.impact));
  filtered.forEach(v => console.log(`${v.impact.toUpperCase()}: ${v.id} — ${v.description}`));
});

Также можно выводить только конкретные узлы DOM для облегчения анализа:

v.nodes.forEach(node => console.log(`Element: ${node.target[0]}`));

Логирование в файл

В Node.js возможен экспорт результатов аудита в файл для последующего анализа:

const fs = require('fs');

axe.run(document, {}, (err, results) => {
  if (err) throw err;
  fs.writeFileSync('axe-results.json', JSON.stringify(results, null, 2));
});

Формат JSON позволяет интегрировать результаты в системы CI/CD и отчётности, например, в Jenkins или GitHub Actions.

Интеграция с CI/CD

Для автоматизированного логирования и мониторинга доступности можно использовать Axe-core совместно с тестовыми фреймворками:

  • Jest: подключение через jest-axe
  • Cypress: использование cypress-axe
  • Playwright / Puppeteer: запуск axe.run на страницах в headless-режиме

Пример для Cypress:

cy.injectAxe();
cy.checkA11y(null, {
  includedImpacts: ['critical', 'serious'],
}, results => {
  cy.task('logResults', results);
});

Где logResults — пользовательская задача для записи аудита в файл или вывод в консоль.

Настройка детального логирования

Axe-core позволяет включать развернутый вывод для каждого узла:

axe.run(document, {
  detailedReport: true
}, (err, results) => {
  if (err) throw err;
  results.violations.forEach(v => {
    v.nodes.forEach(n => {
      console.log(`Selector: ${n.target}`);
      console.log(`HTML: ${n.html}`);
      console.log(`Failure Summary: ${n.failureSummary}`);
      console.log(`All checks:`, n.any.concat(n.all).map(check => check.message));
    });
  });
});

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

Вывод

Логирование процесса с помощью Axe-core строится на получении объекта results и структурированном выводе массивов violations, passes, incomplete и inapplicable. Поддержка фильтрации, асинхронного вызова и интеграции с CI/CD позволяет строить как простое консольное логирование, так и сложные автоматизированные отчёты доступности для веб-приложений.

Оглавление