Взаимодействие с axe-core

Axe-core — это открытая библиотека для автоматизированного тестирования доступности веб-приложений на JavaScript. Она обеспечивает анализ страниц и компонентов с точки зрения соответствия стандартам WCAG (Web Content Accessibility Guidelines). Библиотека работает как в браузере, так и в средах Node.js, что позволяет интегрировать её в процессы CI/CD.

Ключевой особенностью axe-core является интерфейс правил, которые проверяют элементы страницы на конкретные нарушения доступности, включая:

  • отсутствующие альтернативные тексты для изображений (alt),
  • недостаточный контраст текста и фона,
  • некорректное использование ARIA-атрибутов,
  • проблемы с фокусом и навигацией с клавиатуры.

Библиотека возвращает результаты в виде структурированных объектов JSON, что облегчает обработку данных и генерацию отчётов.

Установка и подключение

В браузере axe-core подключается через <script>:

<script src="https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.9.6/axe.min.js"></script>
<script>
  axe.run(function(err, results) {
    console.log(results);
  });
</script>

Для Node.js используется пакет axe-core:

npm install axe-core

Пример использования с Puppeteer:

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

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  
  const axeResults = await page.evaluate(async () => {
    return await axe.run();
  });
  
  console.log(axeResults);
  await browser.close();
})();

Основные функции и методы

axe.run

Метод axe.run — центральная точка для запуска анализа. Он принимает объект настроек и колбэк или возвращает промис. Параметры позволяют выбирать контейнеры для проверки, исключать определённые элементы и задавать набор правил.

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

axe.run(document, {
  runOnly: {
    type: 'tag',
    values: ['wcag2a', 'wcag2aa']
  },
  rules: {
    'color-contrast': { enabled: true },
    'image-alt': { enabled: false }
  }
}).then(results => {
  console.log(results.violations);
});

Параметр runOnly позволяет ограничить проверку конкретными тегами правил, а rules — управлять включением или отключением отдельных проверок.

axe.configure

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

axe.configure({
  reporter: 'v2',
  checks: [
    {
      id: 'custom-check',
      evaluate: (node, options) => node.hasAttribute('data-test'),
      options: { severity: 'critical' }
    }
  ]
});

Использование пользовательских проверок (checks) позволяет интегрировать специфические правила доступности, которые не входят в стандартный набор axe-core.

Работа с результатами анализа

Результаты axe-core включают несколько ключевых массивов:

  • violations — список нарушений доступности.
  • incomplete — элементы, которые не удалось проверить полностью.
  • passes — успешно пройденные проверки.
  • inapplicable — правила, которые не применимы к текущей странице.

Каждый объект в violations содержит:

  • id — уникальный идентификатор правила,
  • impact — уровень серьёзности (minor, moderate, serious, critical),
  • description — текстовое описание проблемы,
  • nodes — список элементов, вызвавших нарушение, с указанием селекторов и HTML-кода.

Пример обработки:

axe.run(document).then(results => {
  results.violations.forEach(v => {
    console.log(`Правило: ${v.id}, уровень: ${v.impact}`);
    v.nodes.forEach(node => {
      console.log('Элемент:', node.html);
    });
  });
});

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

Axe-core можно интегрировать с популярными инструментами тестирования:

  • Jest + jest-axe:
const { axe, toHaveNoViolations } = require('jest-axe');
expect.extend(toHaveNoViolations);

test('доступность компонента', async () => {
  const html = renderToString(<MyComponent />);
  const results = await axe(html);
  expect(results).toHaveNoViolations();
});
  • Cypress + cypress-axe:
cy.visit('https://example.com');
cy.injectAxe();
cy.checkA11y();

Эти интеграции позволяют включить проверку доступности прямо в процесс CI, автоматически выявляя ошибки при каждом билде.

Расширенные возможности

  • Пользовательские правила: создаются через axe.configure или добавление плагинов.
  • Контекстная проверка: анализ определённых секций DOM с помощью context в axe.run.
  • Отчёты: результаты можно конвертировать в HTML, JSON или CSV для дальнейшего анализа.

Пример проверки конкретного контейнера:

const container = document.querySelector('#main-content');
axe.run(container).then(results => console.log(results.violations));

Оптимизация и производительность

Для больших страниц рекомендуется:

  • Ограничивать область проверки с помощью селекторов.
  • Использовать runOnly для нужных тегов WCAG.
  • Параллельно выполнять проверки на нескольких страницах через Node.js, чтобы ускорить CI-процессы.

Встроенные механизмы axe-core минимизируют нагрузку на DOM и позволяют проводить анализ без видимого влияния на работу страницы.

Практические рекомендации

  • Систематическая проверка: включать axe-core в процесс разработки, а не только перед релизом.
  • Комбинация с ручным тестированием: автоматические проверки не охватывают всех сценариев доступности.
  • Логирование и отчёты: использовать JSON-вывод для аналитики и мониторинга нарушений.

Использование axe-core позволяет выявлять критические проблемы доступности, ускоряет аудит страниц и поддерживает соответствие международным стандартам WCAG.

Оглавление