Параметр ancestry

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

Определение и назначение

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

{
  ancestry: [
    {
      element: 'div',
      attributes: { role: 'banner' },
      selector: '.main-header'
    },
    {
      element: 'section',
      attributes: { 'aria-hidden': 'true' }
    }
  ]
}

Каждый объект внутри массива может содержать следующие свойства:

  • element — тег HTML родителя, на который накладываются условия проверки.
  • attributes — объект с парой ключ-значение для фильтрации по атрибутам.
  • selector — CSS-селектор для более точного определения элемента в дереве DOM.

Использование ancestry позволяет задавать контекст, при котором правило Axe будет срабатывать или игнорироваться. Это особенно важно для сложных интерфейсов с повторяющимися компонентами или динамическим контентом.

Примеры использования

  1. Игнорирование скрытых элементов

Если требуется исключить из проверки элементы внутри контейнеров с aria-hidden="true":

const config = {
  rules: {
    'color-contrast': {
      enabled: true,
      ancestry: [
        { attributes: { 'aria-hidden': 'true' } }
      ]
    }
  }
};

axe.run(document, config).then(results => {
  console.log(results.violations);
});

В этом примере правило color-contrast не будет применяться к элементам, находящимся внутри скрытых блоков.

  1. Уточнение родительского элемента по селектору
const config = {
  rules: {
    'label': {
      enabled: true,
      ancestry: [
        { selector: '.form-group' }
      ]
    }
  }
};

Правило label проверяет только элементы внутри блоков с классом .form-group, что исключает ложные срабатывания в других частях страницы.

  1. Комбинирование условий

Можно одновременно использовать element, attributes и selector для точного определения контекста:

ancestry: [
  {
    element: 'nav',
    attributes: { role: 'navigation' },
    selector: '#main-nav'
  }
]

Такое определение гарантирует, что правило будет проверять элементы только внутри основного навигационного меню, игнорируя второстепенные блоки.

Влияние на выполнение правил

Параметр ancestry изменяет дерево обхода DOM для конкретного правила:

  • Без ancestry проверяются все подходящие элементы на странице.
  • С ancestry проверка ограничивается элементами, которые находятся в указанном контексте предков.
  • Несовпадение условий в ancestry приводит к пропуску элемента при проверке правила.

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

Особенности и рекомендации

  • Порядок объектов в массиве ancestry важен: Axe проверяет соответствие условий последовательно.
  • Атрибуты в объекте должны полностью совпадать с атрибутами родителя; частичное совпадение не учитывается.
  • selector может использовать сложные CSS-селекторы, включая псевдоклассы и комбинированные селекторы, что повышает гибкость фильтрации.
  • Использование ancestry не влияет на глобальные настройки Axe и применяется только к конкретному правилу.

Практическая значимость

ancestry критичен при тестировании приложений с компонентной архитектурой, SPA или динамическими интерфейсами. Он позволяет:

  • Сузить область проверки для ускорения тестирования.
  • Исключить элементы, недоступные для пользователя.
  • Минимизировать ложные ошибки в сложных интерфейсах с повторяющимися блоками.

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

Оглавление