Экспорт данных

Для работы с библиотекой Axe-core в JavaScript достаточно установить пакет через npm:

npm install axe-core --save

Подключение может осуществляться как в браузерном окружении, так и в Node.js. В браузере библиотека доступна через глобальный объект axe, если подключить скрипт:

<script src="node_modules/axe-core/axe.min.js"></script>

В Node.js:

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

Основные концепции анализа доступности

Axe-core выполняет автоматическую проверку элементов DOM на соответствие стандартам доступности, таким как WCAG 2.1. Библиотека работает на основе набора правил (rules) и обеспечивает структурированный результат анализа, включающий:

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

Каждый объект violation содержит ключевые поля:

  • id — уникальный идентификатор правила.
  • impact — уровень влияния (critical, serious, moderate, minor).
  • description — краткое описание нарушения.
  • nodes — массив элементов DOM с детализацией нарушения.

Выполнение анализа

В браузере проверка доступности выполняется с помощью метода axe.run():

axe.run(document, {
    runOnly: {
        type: 'tag',
        values: ['wcag2a', 'wcag2aa']
    },
    rules: {
        'color-contrast': { enabled: true }
    }
}).then(results => {
    console.log(results);
});

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

  • Ограничить набор проверяемых правил.
  • Указать конкретные теги WCAG для проверки.
  • Настроить индивидуальные правила или отключить ненужные.

Форматы экспорта данных

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

JSON

JSON — универсальный формат для передачи данных между приложениями. Экспорт осуществляется стандартным методом JSON.stringify:

axe.run(document).then(results => {
    const jsonData = JSON.stringify(results, null, 2);
    // сохранение в файл или отправка на сервер
    console.log(jsonData);
});

Особенности JSON:

  • Полная структура violations, passes, incomplete.
  • Возможность последующего анализа и фильтрации.
  • Совместимость с инструментами визуализации.

CSV

Для анализа или отчётности в табличных редакторах удобно использовать CSV. Преобразование объекта violations в CSV требует обхода массива nodes и выбора ключевых полей:

function violationsToCSV(violations) {
    const header = ['ID', 'Impact', 'Description', 'Element', 'HTML'];
    const rows = violations.flatMap(v => 
        v.nodes.map(n => [
            v.id, v.impact, v.description, n.target.join(', '), n.html
        ])
    );
    return [header, ...rows].map(r => r.join(',')).join('\n');
}

axe.run(document).then(results => {
    const csv = violationsToCSV(results.violations);
    console.log(csv);
});

Особенности CSV:

  • Удобство импорта в Excel, Google Sheets.
  • Легко фильтровать по уровню влияния.
  • Требует предварительной выборки полей из объекта violations.

HTML

Для визуального отчёта можно сформировать HTML с разметкой, где будут указаны нарушения и элементы DOM. Для этого создаётся шаблонная функция:

function violationsToHTML(violations) {
    return `
    <html>
    <head><title>Accessibility Report</title></head>
    <body>
        <h1>Accessibility Violations</h1>
        ${violations.map(v => `
            <div>
                <h2>${v.id} (${v.impact})</h2>
                <p>${v.description}</p>
                <ul>
                    ${v.nodes.map(n => `<li>${n.target.join(', ')}: ${n.html}</li>`).join('')}
                </ul>
            </div>
        `).join('')}
    </body>
    </html>
    `;
}

axe.run(document).then(results => {
    const htmlReport = violationsToHTML(results.violations);
    console.log(htmlReport);
});

Особенности HTML:

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

Сохранение и передача отчётов

Экспортированные данные могут быть сохранены локально или отправлены на сервер для автоматизированного анализа. В Node.js можно использовать модуль fs:

const fs = require('fs');

axe.run(document).then(results => {
    fs.writeFileSync('axe-report.json', JSON.stringify(results, null, 2));
});

Для веб-приложений можно предложить пользователю скачать файл через Blob:

function downloadJSON(data, filename) {
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    link.click();
}

axe.run(document).then(results => {
    downloadJSON(results, 'axe-report.json');
});

Фильтрация и выбор данных для экспорта

Экспорт может включать не все данные, а только интересующие:

  • Только критические и серьёзные нарушения:
const criticalViolations = results.violations.filter(v => 
    v.impact === 'critical' || v.impact === 'serious'
);
  • Выбор конкретных страниц или секций DOM:
axe.run(document.querySelector('#main-content')).then(results => {
    console.log(results);
});
  • Игнорирование повторяющихся элементов для компактного отчёта.

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

Для автоматизации доступности в процессах CI/CD результаты экспорта Axe-core легко интегрировать:

  • Сбор JSON для последующего анализа тестовыми скриптами.
  • Генерация HTML-отчётов для просмотра менеджерами качества.
  • Автоматическое прерывание сборки при критических нарушениях.

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

Оглавление