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

Библиотека Axe-core предоставляет мощные инструменты для автоматической проверки доступности веб-приложений. В среде React её использование осуществляется через пакет @axe-core/react, который позволяет интегрировать анализ прямо в жизненный цикл компонентов.

Установка производится через npm или yarn:

npm install @axe-core/react axe-core

или

yarn add @axe-core/react axe-core

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

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import axe from '@axe-core/react';

if (process.env.NODE_ENV !== 'production') {
  axe(React, ReactDOM, 1000); // Параметр 1000 — интервал проверок в миллисекундах
}

ReactDOM.render(<App />, document.getElementById('root'));

Проверка активна только в development режиме, чтобы не влиять на производительность в продакшене.

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

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

axe(React, ReactDOM, 1000, {
  rules: [
    { id: 'color-contrast', enabled: true },
    { id: 'label', enabled: false }
  ],
  reporter: 'v2'
});
  • rules — массив объектов с указанием id правила и состояния enabled.
  • reporter — формат вывода результатов (v2, v3, no-passes).
  • Можно также фильтровать элементы DOM через selectors и исключать определённые участки страницы.

Проверка компонентов в изоляции

Для тестирования отдельных компонентов используется комбинация Jest и React Testing Library. Инструменты Axe позволяют интегрироваться в unit-тесты:

import React from 'react';
import { render } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';
import MyButton from './MyButton';

expect.extend(toHaveNoViolations);

test('Проверка доступности MyButton', async () => {
  const { container } = render(<MyButton />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

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

  • axe(container) запускает анализ доступности конкретного элемента или компонента.
  • toHaveNoViolations из jest-axe облегчает интеграцию с тестами.
  • Поддерживаются асинхронные проверки, что важно для компонентов с динамическим рендерингом.

Обработка динамического контента

React-приложения часто содержат динамически изменяемый контент, создаваемый через состояние или эффекты. Axe-core позволяет отслеживать изменения через повторный запуск анализа:

import { useEffect } from 'react';
import axe from '@axe-core/react';

function useAxeOnUpdate(ref) {
  useEffect(() => {
    if (ref.current) {
      axe.run(ref.current, {}, (err, results) => {
        if (err) throw err;
        console.log(results.violations);
      });
    }
  });
}
  • ref указывает на DOM-узел компонента.
  • axe.run принимает селектор или узел, объект настроек и callback.
  • Позволяет отслеживать доступность после каждого изменения состояния.

Визуализация и отчётность

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

axe.run(document, {}, (err, results) => {
  if (err) throw err;
  results.violations.forEach(v => {
    console.group(`Ошибка: ${v.id}`);
    console.log('Описание:', v.description);
    console.log('Элементы:', v.nodes.map(node => node.html));
    console.groupEnd();
  });
});
  • Каждое нарушение содержит id, description, helpUrl и список nodes.
  • Для React-компонентов полезно выводить container.innerHTML для точного указания проблемного элемента.

Производительность и рекомендации

  • Проверки должны выполняться только в development, чтобы не замедлять пользовательский интерфейс.
  • Для крупных приложений рекомендуется ограничивать селекторы, чтобы анализировались только релевантные участки.
  • Использование setTimeout или дебаунса при динамическом контенте уменьшает нагрузку.
  • Настройка отдельных правил позволяет сосредоточиться на критичных аспектах доступности.

Интеграция с CI/CD

Включение Axe в pipeline позволяет автоматизировать проверку доступности:

npm install --save-dev jest-axe

В тестах проверяются ключевые страницы и компоненты, нарушения блокируют сборку:

describe('Главная страница', () => {
  it('должна быть доступной', async () => {
    const { container } = render(<HomePage />);
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });
});
  • Автоматическая проверка выявляет проблемы ещё до деплоя.
  • Отчёты можно интегрировать с системами CI (Jenkins, GitHub Actions).

Поддержка TypeScript

При использовании TypeScript доступны типы для @axe-core/react:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import axe from '@axe-core/react';

axe(React, ReactDOM, 1000, {
  rules: [{ id: 'color-contrast', enabled: true }]
});
  • Полная типизация помогает избежать ошибок в настройках.
  • Проверка правил и конфигурации проходит на этапе компиляции.

Использование Axe-core в React позволяет поддерживать высокий уровень доступности интерфейсов, автоматизировать тестирование и интегрировать анализ доступности как в процесс разработки, так и в CI/CD.

Оглавление