Интерпретация passes

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

Структура объекта passes

Каждый элемент passes является объектом с фиксированными полями:

  • id – уникальный идентификатор проверки (например, color-contrast, image-alt).
  • impact – уровень важности для доступности: minor, moderate, serious, critical.
  • description – текстовое описание цели проверки.
  • nodes – массив DOM-узлов, которые были проверены и соответствуют критериям проверки.
  • help – краткое пояснение по улучшению доступности.
  • helpUrl – ссылка на документацию или рекомендации.

Пример структуры одного pass:

{
  "id": "image-alt",
  "impact": "serious",
  "description": "Images must have alternate text",
  "nodes": [
    {
      "html": "<img src='logo.png'>",
      "target": ["#logo"],
      "any": [],
      "all": [],
      "none": []
    }
  ],
  "help": "Добавьте атрибут alt к изображению для описания его содержания",
  "helpUrl": "https://dequeuniversity.com/rules/axe/4.6/image-alt?application=axeAPI"
}

Назначение passes

Главная задача passes — фиксировать все проверки, которые веб-элемент успешно прошёл, то есть соответствующие требованиям WCAG. Эти данные:

  • Позволяют отфильтровать элементы, которые уже соответствуют стандартам, концентрируясь на проблемных узлах.
  • Служат основой для аналитики покрытия тестов доступности.
  • Помогают построить отчёты о достигнутом уровне соответствия.

Отличие passes от violations и incomplete

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

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

Работа с массивом nodes

Каждый элемент nodes содержит DOM-узлы, которые прошли проверку. Внутри узлов присутствуют поля:

  • html – строковое представление узла.
  • target – CSS-селектор или XPath к узлу.
  • any, all, none – массивы условий проверки, соответствующих разным уровням правил. Для passes эти массивы обычно пусты, что свидетельствует о полном соответствии.

Пример обработки в Jav * aScript:

axe.run(document, {}, function(err, results) {
  if (err) throw err;
  
  results.passes.forEach(pass => {
    console.log(`Проверка: ${pass.id} (${pass.impact})`);
    pass.nodes.forEach(node => {
      console.log(`Прошёл узел: ${node.target.join(', ')}`);
    });
  });
});

Настройка и фильтрация passes

Axe-core позволяет фильтровать проверки по уровню воздействия или типу узла. Это особенно полезно при интеграции в CI/CD или при генерации отчётов для команды разработки.

Пример фильтрации по критическим проверкам:

const criticalPasses = results.passes.filter(pass => pass.impact === 'critical');
criticalPasses.forEach(pass => {
  console.log(`Критическая проверка успешно пройдена: ${pass.id}`);
});

Визуализация данных passes

Для комплексных интерфейсов рекомендуется визуализировать данные passes, чтобы отслеживать покрытие доступности:

  • Таблицы с перечислением проверок и узлов.
  • Графики с соотношением passes / violations.
  • Цветовые индикаторы уровня impact для успешных проверок.

Интеграция с тестами

Использование passes в автоматизированных тестах позволяет:

  • Подтверждать соответствие базовым стандартам доступности после каждой сборки.
  • Снижать количество ложноположительных результатов, концентрируясь на новых нарушениях.
  • Создавать отчёты о динамических компонентах, которые стабильно соответствуют WCAG.

passes служит важным инструментом не только для проверки состояния интерфейса, но и для построения культуры доступности на проекте. Они дают уверенность, что уже реализованные элементы соответствуют требованиям, и помогают планировать работу над улучшением доступности для всех пользователей.

Оглавление