Контекст выполнения проверок

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

Основы контекста

Контекст в Axe-core задается объектом с конкретными свойствами:

const context = {
  include: [['#main-content']], // CSS-селектор для включения в проверку
  exclude: [['.skip-accessibility']] // CSS-селектор для исключения из проверки
};

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

  • include — массив селекторов, указывающий, какие элементы следует анализировать. Если массив пуст, анализируются все элементы документа.
  • exclude — массив селекторов, указывающий, какие элементы следует исключить из анализа. Исключения имеют приоритет над включением.
  • Контекст можно задавать как при вызове функции axe.run, так и через глобальную конфигурацию.

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

axe.run(context).then(results => {
  console.log(results.violations);
});

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

Контекст в браузере

В браузере контекст работы определяется DOM-элементами или селекторами. Можно передавать:

  1. Элемент DOM — проверка будет выполняться только внутри него:
const mainContent = document.getElementById('main-content');
axe.run(mainContent).then(results => console.log(results));
  1. CSS-селектор — удобно при динамически формируемых страницах:
axe.run({ include: [['.article-section']] }).then(results => console.log(results));
  1. Множественные области — включение нескольких элементов через массив:
axe.run({ include: [['#header'], ['#footer']] }).then(results => console.log(results));

Важно: исключения (exclude) работают по приоритету, блокируя любые элементы, совпадающие с селекторами, даже если они попадают под include.

Контекст в Node.js

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

const { JSDOM } = require('jsdom');
const axe = require('axe-core');

const dom = new JSDOM(`<body><div id="app"></div></body>`);
const document = dom.window.document;

const context = { include: [['#app']] };

axe.run(document, context).then(results => console.log(results.violations));

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

  • Необходимо передавать объект document, полученный из jsdom.
  • Контекст работает одинаково, как в браузере, обеспечивая единообразие проверок.

Взаимодействие контекста с правилами

Каждое правило Axe-core имеет условие применения (selector) и уровень воздействия (impact). Контекст ограничивает область применения правил, но не влияет на их внутренние условия.

Пример:

axe.run({
  include: [['#form']],
  exclude: [['.hidden']]
});
  • Проверки для всех правил будут выполняться только в пределах #form.
  • Элементы с классом .hidden не будут анализироваться, даже если они находятся внутри #form.

Динамическая настройка контекста

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

function checkComponent(id) {
  return axe.run({ include: [[`#${id}`]] });
}

checkComponent('login-form').then(results => console.log(results.violations));
checkComponent('signup-form').then(results => console.log(results.violations));

Таким образом, одна и та же конфигурация правил может применяться к разным областям страницы без изменения глобальной настройки.

Влияние контекста на производительность

Ограничение области проверки до нужных элементов значительно снижает нагрузку:

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

Советы по построению контекста

  • Использовать include для выделения ключевых областей интерфейса.
  • Минимизировать использование глобального анализа, если проект большой.
  • Комбинировать include и exclude для точного контроля.
  • Применять селекторы по идентификаторам (#id) для стабильности или по классам (.class) для повторного использования.

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

Оглавление