Живой анализ

Библиотека Axe-core представляет собой инструмент для автоматизированной проверки доступности веб-приложений. Основной способ подключения — через пакет npm:

npm install axe-core --save-dev

После установки можно импортировать библиотеку в проект:

import axe from 'axe-core';

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

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

В обоих случаях становится доступен объект axe, предоставляющий API для анализа DOM и генерации отчётов по доступности.

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

Запуск анализа производится с помощью функции axe.run. Она принимает DOM-узел (по умолчанию document) и объект конфигурации. Результатом является Promise, который возвращает отчёт в формате JSON.

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

Основные ключи объекта results:

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

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

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

axe.run(document, {
  rules: {
    'color-contrast': { enabled: true },
    'image-alt': { enabled: false }
  }
}, (err, results) => {
  console.log(results.violations);
});

Ключевые моменты:

  • Включение/выключение правил позволяет фокусироваться на конкретных аспектах доступности.
  • Настройка параметров правил помогает адаптировать проверки под уникальные требования проекта (например, минимальное значение контрастности для color-contrast).

Аудит конкретного элемента

Для ускорения анализа больших страниц возможна проверка отдельных элементов:

const element = document.querySelector('#main-content');
axe.run(element).then(results => {
  console.log(results.violations);
});

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

Асинхронный анализ и интеграция с тестами

Axe-core полностью поддерживает Promise API, что позволяет использовать его в автоматизированных тестах на Jest, Cypress, Mocha и других фреймворках.

Пример с использованием async/await:

async function testAccessibility() {
  const results = await axe.run(document);
  if (results.violations.length > 0) {
    console.error('Обнаружены нарушения доступности:', results.violations);
  }
}
testAccessibility();

Преимущества асинхронного подхода:

  • Возможность интеграции с CI/CD пайплайнами.
  • Проверка доступности на динамически изменяемых страницах.
  • Удобство работы с промисами и async/await вместо коллбеков.

Фильтрация и обработка нарушений

Каждое нарушение содержит подробную информацию:

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

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

const criticalViolations = results.violations.filter(v => v.impact === 'critical');
criticalViolations.forEach(v => {
  console.log(`${v.id}: ${v.description}`);
});

Использование Axe-core в браузере

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

axe.run(document).then(results => console.table(results.violations));

Преимущество живого анализа:

  • Быстрая проверка без изменения кода.
  • Визуальный контроль проблем в DOM.
  • Возможность экспериментировать с настройками правил в реальном времени.

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

  • Плагины и кастомные правила. Можно создавать собственные проверки для специфических требований проекта, расширяя стандартный набор правил Axe-core.
  • Интеграция с React, Angular и Vue. Существуют обёртки и утилиты для проверки компонентов на лету.
  • Скриншоты и отчёты. С помощью внешних библиотек результаты анализа можно визуализировать и экспортировать.

Оптимизация производительности

  • Проверять только необходимые элементы, а не весь DOM.
  • Отключать тяжёлые правила при массовых проверках.
  • Кэшировать результаты для повторного анализа динамических компонентов.

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

Оглавление