Шаблоны отчетов

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

Форматы отчетов

Axe-core поддерживает несколько форматов отчетов:

  1. JSON Основной формат данных, предназначенный для программной обработки. JSON-структура содержит массив результатов, где каждый элемент представляет собой отдельное нарушение с подробной информацией:

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

    JSON-формат используется для интеграции с CI/CD, аналитическими инструментами и кастомными скриптами обработки.

  2. Текстовый (CLI-вывод) Удобен для быстрого просмотра результатов в терминале. Позволяет отображать:

    • количество ошибок и предупреждений;
    • краткое описание каждого нарушения;
    • путь к элементу DOM, где зафиксировано нарушение.

    Текстовый вывод чаще применяется на локальных машинах разработчиков и при ручном тестировании.

  3. HTML Визуальный отчет, структурированный в виде таблиц и секций. HTML-отчеты включают:

    • фильтры по уровню важности нарушений;
    • возможность раскрытия деталей по каждому элементу;
    • подсветку проблемных участков DOM.

    Такой формат удобен для презентаций руководству и командным обзорам доступности.

Создание пользовательских шаблонов

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

Для генерации пользовательских отчетов используется API axe.run() и последующая обработка результатов:

const axe = require('axe-core');
const fs = require('fs');

axe.run(document, {
    runOnly: {
        type: 'tag',
        values: ['wcag2a', 'wcag2aa']
    }
}).then(results => {
    const customReport = results.violations.map(v => ({
        ruleId: v.id,
        severity: v.impact,
        description: v.description,
        elements: v.nodes.map(n => ({
            html: n.html,
            target: n.target,
            failureSummary: n.failureSummary
        }))
    }));
    fs.writeFileSync('custom-report.json', JSON.stringify(customReport, null, 2));
});

В этом примере создается структурированный JSON, который можно затем преобразовать в любой формат: CSV, PDF или интегрировать с внешними дашбордами.

Настройка содержимого отчетов

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

  • runOnly — ограничение проверки определенными правилами или тегами WCAG.
  • rules — настройка конкретных правил, возможность включать или отключать их, изменять уровни важности.
  • resultTypes — определяет, какие категории результатов выводить: violations, incomplete, passes, inapplicable.
  • reporter — механизм, позволяющий подключать сторонние или собственные генераторы отчетов.

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

axe.run(document, {
    resultTypes: ['violations'],
    rules: {
        'color-contrast': { enabled: true },
        'label': { enabled: false }
    }
}).then(results => {
    const criticalIssues = results.violations.filter(v => v.impact === 'critical');
    console.log(criticalIssues);
});

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

Шаблоны отчетов Axe-core особенно полезны для автоматического тестирования:

  • JSON-отчеты передаются в скрипты проверки, которые могут блокировать деплой при наличии критических нарушений.
  • HTML-отчеты можно автоматически сохранять и публиковать в артефактах сборки.
  • Структурированные отчеты позволяют строить графики и метрики для анализа качества доступности с течением времени.

Практические рекомендации

  • Использовать JSON для автоматизации, так как он легко парсится и интегрируется с системами контроля качества.
  • HTML-отчеты — для визуального анализа и презентаций.
  • Создавать кастомные шаблоны, чтобы включать только нужные поля и соответствовать внутренним стандартам команды.
  • Разделять отчеты по уровням важности, чтобы сразу выделять критические проблемы.

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

Оглавление