HTML reporter

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

Подключение Axe-core и HTML Reporter

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

npm install axe-core axe-html-reporter --save-dev

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

const axe = require('axe-core');
const AxeHtmlReporter = require('axe-html-reporter');

Ключевые моменты подключения:

  • axe-core отвечает за анализ DOM и генерацию JSON-отчёта с результатами.
  • axe-html-reporter преобразует этот JSON в удобный HTML-отчёт.

Настройка тестирования

Перед запуском анализа необходимо подготовить конфигурацию Axe:

const options = {
    runOnly: {
        type: 'tag',
        values: ['wcag2a', 'wcag2aa'] // Проверка на соответствие стандартам WCAG 2.0 уровня A и AA
    },
    rules: {
        'color-contrast': { enabled: true },
        'image-alt': { enabled: true }
    }
};
  • runOnly позволяет ограничить проверку определёнными тегами или стандартами.
  • rules позволяет включать или отключать отдельные правила.

Запуск анализа

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

axe.run(document, options, (err, results) => {
    if (err) throw err;

    // Формирование HTML-отчёта
    const reporter = new AxeHtmlReporter({
        results,
        outputFile: 'axe-report.html',
        theme: 'default'
    });
    reporter.writeReport();
});

Пояснения к коду:

  • document — корневой DOM-элемент, на котором будет проводиться проверка.
  • results — объект с полным набором данных о найденных нарушениях.
  • AxeHtmlReporter создаёт файл axe-report.html, доступный для просмотра в браузере.
  • Параметр theme позволяет менять оформление отчёта (например, default, dark, minimal).

Структура HTML-отчёта

HTML-отчёт состоит из нескольких блоков:

  1. Общие сведения

    • Время проведения анализа.
    • Версия библиотеки Axe-core.
    • Настройки проверки.

  2. Список нарушений

    • Для каждого нарушения указывается элемент, правило, уровень критичности (violation, serious, moderate, minor).
    • Предоставляются рекомендации по исправлению.

  3. Интерактивные элементы

    • Возможность разворачивать подробности по каждому нарушению.
    • Подсветка затронутого DOM-элемента.

  4. Сводка по категориям

    • Группировка нарушений по тегам WCAG.
    • Количество ошибок и предупреждений по каждому правилу.

Дополнительные возможности

  • Фильтрация нарушений: отчёт можно настроить так, чтобы показывать только ошибки определённого уровня или конкретного правила.
  • Автоматизация: генерация HTML-отчётов легко интегрируется в CI/CD пайплайны (например, Jenkins, GitHub Actions), что позволяет автоматически отслеживать доступность.
  • Стилизация: при необходимости HTML можно кастомизировать с помощью CSS, изменяя оформление таблиц, подсветку ошибок и цветовую палитру.

Пример интеграции с Node.js

const fs = require('fs');
const { JSDOM } = require('jsdom');

const dom = new JSDOM(fs.readFileSync('index.html'));
axe.run(dom.window.document, options, (err, results) => {
    if (err) throw err;

    const reporter = new AxeHtmlReporter({
        results,
        outputFile: 'axe-report.html'
    });
    reporter.writeReport();
    console.log('HTML-отчёт сгенерирован: axe-report.html');
});
  • Использование JSDOM позволяет тестировать HTML-файлы вне браузера.
  • Это удобно для автоматизированного тестирования и интеграции с серверными скриптами.

Лучшие практики

  • Проверять страницы регулярно после внесения изменений в DOM или стили.
  • Использовать runOnly для фокусировки на критичных правилах при больших проектах.
  • Хранить HTML-отчёты в системе контроля версий для отслеживания динамики исправления ошибок доступности.
  • Интегрировать отчёты в CI/CD, чтобы автоматически блокировать сборки при критических нарушениях.

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

Оглавление