Ограничение области проверки

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

Использование параметра context

Метод axe.run() принимает в качестве первого аргумента параметр context, который определяет, какие элементы будут проверяться:

const axe = require('axe-core');

axe.run(document.querySelector('#main-content'))
  .then(results => console.log(results.violations));

Ключевые моменты:

  • CSS-селектор: можно передавать строку с селектором ('#main-content', '.article'), чтобы проверить только определённый участок страницы.
  • DOM-элемент: передача элемента напрямую (document.querySelector(...)) позволяет точнее контролировать область проверки.
  • Массив элементов: поддерживается проверка сразу нескольких элементов.

Ограничение по правилам

Для более тонкой настройки можно использовать параметр runOnly, который позволяет запускать определённые правила или категории правил:

axe.run(document, {
  runOnly: {
    type: 'tag',
    values: ['wcag2a', 'wcag2aa']
  }
}).then(results => console.log(results.violations));

Особенности:

  • type: 'rule' – запуск конкретных правил по их идентификаторам.
  • type: 'tag' – запуск правил по тегам WCAG, Best Practices или ARIA.
  • Можно комбинировать с context для проверки только части страницы по выбранным критериям.

Фильтрация элементов с exclude

Для исключения определённых элементов из проверки используется параметр exclude. Это особенно полезно для областей с динамическим контентом или сторонними виджетами:

axe.run(document, {
  exclude: [['.ads', '#newsletter-popup']]
});

Примечания:

  • exclude принимает массив массивов селекторов; каждый вложенный массив определяет отдельную группу исключений.
  • Исключение работает независимо от context, элементы из exclude будут полностью игнорироваться.

Ограничение глубины проверки

Иногда необходимо ограничить уровень вложенности элементов для проверки. Axe-core предоставляет опцию includedImpacts и elementRef, но более гибкое ограничение достигается через селекторы CSS с псевдоклассами и комбинацию context и exclude:

axe.run(document.querySelector('#main-content > .section'))
  .then(results => console.log(results.violations));
  • Селектор > ограничивает проверку только прямыми потомками.
  • Комбинирование с .section:not(.hidden) позволяет игнорировать скрытые элементы.

Оптимизация производительности

Ограничение области проверки значительно ускоряет выполнение axe.run(), особенно на страницах с большим DOM:

  • Проверка только видимых и активных элементов снижает количество ложных нарушений.
  • Исключение сторонних виджетов (iframe, рекламные блоки) минимизирует шум в результатах.
  • Разделение тестов на логические блоки страницы позволяет параллельно проверять разные части DOM.

Примеры сложной конфигурации

axe.run(document, {
  runOnly: { type: 'tag', values: ['wcag2aa'] },
  context: '#main-content',
  exclude: [['.ads', '#popup']],
  reporter: 'v2'
}).then(results => {
  results.violations.forEach(v => {
    console.log(`${v.id} — ${v.description}`);
  });
});
  • reporter: 'v2' задаёт формат вывода.
  • Совмещает все механизмы ограничения: выбор правил, область проверки и исключения.
  • Позволяет получать точные и релевантные результаты без лишнего анализа.

Особенности работы с iframe

Axe-core автоматически проверяет содержимое iframe, но иногда требуется ограничение:

const iframe = document.querySelector('#embedded-frame');
axe.run(iframe.contentDocument.body)
  .then(results => console.log(results.violations));
  • Проверка внутри iframe требует передачи body документа.
  • Можно комбинировать с context и exclude внутри документа iframe.

Вывод

Правильное ограничение области проверки в Axe-core обеспечивает:

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

Эти механизмы формируют основу для точного и эффективного тестирования доступности в JavaScript-проектах.

Оглавление