Что такое axe-core

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

Библиотека разрабатывается и поддерживается компанией Deque Systems, являющейся лидером в области технологий доступности. axe-core может использоваться как в браузере, так и в средах Node.js, что делает её универсальным инструментом для интеграции в процессы тестирования и CI/CD.

Основные возможности

  • Автоматизированная проверка доступности элементов DOM.
  • Поддержка стандартов WCAG 2.1 и WCAG 2.0.
  • Проверка ARIA-атрибутов и соответствия семантики элементов.
  • Гибкая конфигурация правил: можно включать или отключать отдельные проверки.
  • Интеграция с тестовыми фреймворками: Jest, Mocha, Cypress, Selenium.
  • Генерация детализированных отчетов о нарушениях, с описанием проблемы и ссылками на рекомендации по исправлению.

Установка

Для использования в Node.js:

npm install axe-core --save-dev

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

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

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

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

axe.run

Метод axe.run выполняет анализ доступности на указанной части DOM.

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

axe.run(document, {
  rules: {
    'color-contrast': { enabled: true },
    'image-alt': { enabled: true }
  }
}, (err, results) => {
  if (err) throw err;
  console.log(results.violations);
});
  • Первый параметр — корневой элемент DOM для анализа. Если указать document, проверка будет на всей странице.
  • Второй параметр — конфигурация правил, включая их включение или отключение.
  • Третий параметр — callback с результатами проверки.

Результат содержит три ключевых массива:

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

axe.configure

Метод axe.configure позволяет глобально настраивать поведение библиотеки:

axe.configure({
  branding: { brand: 'MyApp' },
  reporter: 'v2',
  rules: [
    { id: 'color-contrast', enabled: true },
    { id: 'label', enabled: false }
  ]
});
  • branding — добавляет идентификацию приложения в отчеты.
  • reporter — определяет формат отчетов.
  • rules — глобальная настройка правил доступности.

axe.getRules

Метод axe.getRules() возвращает список всех встроенных правил доступности с их конфигурацией.

console.log(axe.getRules());

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

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

Jest

const { configureAxe, axe } = require('jest-axe');
const { render } = require('@testing-library/react');

test('должно быть без нарушений доступности', async () => {
  const { container } = render(<MyComponent />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

Cypress

describe('Тест доступности', () => {
  it('Проверка страницы', () => {
    cy.visit('/my-page');
    cy.injectAxe();
    cy.checkA11y();
  });
});

Selenium

Для интеграции с Selenium используется axe-webdriverjs:

const AxeBuilder = require('axe-webdriverjs');
const { Builder } = require('selenium-webdriver');

const driver = new Builder().forBrowser('chrome').build();
await driver.get('https://example.com');

const results = await new AxeBuilder(driver).analyze();
console.log(results.violations);

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

Каждое правило доступности имеет уникальный идентификатор, описание и рекомендации по исправлению. В конфигурации можно:

  • Включать или отключать правило (enabled: true/false).
  • Настраивать параметры, например минимальный контраст текста.
  • Создавать собственные кастомные правила с использованием API axe-core.

Пример настройки минимального контраста:

axe.run(document, {
  rules: {
    'color-contrast': {
      enabled: true,
      options: { contrastRatio: 4.5 }
    }
  }
});

Генерация отчетов

Результаты анализа содержат:

  • ID нарушения — уникальный идентификатор правила.
  • Описание — краткое объяснение проблемы.
  • Элементы — список DOM-элементов, вызвавших нарушение.
  • Ссылки на документацию — рекомендации по исправлению.

Для форматирования отчета можно использовать JSON или интегрировать с CI-системами для автоматической проверки доступности при каждом коммите.

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

  • Использовать axe-core на стадии разработки и тестирования, чтобы находить ошибки до релиза.
  • Комбинировать автоматические и ручные проверки, так как axe-core не покрывает все аспекты доступности (например, контекстные ошибки UX).
  • Интегрировать с CI/CD для непрерывного контроля качества доступности.
  • Настраивать правила под конкретное приложение, отключая нерелевантные проверки, чтобы отчеты были максимально точными и управляемыми.

Дополнительные возможности

  • Кастомные правила: создание собственных проверок для специфичных компонентов.
  • Поддержка Shadow DOM: анализ компонентов web-components.
  • Асинхронная проверка: поддержка динамического контента и SPA.

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

Оглавление