Соответствие стандартам

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

Библиотека работает на клиентской стороне в браузере и интегрируется с различными инструментами тестирования, включая Jest, Cypress, Puppeteer и Playwright. Основной механизм работы — сканирование DOM-дерева и анализ атрибутов элементов на предмет соблюдения правил доступности.

Подключение и инициализация

Axe-core распространяется как npm-пакет:

npm install axe-core

Для использования в Node.js или браузере требуется импорт:

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

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

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

После подключения библиотека готова к сканированию страницы с помощью метода axe.run().

Базовое сканирование

Метод axe.run() запускает проверку доступности на заданном узле DOM. Если узел не указан, проверяется весь документ.

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

Ключевые элементы результата:

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

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

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

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

Axe-core позволяет включать или отключать отдельные правила для более точного тестирования. Правила настраиваются через объект опций:

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

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

Особенности настройки:

  • runOnly позволяет запускать проверку только по определенным тегам WCAG.
  • rules позволяет индивидуально включать или отключать конкретные проверки.
  • resultTypes может ограничивать вывод только нарушениями или полными результатами.

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

Jest:

const { configureAxe, toHaveNoViolations } = require('jest-axe');
expect.extend(toHaveNoViolations);

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

Cypress:

import 'cypress-axe';

cy.visit('/example-page');
cy.injectAxe();
cy.checkA11y(null, {
  includedImpacts: ['critical', 'serious']
});

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

Работа с результатами

Результаты сканирования часто представляют в виде отчета JSON или выводят в консоль. Для удобства анализа можно использовать фильтрацию по уровню воздействия или типу нарушения:

const criticalViolations = results.violations.filter(v => v.impact === 'critical');
criticalViolations.forEach(v => console.log(v.help, v.nodes.length));

Также доступна визуализация нарушений прямо на странице с помощью метода axe.highlightNode(node) (требует подключения дополнительных модулей).

Поддержка стандартов WCAG

Axe-core ориентирована на соответствие стандартам:

  • WCAG 2.0/2.1 — уровни A, AA, AAA.
  • ARIA — корректное использование ролей, атрибутов и свойств.
  • HTML5 — проверка семантической разметки.
  • Contrast — контроль контрастности текста и фона.

Библиотека классифицирует нарушения по уровню важности (impact), что помогает приоритизировать исправления.

Продвинутые возможности

  1. Кастомные правила Можно создавать свои правила проверки:
axe.registerRule({
  id: 'custom-heading-check',
  selector: 'h1',
  evaluate: node => node.textContent.length > 0
});

  1. Локальные и глобальные опции Позволяют применять разные наборы правил к разным частям приложения, например, к компонентам UI отдельно от полной страницы.

  2. Асинхронные проверки Поддержка Promise позволяет интегрировать сканирование в асинхронные процессы тестирования.

const results = await axe.run(document);
console.log(results.violations);

Практические советы по использованию

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

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

Оглавление