Регулярные проверки

Библиотека axe-core представляет собой инструмент для автоматизированной проверки доступности веб-страниц. Она реализует стандарты WCAG 2.1 и позволяет выявлять нарушения доступности на уровне DOM, CSS и ARIA-атрибутов. В отличие от простых валидаторов HTML, axe-core анализирует семантику элементов, их взаимодействие и соответствие интерфейсных компонентов рекомендациям по доступности.

Ключевое преимущество axe-core заключается в том, что она не изменяет DOM страницы и выполняет анализ безопасно, без вмешательства в функциональность приложения.

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

Для использования axe-core в проекте на JavaScript существует несколько вариантов:

Через npm:

npm install axe-core --save-dev

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

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

После подключения библиотека становится доступной через объект axe.

Инициализация и базовое использование

Основной метод для запуска проверки — axe.run(). Он принимает объект с параметрами и возвращает результат проверки в виде промиса.

Пример базовой проверки всего документа:

axe.run().then(results => {
    console.log(results.violations);
});

Ключевые моменты работы с результатами:

  • violations — массив обнаруженных нарушений.
  • Каждое нарушение содержит id, impact, description, help, nodes.
  • nodes описывает конкретные элементы DOM, которые нарушают правила доступности.

Конфигурация проверки

Метод axe.run() поддерживает детальную настройку правил:

const options = {
  runOnly: {
    type: 'tag',
    values: ['wcag2a', 'wcag2aa']
  },
  rules: {
    'color-contrast': { enabled: false },
    'image-alt': { enabled: true }
  }
};

axe.run(document, options).then(results => {
  console.log(results.violations);
});

Особенности конфигурации:

  • runOnly.type = "tag" — проверяются только указанные категории WCAG.
  • rules — позволяет включать и отключать отдельные правила.
  • resultTypes — можно указать, какие типы результатов собирать (violations, passes, incomplete, inapplicable).

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

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

Jest + Puppeteer:

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

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost:3000');

  const results = await page.evaluate(async () => {
    return await axe.run();
  });

  console.log(results.violations);
  await browser.close();
})();

Cypress:

import 'cypress-axe';

cy.visit('/');
cy.injectAxe();
cy.checkA11y(null, null, terminalLog);

Интеграция с тестами позволяет включать проверки доступности в CI/CD, что обеспечивает регулярный контроль качества интерфейсов.

Оптимизация регулярных проверок

Для регулярных проверок важно:

  1. Фокусироваться на ключевых страницах — критические сценарии и часто используемые компоненты.
  2. Фильтровать результаты по уровню критичности (impact — minor, moderate, serious, critical).
  3. Автоматизировать отчетность — экспорт результатов в JSON или интеграция с системой баг-трекинга.

Пример фильтрации критических нарушений:

axe.run().then(results => {
  const criticalViolations = results.violations.filter(v => v.impact === 'critical');
  console.log(criticalViolations);
});

Использование кастомных правил

Axe-core поддерживает создание собственных правил. Это необходимо для специфичных компонентов и внутренних стандартов доступности.

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

axe.registerRule({
  id: 'custom-heading',
  selector: 'h1.custom',
  enabled: true,
  any: [{
    id: 'heading-present',
    evaluate: node => node.textContent.trim().length > 0
  }],
  description: 'Проверяет наличие текста в кастомных заголовках H1',
  help: 'Заголовки H1 должны содержать текст'
});

Кастомные правила автоматически участвуют в проверках при вызове axe.run().

Отчёты и визуализация

Axe-core предоставляет возможность структурированных отчетов, которые можно использовать для анализа и исправления нарушений:

  • JSON-формат — для обработки в скриптах и интеграции с CI/CD.
  • HTML-отчет — удобен для визуального анализа и передачи команде.
  • Консольный вывод — быстрый способ просмотра результатов во время разработки.

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

axe.run().then(results => {
  results.violations.forEach(v => {
    console.group(v.help);
    v.nodes.forEach(node => console.log(node.html));
    console.groupEnd();
  });
});

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

Оглавление