Чтение результатов violations

Библиотека Axe-core представляет собой мощный инструмент для автоматизированного тестирования доступности веб-страниц. Она позволяет выявлять нарушения стандартов WCAG, формировать структурированные отчёты и интегрироваться в процессы CI/CD. В JavaScript Axe-core используется через API, предоставляющее методы для запуска проверок и обработки результатов.

Получение результатов проверок

Результаты тестирования Axe-core хранятся в виде объектов, содержащих массив violations. Каждый элемент массива представляет собой отдельное нарушение доступности. Структура объекта violation стандартная и включает ключевые поля:

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

Пример базового вызова Axe-core с обработкой результатов:

import axe from 'axe-core';

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

    results.violations.forEach(violation => {
        console.log(`Нарушение: ${violation.id}`);
        console.log(`Уровень: ${violation.impact}`);
        console.log(`Описание: ${violation.description}`);
        console.log(`Документация: ${violation.helpUrl}`);
        violation.nodes.forEach(node => {
            console.log(`  Элемент: ${node.html}`);
            console.log(`  Селекторы: ${node.target.join(', ')}`);
            console.log(`  Сообщения: ${node.failureSummary}`);
        });
    });
});

Подробная структура узлов (nodes)

Каждый объект в массиве nodes описывает конкретный DOM-элемент, нарушающий правило:

  • html — HTML-код элемента.

  • target — массив CSS-селекторов для точного поиска элемента на странице.

  • failureSummary — краткое описание проблемы с конкретным элементом.

  • any, all, none — детализированные результаты проверок, где:

    • any содержит проверки, которые должны выполняться хотя бы для одного условия;
    • all — проверки, которые должны выполняться для всех условий;
    • none — проверки, которые не должны выполняться.

Эти поля позволяют построить детальные отчёты и интегрировать их в автоматические тесты, обеспечивая высокую точность анализа.

Фильтрация и сортировка нарушений

Для удобства обработки нарушений можно фильтровать их по уровню impact или по конкретному правилу id:

const criticalViolations = results.violations.filter(v => v.impact === 'critical');
const colorContrastIssues = results.violations.filter(v => v.id === 'color-contrast');

Также удобно создавать агрегированные отчёты, группируя нарушения по элементам DOM или по типу проблемы.

Генерация структурированных отчётов

Для передачи данных в CI/CD или внешние системы используют JSON-формат:

import fs from 'fs';

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

Это позволяет сохранять все детали нарушений, включая контекстные элементы и рекомендации по исправлению, для последующего анализа и визуализации.

Асинхронное использование Axe-core

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

import axe from 'axe-core';

async function checkAccessibility() {
    const results = await axe.run(document);
    results.violations.forEach(v => console.log(v.id, v.impact));
}

checkAccessibility();

Такой подход облегчает интеграцию с фреймворками тестирования, например Jest, Cypress или Playwright, позволяя строить автоматические проверки доступности на каждом этапе разработки.

Выводы о работе с violations

Массив violations является центральным элементом анализа доступности. Он содержит полные данные о нарушениях, уровне их критичности и конкретных элементах DOM, что позволяет создавать детальные отчёты, фильтровать по приоритетам и интегрировать результаты в процессы автоматического тестирования.

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

Оглавление