Информация о нодах

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

Представление ноды

Каждая нода в Axe-core представлена объектом с набором стандартных свойств:

  • node: ссылка на сам DOM-элемент. Это может быть любой HTML-элемент, на который производится проверка.
  • html: строковое представление элемента, включая его атрибуты.
  • target: массив CSS-селекторов, который позволяет точно определить путь к элементу в DOM.
  • any, all, none: массивы результатов правил проверки доступности, применённых к ноде. Они содержат объекты с информацией о нарушении, предупреждении или успешной проверке.

Пример структуры объекта ноды:

{
  node: HTMLButtonElement,
  html: "<button type='submit'>Отправить</button>",
  target: ["#form > button"],
  any: [...],
  all: [...],
  none: [...]
}

Получение информации о ноде

Axe-core предоставляет метод axe.run(), который возвращает результат в виде объекта с массивом нод, затронутых найденными проблемами. Для работы с отдельной нодой можно использовать следующие подходы:

import axe from 'axe-core';

axe.run(document).then(results => {
  results.violations.forEach(violation => {
    violation.nodes.forEach(node => {
      console.log(node.html);   // HTML код элемента
      console.log(node.target); // CSS путь к элементу
    });
  });
});

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

Работа с атрибутами и ролями

Каждая нода содержит информацию о атрибутах ARIA, ролях и других свойствах:

  • role: вычисляемая ARIA-роль элемента, если она присутствует.
  • htmlAttributes: объект с ключами-значениями всех атрибутов элемента.
  • accessibleName: строка, содержащая вычисленное имя для скринридеров.
  • accessibleDescription: описание, используемое для озвучивания вспомогательными технологиями.

Пример:

{
  role: "button",
  htmlAttributes: { type: "submit", id: "sendBtn" },
  accessibleName: "Отправить",
  accessibleDescription: "Отправляет форму на сервер"
}

CSS-селекторы и точное определение элемента

target — массив строк, каждая из которых представляет CSS-селектор, уникально идентифицирующий элемент в DOM. Это позволяет:

  • быстро найти элемент в документе;
  • привязать ошибки доступности к конкретному узлу;
  • интегрировать результаты проверки с автоматизированными тестами UI.

Контекст и цепочки родителей

Для комплексных компонентов Axe-core сохраняет цепочку родительских элементов, чтобы понять контекст. В объекте ноды это отражается через вложенные структуры ancestor или через пути в target. Это важно для правил, зависящих от вложенности элементов, например label для input или table для th/td.

Информация о состоянии элемента

Для анализа интерактивных элементов важно знать их состояние:

  • disabled: флаг, указывающий на блокировку элемента.
  • hidden: скрыт ли элемент визуально или через атрибуты aria-hidden.
  • focusable: может ли элемент получать фокус.

Пример проверки состояния:

if (!node.hidden && node.focusable) {
  // Элемент видим и доступен для взаимодействия
}

Дополнительные сведения

Некоторые ноды могут содержать расширенные данные для диагностики:

  • failureSummary: текстовое описание нарушений доступности.
  • htmlSnapshot: фрагмент HTML, полезный для отладки.
  • impact: уровень важности нарушения (critical, serious, moderate, minor).

Использование этих свойств позволяет интегрировать Axe-core в CI/CD, тесты компонентов и отчётность по доступности.

Оптимизация работы с нодами

Для больших страниц рекомендуется:

  1. Фильтровать ноды по значимости (impact).
  2. Группировать по типу элемента или роли.
  3. Использовать target для точного сопоставления с тестами UI.

Это ускоряет анализ и упрощает интерпретацию результатов.

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

Оглавление