Конфигурация для различных сборщиков

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

Настройка Axe-core в Webpack

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

  1. Через Webpack Dev Server Axe-core можно подключить как клиентский скрипт к приложению в процессе разработки. Например:
// webpack.config.js
module.exports = {
  // ...
  devServer: {
    before: function(app, server) {
      const axe = require('axe-core');
      app.use((req, res, next) => {
        // логика для включения проверки доступности
        next();
      });
    },
  },
};
  1. С использованием плагинов для тестирования Можно создать собственный Webpack плагин или использовать существующие, которые запускают Axe-core на собранных страницах и выводят результаты в консоль или в отчёт.

Особенности: при подключении через Dev Server проверки выполняются в реальном времени, что позволяет быстро выявлять проблемы доступности на этапе разработки, без необходимости запускать отдельные тесты.

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

Rollup ориентирован на сборку библиотек, поэтому подход отличается от Webpack:

  • Axe-core устанавливается как зависимость проекта.
  • Проверки обычно выполняются после сборки или в тестах с использованием puppeteer или jsdom:
import axe from 'axe-core';
import { JSDOM } from 'jsdom';

const dom = new JSDOM(``);
axe.run(dom.window.document).then(results => {
  console.log(results.violations);
});

Особенности: в отличие от Webpack, Rollup не предоставляет встроенный сервер для горячей проверки, поэтому интеграция больше ориентирована на автоматические тесты после сборки.

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

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

import axe from 'axe-core';

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

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

Конфигурация Axe-core для сборщиков

Для всех сборщиков важны следующие параметры конфигурации:

  • runOnly — определяет, какие правила должны быть проверены ('wcag2a', 'wcag2aa', 'best-practice' и т.д.).
  • rules — можно указать отдельные правила для включения или отключения.
  • reporter — формат вывода результатов ('v2', 'v3' или пользовательский).
  • resultTypes — позволяет фильтровать типы результатов: 'violations', 'passes', 'incomplete', 'inapplicable'.

Пример полной конфигурации:

const axeConfig = {
  runOnly: {
    type: 'tag',
    values: ['wcag2aa', 'best-practice']
  },
  rules: {
    'color-contrast': { enabled: true },
    'label': { enabled: false }
  },
  resultTypes: ['violations', 'incomplete']
};

axe.run(document, axeConfig).then(results => {
  console.log(results);
});

Автоматизация тестов доступности

Для интеграции в CI/CD-процессы можно использовать комбинацию сборщика и тестового фреймворка:

  1. Webpack + Jest/Puppeteer После сборки проекта через Webpack, Jest с Puppeteer запускает Axe-core на страницах приложения, собирает и формирует отчёт.

  2. Rollup + Mocha/Chai Rollup собирает библиотеку, а Mocha с Chai выполняет проверки доступности через Axe-core в jsdom окружении.

  3. Parcel + Cypress Cypress позволяет запускать функциональные тесты в браузере и интегрировать Axe-core через специальные плагины (cypress-axe), обеспечивая проверку доступности в условиях реального DOM.

Важные рекомендации при работе со сборщиками

  • Настроить игнорирование определённых страниц или компонентов, которые не требуют проверки доступности.
  • Поддерживать консистентный формат отчётов для интеграции с CI/CD.
  • Регулярно обновлять версии Axe-core, чтобы использовать последние правила WCAG.
  • В тестах включать как позитивные, так и негативные сценарии, чтобы проверять корректность срабатывания правил.
Оглавление