Pa11y

Axe-core — это мощная библиотека для проверки доступности веб-приложений, реализованная на JavaScript. Она выполняет анализ DOM и выявляет нарушения стандартов доступности (WCAG) на уровне компонентов, страниц и всего приложения. Основной принцип работы библиотеки заключается в сканировании элементов страницы и проверке их на соответствие правилам доступности.

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

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

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

npm install axe-core --save-dev

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

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

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

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

axe.run

Главный метод для запуска проверки доступности:

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

Параметры метода run:

  • context — область DOM, которую необходимо проверить. По умолчанию проверяется весь документ.

  • options — настройки запуска, включающие:

    • runOnly — массив стандартов или правил, которые нужно проверить.
    • rules — объект с конкретными правилами и их включением или отключением.

  • callback — альтернативный способ получения результатов через функцию обратного вызова.

axe.configure

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

axe.configure({
  branding: {
    application: 'MyApp'
  },
  rules: [
    { id: 'color-contrast', enabled: false }
  ]
});

Важные возможности:

  • Отключение или модификация правил.
  • Добавление пользовательских правил.
  • Настройка брендинга для отчётов.

axe.getRules и axe.getViolations

Методы для работы с текущим набором правил:

const rules = axe.getRules();
console.log(rules.map(r => r.id));

Позволяют получать список доступных правил, фильтровать их по категориям и при необходимости динамически изменять конфигурацию проверки.

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

Axe-core легко интегрируется с популярными инструментами тестирования.

Jest

import 'axe-core/axe.min.js';
import { toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

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

Cypress

import 'cypress-axe';

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

Эта интеграция позволяет автоматически проверять страницы при запуске e2e-тестов и в CI/CD.

Пользовательские правила

Создание собственного правила доступности требует определения идентификатора, описания, селектора элементов и функции проверки:

axe.registerRule({
  id: 'custom-alt-check',
  selector: 'img',
  enabled: true,
  any: ['alt'],
  tags: ['cat.text-alternatives'],
  evaluate: function(node) {
    return node.hasAttribute('alt') && node.getAttribute('alt').trim() !== '';
  },
  metadata: {
    description: 'Проверяет наличие альтернативного текста у изображений',
    help: 'Каждое изображение должно содержать атрибут alt'
  }
});

Пользовательские правила интегрируются с существующими проверками и учитываются в отчётах о нарушениях.

Формат отчётов

Axe-core возвращает объект с тремя ключевыми свойствами:

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

Каждое нарушение содержит:

  • id — идентификатор правила.
  • impact — степень влияния (critical, serious, moderate, minor).
  • description — описание проблемы.
  • help — рекомендации по исправлению.
  • nodes — конкретные элементы DOM, где найдено нарушение.

Пример анализа:

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

Оптимизация работы

  • Проверка только нужной области DOM сокращает время анализа.
  • Отключение неважных правил ускоряет сканирование.
  • Использование фильтров impact позволяет сосредоточиться на критических нарушениях.

Использование с Pa11y

Pa11y — это инструмент для автоматической проверки доступности веб-страниц, который интегрируется с Axe-core как движок анализа. Он обеспечивает:

  • Запуск проверок на удалённых страницах.
  • Генерацию детализированных отчётов.
  • Встроенную поддержку CI/CD процессов.

Пример запуска Pa11y с Axe-core:

pa11y https://example.com --runner axe

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

Использование Axe-core через Pa11y обеспечивает комбинированный подход: высокая точность анализа с возможностью интеграции в существующие процессы тестирования и мониторинга доступности.

Оглавление