Непрерывная интеграция

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

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

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

npm install axe-core

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

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

В тестовых фреймворках, таких как Jest, Mocha или Cypress, Axe-core интегрируется через обёртки, например axe-core + jest-axe или cypress-axe, что позволяет проверять компоненты в процессе unit и end-to-end тестирования.

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

Axe-core предоставляет API для анализа DOM и генерации отчётов о проблемах доступности. Основные методы:

  • axe.run(context, options, callback) — основной метод для запуска проверки доступности.

    • context — область DOM для анализа (например, селектор document.body или конкретный элемент).
    • options — объект настроек, где можно включать или отключать отдельные правила, задавать типы элементов и др.
    • callback — функция обратного вызова с результатами.

  • axe.configure(config) — позволяет изменять глобальные настройки, добавлять свои правила или изменять поведение стандартных.

  • axe.writeResults(results) — метод для форматированного вывода результатов в консоль или лог-файл.

Настройка правил

Каждое правило в Axe-core имеет уникальный идентификатор и уровень серьёзности (impact): minor, moderate, serious, critical. Настройка производится через объект конфигурации:

axe.configure({
  rules: [
    { id: 'color-contrast', enabled: true },
    { id: 'label', enabled: false } // отключение правила
  ]
});

Можно создавать кастомные правила с помощью API:

axe.configure({
  rules: [
    {
      id: 'custom-alt-check',
      selector: 'img',
      any: ['hasAltText'],
      enabled: true,
      description: 'Проверка наличия атрибута alt у всех изображений',
      evaluate: function(node) {
        return node.hasAttribute('alt') && node.getAttribute('alt').trim() !== '';
      }
    }
  ]
});

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

Для непрерывной интеграции Axe-core применяется в тестовых скриптах, чтобы ошибки доступности фиксировались автоматически. Примеры:

Jest + jest-axe:

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

test('Проверка доступности компонента', async () => {
  const html = renderToString(<MyComponent />);
  const results = await axe(html);
  expect(results).toHaveNoViolations();
});

Cypress + cypress-axe:

cy.visit('/my-page');
cy.injectAxe();
cy.checkA11y(); // проверка всей страницы
cy.checkA11y('.my-component'); // проверка конкретного блока

Вывод и обработка результатов

Результаты проверки включают массив violations, где каждый объект содержит:

  • id — идентификатор правила;
  • impact — серьёзность нарушения;
  • description — описание проблемы;
  • nodes — элементы DOM, где обнаружено нарушение;
  • helpUrl — ссылка на подробное руководство.

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

axe.run(document, {}, (err, results) => {
  if (results.violations.length > 0) {
    results.violations.forEach(v => {
      console.log(`Ошибка: ${v.description}`);
      v.nodes.forEach(node => console.log('Элемент:', node.html));
    });
  }
});

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

Axe-core позволяет проводить проверку доступности во время разработки и тестирования UI. Для современных SPA и React-приложений проверка выполняется на сгенерированном DOM после рендеринга компонента:

import React from 'react';
import { render } from '@testing-library/react';
import { axe } from 'axe-core';
import MyComponent from './MyComponent';

test('Компонент должен быть доступен', async () => {
  const { container } = render(<MyComponent />);
  const results = await axe.run(container);
  expect(results.violations).toHaveLength(0);
});

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

  • Проверка динамических изменений: Axe-core отслеживает изменения DOM и может анализировать элементы после рендеринга асинхронного контента.
  • Отчёты в формате JSON: удобно для интеграции с CI/CD-системами и дальнейшей визуализации ошибок.
  • Мультиязычная поддержка: описание правил доступно на разных языках, что полезно для международных проектов.

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

  • Интегрировать Axe-core на уровне unit-тестов и end-to-end тестов, чтобы ловить ошибки как можно раньше.
  • Использовать фильтрацию по уровню серьёзности (impact) для определения критических проблем, требующих немедленного исправления.
  • Комбинировать Axe-core с ручным тестированием для проверки аспектов доступности, которые трудно автоматизировать, например, удобство навигации клавиатурой.

Axe-core обеспечивает надёжный инструмент для автоматизированной проверки доступности, позволяя внедрять best practices в разработку и поддерживать высокий уровень соответствия стандартам WCAG на всех этапах жизненного цикла веб-приложения.

Оглавление