Трекинг исправлений

Axe-core — это библиотека для автоматического тестирования доступности веб-приложений. Она предоставляет инструменты для обнаружения проблем, связанных с доступностью интерфейса, и интегрируется с тестовыми фреймворками на JavaScript. Основное назначение — выявление нарушений стандартов WCAG (Web Content Accessibility Guidelines) и ARIA.

Библиотека работает напрямую в браузере или в среде Node.js и может применяться как для тестирования отдельных компонентов, так и для сквозного тестирования страниц.

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

Для использования в проекте на Node.js или фронтенд-приложении можно установить библиотеку через npm:

npm install axe-core --save-dev

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

import axe from 'axe-core';

// или через require
const axe = require('axe-core');

Для браузерного тестирования axe-core можно подключить через CDN:

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

Основные методы

axe.run() — главный метод для анализа страницы или её части. Принимает два аргумента: целевой элемент (или селектор) и объект конфигурации. Возвращает промис с результатами тестирования.

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

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

results.violations содержит массив объектов с информацией о найденных нарушениях:

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

Настройка правил и исключений

Для управления проверками используется объект опций, передаваемый в axe.run(). Возможности включают:

  • rules — включение или отключение конкретных правил по их идентификаторам
  • tags — фильтрация по категориям правил (например, wcag2a, wcag2aa)
  • resultTypes — выбор типов результатов (violations, passes, incomplete, inapplicable)

Пример отключения конкретного правила:

axe.run(document, {
  rules: {
    'color-contrast': { enabled: false }
  }
}, (err, results) => {
  console.log(results);
});

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

Jest:

import { configureAxe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('страница без нарушений доступности', async () => {
  const results = await configureAxe(axe).run(document.body);
  expect(results).toHaveNoViolations();
});

Cypress:

import 'cypress-axe';

cy.visit('/');
cy.injectAxe();
cy.checkA11y();

Работа с отчетами и трекинг исправлений

Ключевой аспект использования axe-core — трекать изменения нарушений в ходе исправлений. Для этого важно структурировать результаты, сохранять их и анализировать динамику.

Сохранение результатов:

const fs = require('fs');

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

Сравнение отчётов:

  1. Загружаются предыдущие результаты.
  2. Выполняется анализ текущего состояния страницы.
  3. Сравниваются violations по ключевым полям: id, nodes.target, impact.
const previousResults = JSON.parse(fs.readFileSync('axe-results-old.json'));
const currentResults = await axe.run(document);

const fixedIssues = previousResults.violations.filter(prevViolation =>
  !currentResults.violations.some(currViolation =>
    currViolation.id === prevViolation.id &&
    currViolation.nodes.every((node, idx) =>
      node.target[0] === prevViolation.nodes[idx]?.target[0]
    )
  )
);

console.log('Исправленные нарушения:', fixedIssues.length);

Ведение истории изменений позволяет:

  • отслеживать, какие элементы были исправлены;
  • оценивать эффективность корректировок;
  • создавать отчёты для команды разработки и тестирования.

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

  • Для больших проектов рекомендуется запускать axe-core как часть CI/CD.
  • Использовать селекторы и фильтры для анализа только актуальных участков интерфейса.
  • Хранить результаты тестов в JSON-формате, чтобы автоматически сравнивать историю нарушений.
  • Поддерживать документацию о каждой найденной проблеме с описанием исправлений, что упрощает аудит доступности.

Работа с динамическим контентом

Axe-core позволяет анализировать страницы после рендеринга JavaScript. Для корректной проверки SPA (Single Page Application) необходимо:

  • дождаться загрузки всех компонентов;
  • прогнать axe.run() после отрисовки целевых элементов;
  • использовать мутации DOM для автоматического запуска проверок при изменении интерфейса.
const observer = new MutationObserver(async () => {
  const results = await axe.run(document.body);
  console.log('Актуальные нарушения:', results.violations.length);
});

observer.observe(document.body, { childList: true, subtree: true });

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

  • Запускать анализ только на изменённых участках страницы.
  • Использовать iframes для тестирования компонентов в изоляции.
  • Настраивать resultTypes, чтобы исключить ненужные данные (inapplicable и passes могут замедлять анализ).

Эти практики обеспечивают быстрый и систематический трекинг исправлений без перегрузки тестовой инфраструктуры.

Оглавление