Параметры context

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

Основное назначение context

Параметр context позволяет ограничивать область сканирования до конкретного элемента DOM или группы элементов. Без явного указания context проверка выполняется на всём документе (document.body). Использование context повышает производительность сканирования и позволяет сфокусироваться на важных участках интерфейса.

Типы значений context

  1. CSS-селектор Передача строки с CSS-селектором (string) позволяет сканировать все элементы, подходящие под данный селектор.

    axe.run('.main-content', (err, results) => {
    if (err) throw err;
    console.log(results.violations);
});

    В этом примере анализ ограничен блоком с классом main-content.

  2. DOM-элемент Вместо селектора можно передать объект DOM, например document.getElementById() или document.querySelector().

    const element = document.getElementById('form-section');
axe.run(element).then(results => {
    console.log(results.violations);
});

    Использование элемента напрямую исключает неоднозначность селекторов и повышает точность.

  3. Массив элементов Можно передавать массив элементов, чтобы проверить несколько областей одновременно.

    const elements = document.querySelectorAll('.interactive');
axe.run(elements).then(results => {
    console.log(results.violations);
});

    Такой подход удобен для тестирования повторяющихся компонентов интерфейса, например карточек или кнопок.

Влияние context на результаты

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

Взаимодействие с другими параметрами

context тесно связан с другими опциями метода axe.run:

  • include и exclude Дополнительно можно уточнить, какие элементы включать или исключать из анализа внутри выбранного контекста.

    axe.run(document.body, {
    include: [['#main-content']],
    exclude: [['.ads-banner']]
}).then(results => console.log(results.violations));

    Здесь сканируются элементы внутри #main-content, но блок .ads-banner игнорируется.

  • rules Контекст не влияет на применяемые правила, однако в сочетании с включением/исключением правил можно гибко управлять глубиной проверки.

  • Асинхронная обработка context поддерживается в промисах и коллбэках, что позволяет интегрировать Axe-core в автоматические тесты с async/await:

    const context = document.querySelector('#dashboard');
const results = await axe.run(context);
console.log(results.violations);

Практические рекомендации

  • Фокус на динамических компонентах: при тестировании отдельных виджетов, модальных окон или форм всегда лучше ограничивать context.
  • Масштабные страницы: при больших SPA страницах проверка всего document.body может быть медленной; использование context ускоряет процесс.
  • Комбинация с exclude: исключение рекламных блоков, баннеров или сторонних виджетов уменьшает количество ложных срабатываний.
  • Тестирование повторяющихся компонентов: массив элементов (NodeList или массив DOM-элементов) позволяет одновременно проверять все экземпляры компонента.

Примеры комбинаций

// Проверка формы с исключением скрытых полей
const form = document.querySelector('#signup-form');
axe.run(form, {
    exclude: [['input[type="hidden"]']]
}).then(results => console.log(results.violations));

// Проверка нескольких секций страницы
const sections = document.querySelectorAll('.section');
axe.run(sections).then(results => console.log(results.violations));

Параметр context является центральным инструментом управления областью сканирования, позволяя гибко и точно настраивать проверку доступности на страницах любого размера. Его использование оптимизирует производительность и повышает релевантность результатов анализа.

Оглавление