Результаты проверок и их интерпретация

Библиотека Axe-core предназначена для автоматизации тестирования доступности веб-контента и выявления проблем соответствия стандартам WCAG (Web Content Accessibility Guidelines). Основной результат работы библиотеки — это объект с результатами проверок, содержащий детализированную информацию о найденных нарушениях, предупреждениях и рекомендациях.

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

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

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

Каждый элемент массивов violations или incomplete представляет собой объект со следующими важными полями:

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

Пример объекта node:

{
  "html": "<button>Click me</button>",
  "target": ["#submit-button"],
  "failureSummary": "Элемент кнопки не имеет достаточного контрастного текста.",
  "any": [...],
  "all": [...],
  "none": [...]
}

Поле target содержит CSS-селектор для точной идентификации проблемного элемента, а failureSummary объединяет детальные причины нарушения.

Интерпретация уровней влияния (impact)

  • critical — элемент или функция недоступна, препятствует основным сценариям использования; исправление обязательно;
  • serious — значительное нарушение, ограничивает возможности пользователей, особенно с особыми потребностями;
  • moderate — нарушает некоторые рекомендации доступности, но не блокирует основной функционал;
  • minor — косметические или малозначимые проблемы, исправление желательно, но не критично.

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

Детализация узлов (nodes)

Каждый объект node предоставляет следующие полезные сведения:

  1. html — исходный HTML-код проблемного элемента.

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

  3. failureSummary — краткое описание проблемы, полезное для отчётов.

  4. any, all, none — массивы, содержащие конкретные проверки и их результаты:

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

Эти поля позволяют детально анализировать причину нарушения и выбирать корректное решение для исправления.

Практическая интерпретация данных

Для эффективного использования результатов проверки рекомендуется:

  • Фокусироваться сначала на critical и serious нарушениях, чтобы устранить блокирующие проблемы доступности.
  • Использовать поле helpUrl для получения точных инструкций по исправлению конкретного нарушения.
  • Проверять массив incomplete вручную, поскольку автоматическая проверка не всегда способна оценить контекст.
  • Применять результаты поля passes для документирования областей, соответствующих стандартам, что важно при аудите доступности.

Форматирование отчетов

Результаты Axe-core легко интегрируются в отчёты:

  • JSON — для автоматизированной обработки, интеграции в CI/CD и анализа с использованием скриптов.
  • Текстовые резюме — для генерации человеческих отчётов, где важна визуальная структура: уровень серьёзности, описание, ссылка на документацию и селекторы элементов.
  • Визуальные инструменты — некоторые плагины позволяют отображать нарушения прямо на странице с подсветкой проблемных элементов.

Советы по интерпретации

  1. Каждый элемент массива violations может содержать несколько узлов (nodes), поэтому одна и та же проблема может проявляться в разных местах DOM.
  2. Для элементов с динамическим контентом важно повторно запускать проверки после изменения DOM, чтобы отслеживать исправления.
  3. При анализе контраста и текстовых меток следует учитывать сочетание полей failureSummary и any, так как они дают точное описание проблемы.

Эффективная интерпретация результатов Axe-core требует понимания структуры объектов, уровня воздействия нарушений и контекста каждого DOM-элемента. Это позволяет выстроить системный процесс устранения проблем доступности и поддерживать веб-приложение соответствующим стандартам WCAG.

Оглавление