Интеграция с DevTools

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

Для интеграции Axe-core в среду разработчика необходимо установить пакет через npm или yarn:

npm install axe-core --save-dev

или

yarn add axe-core --dev

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

import axe from 'axe-core';

В контексте браузера можно также подключать Axe-core через CDN, что упрощает быстрые тесты на страницах без сборщика:

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

Инициализация и запуск

Axe-core предоставляет функцию run, которая позволяет запускать проверки доступности на текущем DOM. Минимальная инициализация выглядит так:

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

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

  • document — корневой элемент, на котором выполняется анализ. Можно использовать любой DOM-узел.
  • Второй параметр — объект конфигурации, который позволяет задавать правила, исключения и контекст.
  • results.violations — массив обнаруженных нарушений доступности.

Настройка правил и конфигураций

Axe-core поддерживает гибкую настройку:

axe.run(document, {
  rules: {
    'color-contrast': { enabled: true },
    'label': { enabled: false }
  }
}, (err, results) => {
  console.log(results.violations);
});
  • enabled: true/false — включение или отключение конкретного правила.
  • Можно задавать приоритеты проверки и исключать элементы по CSS-селекторам.

Интеграция с DevTools

Chrome DevTools позволяет подключать Axe-core как расширение или напрямую через консоль:

  1. Вкладка Console:

    // Вставка библиотеки через CDN
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.8.0/axe.min.js';
script.onl oad = () => axe.run(document, {}, (err, results) => console.log(results));
document.head.appendChild(script);

  2. Расширение axe DevTools интегрируется с инспектором элементов и отображает нарушения в удобном интерфейсе, показывая:

    • Уровень серьезности (minor, moderate, serious, critical)
    • Локацию элемента в DOM
    • Подробные рекомендации по исправлению

Использование с тестовыми фреймворками

Axe-core легко интегрируется с Jest, Mocha, Cypress и другими инструментами для автоматизации:

  • Jest + axe-core:
import { configureAxe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('Проверка компонента на доступность', async () => {
  const { container } = render(<MyComponent />);
  const axe = configureAxe();
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});
  • Cypress + axe-core:
import 'cypress-axe';

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

Локальный анализ DOM

Для более точного анализа можно создавать контекстные ограничения:

axe.run(document.querySelector('#main-content'), {
  include: [['#main-content']],
  exclude: [['.advertisement']]
}, (err, results) => {
  console.log(results.violations);
});
  • include — массив селекторов, которые подлежат проверке.
  • exclude — элементы, которые пропускаются.

Работа с отчетами

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

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

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

results.violations.forEach(v => {
  console.group(`${v.id} (${v.impact})`);
  v.nodes.forEach(node => console.log(node.html));
  console.groupEnd();
});

Автоматизация проверок при разработке

  • Настройка pre-commit хуков для автоматического запуска Axe-core.
  • Интеграция с CI/CD для регрессионного тестирования доступности.
  • Использование DevTools API для динамического анализа страниц без ручного запуска.

Практические советы

  • Совмещать Axe-core с другими инструментами, например, Lighthouse, для комплексного аудита.
  • Включать только актуальные правила, чтобы снизить шум от устаревших проверок.
  • Применять фильтры по DOM-контейнеру для ускорения анализа больших страниц.

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

Оглавление