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

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

Основные компоненты объекта результатов

Объект результатов Axe-core формируется после выполнения функции axe.run() и представляет собой JavaScript-объект с несколькими ключевыми свойствами:

{
  "violations": [],
  "passes": [],
  "incomplete": [],
  "inapplicable": [],
  "testEngine": { ... },
  "testEnvironment": { ... }
}
  • violations — массив объектов правил, которые были нарушены на странице. Каждое правило описывает конкретный вид недоступности (например, отсутствие альтернативного текста для изображений).
  • passes — массив объектов правил, которые успешно прошли проверку.
  • incomplete — массив правил, которые не удалось полностью проверить, обычно из-за динамического содержимого или ограничений среды.
  • inapplicable — правила, которые не применимы к текущей странице или элементу.
  • testEngine — объект, содержащий информацию о версии Axe-core и движке проверки.
  • testEnvironment — сведения о среде выполнения (браузер, URL, DOM и др.).

Структура элемента массива violations

Каждая запись в массиве violations имеет следующую форму:

{
  "id": "image-alt",
  "impact": "critical",
  "description": "Все изображения должны иметь текстовое описание",
  "help": "Добавьте атрибут alt ко всем изображениям",
  "helpUrl": "https://dequeuniversity.com/rules/axe/4.4/image-alt?application=axeAPI",
  "tags": ["wcag2a", "wcag111", "section508"],
  "nodes": [ ... ]
}
  • id — уникальный идентификатор правила.
  • impact — уровень критичности нарушения: minor, moderate, serious, critical.
  • description — текстовое описание сути правила.
  • help — краткое руководство по исправлению ошибки.
  • helpUrl — ссылка на официальное руководство с подробными инструкциями.
  • tags — массив тегов, указывающих на соответствие стандартам доступности (WCAG, Section 508 и др.).
  • nodes — массив DOM-узлов, на которых обнаружено нарушение.

Структура элемента массива nodes

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

{
  "html": "<img src='logo.png'>",
  "target": ["#logo"],
  "impact": "critical",
  "any": [ ... ],
  "all": [ ... ],
  "none": [ ... ]
}

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

  • target — CSS-селектор или массив селекторов, идентифицирующих элемент в DOM.

  • impact — уровень критичности для данного узла (может совпадать с уровнем правила или быть индивидуальным).

  • any, all, none — массивы результатов проверок, которые уточняют, какие конкретно условия правила выполнены или нарушены:

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

Пример элемента внутри any:

{
  "id": "image-alt",
  "impact": "critical",
  "message": "Элемент <img> не имеет атрибута alt",
  "relatedNodes": []
}

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

Структурированность объектов позволяет применять фильтры и группировки. Например, можно получить все критические нарушения:

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

Для каждого нарушения можно перебирать nodes и извлекать информацию о конкретных элементах:

criticalViolations.forEach(rule => {
  rule.nodes.forEach(node => {
    console.log("Элемент:", node.html);
    console.log("Селектор:", node.target.join(", "));
  });
});

Важные особенности структуры

  1. Гибкость анализа: каждый узел может содержать несколько нарушений разных правил.
  2. Многоуровневая детализация: массивы any, all, none позволяют точно определить, какие условия выполнены, а какие нет.
  3. Ссылки на документацию: helpUrl упрощает процесс исправления ошибок.
  4. Соответствие стандартам: использование тегов wcag2a, wcag2aa и др. помогает классифицировать результаты по уровню доступности.

Примеры интеграции с другими инструментами

  • Логирование в консоль:
axe.run(document, {}, (err, results) => {
  if (err) throw err;
  console.table(results.violations.map(v => ({
    id: v.id,
    impact: v.impact,
    nodes: v.nodes.length
  })));
});

  • Фильтрация по типу контента: для страниц с большим количеством элементов можно отделять нарушения по типу элементов (img, button, form) и автоматически генерировать отчёты.

  • Экспорт в JSON: структура результатов полностью сериализуема, что позволяет сохранять отчеты и интегрировать с CI/CD системами.

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

Оглавление