Массив nodes

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

Структура объектов внутри nodes

Каждый объект массива nodes включает несколько важных свойств:

  • html — строковое представление элемента в виде HTML. Позволяет быстро увидеть, какой узел вызывает нарушение. Пример:
<button class="submit" aria-label="Отправить"></button>
  • target — массив CSS-селекторов или Xpath-выражений, однозначно идентифицирующих элемент в DOM. Позволяет использовать селекторы для автоматизированного поиска узла. Пример:
["#main-form > button.submit"]
  • failureSummary — текстовое описание, объясняющее, почему элемент не соответствует правилам доступности. Сводка формируется на основании конкретного правила, которое проверяет Axe-core. Пример:
Элемент <button> должен содержать уникальный текст для экранных считывателей.

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

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

Каждый элемент этих массивов содержит id, impact, message и relatedNodes, предоставляя детализированное описание конкретного критерия, который проверяет Axe-core.

Использование массива nodes для анализа

Массив nodes позволяет создавать точные отчёты о нарушениях:

  1. Локализация проблем: сочетание html и target позволяет разработчику быстро найти проблемный элемент в DOM.
  2. Группировка по правилу: каждый объект nodes привязан к конкретному правилу проверки, что упрощает понимание, какие правила нарушены.
  3. Подробные рекомендации: failureSummary и массивы any/all/none предоставляют конкретные действия по исправлению проблемы.

Пример структуры объекта nodes

{
  "nodes": [
    {
      "html": "<img src='logo.png'>",
      "target": ["#header > img.logo"],
      "failureSummary": "Элемент <img> должен содержать атрибут alt с описанием изображения.",
      "any": [],
      "all": [
        {
          "id": "image-alt",
          "impact": "critical",
          "message": "Элемент <img> не имеет атрибута alt",
          "relatedNodes": []
        }
      ],
      "none": []
    }
  ]
}

В этом примере видно, что нарушение связано с отсутствием атрибута alt. Массив nodes предоставляет полную информацию для исправления ошибки.

Практические подходы к работе с nodes

  • Автоматизация исправлений: используя target, можно автоматически находить и изменять проблемные элементы.
  • Визуализация нарушений: объединение html и failureSummary позволяет создавать отчёты в виде таблиц или аннотаций на странице.
  • Фильтрация по уровню серьёзности: каждый объект в nodes имеет impact в рамках подусловий, что позволяет сортировать нарушения по критичности.

Связь с другими частями отчёта

Массив nodes всегда находится внутри объекта, который описывает конкретное правило проверки (rule). Взаимосвязь выглядит так:

result.rules -> nodes -> individual elements

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

Особенности и подводные камни

  • Элементы в nodes могут повторяться, если они нарушают несколько подусловий одного правила. Нужно учитывать уникальность при генерации отчётов.
  • html содержит snapshot DOM на момент проверки, изменения в странице после анализа не отражаются автоматически.
  • target может включать сложные селекторы; при динамическом DOM важно проверять актуальность селектора.

Массив nodes является ключевым инструментом для детальной диагностики проблем доступности, позволяя интегрировать Axe-core как в ручное тестирование, так и в автоматизированные пайплайны проверки качества интерфейсов.

Оглавление