Визуализация результатов

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

npm install axe-core

Подключение в коде может осуществляться как через require (Node.js), так и через import (ES6):

// ES6
import axe from 'axe-core';

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

Инициализация и запуск анализа

Базовый запуск анализа страницы выполняется с помощью функции axe.run(). Она возвращает объект с результатами, включающими найденные проблемы доступности (violations), рекомендации (incomplete) и информационные сообщения (passes).

axe.run(document, { 
    runOnly: ['wcag2a', 'wcag2aa'] 
}, (err, results) => {
    if (err) throw err;
    console.log(results);
});
  • document — объект DOM, который анализируется.
  • runOnly — опциональный фильтр по стандартам WCAG.

Структура объекта результатов

Объект результатов содержит несколько ключевых массивов:

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

Каждый объект в массиве violations содержит:

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

Пример элемента nodes:

{
  "html": "<button>Click me</button>",
  "target": ["#myButton"],
  "failureSummary": "Элемент кнопки не имеет описательного текста для экранных читалок."
}

Визуализация результатов в консоли

Для быстрого просмотра можно использовать стандартный console.log или библиотеку console.table:

results.violations.forEach(v => {
    console.log(`Правило: ${v.id}, Влияние: ${v.impact}`);
    v.nodes.forEach(node => console.log(`Элемент: ${node.html}\nПричина: ${node.failureSummary}`));
});

Для табличного представления:

console.table(results.violations.map(v => ({
    Правило: v.id,
    Влияние: v.impact,
    Описание: v.help
})));

Встроенная визуализация в браузере

axe-core предлагает API axe.run() в комбинации с DOM, что позволяет создавать настраиваемые визуальные отчёты прямо на странице. Например, можно динамически создавать панель с результатами:

const container = document.createElement('div');
container.style.position = 'fixed';
container.style.top = '0';
container.style.right = '0';
container.style.background = 'white';
container.style.border = '1px solid black';
container.style.maxHeight = '50vh';
container.style.overflow = 'auto';
document.body.appendChild(container);

results.violations.forEach(v => {
    const rule = document.createElement('div');
    rule.innerHTML = `<strong>${v.id} (${v.impact})</strong>: ${v.help}`;
    container.appendChild(rule);
    v.nodes.forEach(node => {
        const element = document.createElement('div');
        element.textContent = node.html;
        element.style.marginLeft = '10px';
        container.appendChild(element);
    });
});

Такой подход позволяет визуально видеть нарушенные элементы прямо на странице, связывая правило с конкретным DOM-узлом.

Использование сторонних плагинов для отчётов

Для более сложной визуализации применяются плагины и утилиты:

  • axe-html-reporter — генерация HTML-отчёта с интерактивными элементами.
  • axe-core/react — интеграция с React-компонентами для отображения нарушений в UI.

Пример генерации HTML-отчёта:

import { writeFileSync } from 'fs';
import { htmlReporter } from 'axe-html-reporter';

const html = htmlReporter(results);
writeFileSync('axe-report.html', html);

Интерактивная маркировка элементов

Можно добавить подсветку проблемных элементов с помощью CSS классов:

results.violations.forEach(v => {
    v.nodes.forEach(node => {
        const el = document.querySelector(node.target.join(','));
        if (el) el.style.outline = '2px solid red';
    });
});

Каждое нарушение визуально выделяется, что упрощает локализацию проблемы.

Гибкая фильтрация и группировка

Для удобной визуализации результаты можно фильтровать по:

  • уровню серьёзности (impact)
  • типу правила (id)
  • тегам WCAG (tags)

Пример фильтрации:

const criticalViolations = results.violations.filter(v => v.impact === 'critical');

Далее можно визуализировать только эти элементы, чтобы концентрироваться на самых серьёзных проблемах.

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

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

import fs from 'fs';

fs.writeFileSync('axe-results.json', JSON.stringify(results, null, 2));

Скрипты проверки могут анализировать JSON, формировать отчёты или блокировать релизы при критических нарушениях.

Визуализация в виде графиков

Собранные результаты можно преобразовывать в графики с использованием библиотек вроде Chart.js или D3.js:

  • ось X — категории правил (id)
  • ось Y — количество нарушений
  • цвет — уровень серьёзности

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

Оглавление