Параметры node и options

Библиотека Axe-core предназначена для автоматизированной проверки доступности веб-приложений. Основные функции библиотеки позволяют настраивать область сканирования и параметры правил через объекты node и options. Понимание этих параметров критично для точной настройки тестов.

Параметр node

node — это DOM-элемент или коллекция элементов, на которых будет выполняться проверка. Он позволяет ограничить область анализа, что особенно полезно для больших страниц или динамических компонентов.

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

  • DOM-элемент (HTMLElement): проверка ограничивается одним элементом и всеми его потомками.
  • Массив DOM-элементов (HTMLElement[]): выполняется проверка на всех указанных элементах.
  • CSS-селектор (string): библиотека самостоятельно выбирает элементы на странице по переданному селектору.
import axe from 'axe-core';

// Проверка конкретного элемента
const button = document.querySelector('button.submit');
axe.run(button).then(results => console.log(results));

// Проверка всех элементов с классом
axe.run(document.querySelectorAll('.form-input')).then(results => console.log(results));

// Проверка через CSS-селектор
axe.run('.main-content').then(results => console.log(results));

Особенности использования

  • Если node не задан, проверка выполняется на всей странице (document).
  • Использование конкретного node снижает время выполнения теста и сокращает объем отчетов.
  • Можно комбинировать селекторы и DOM-элементы, формируя массив.

Параметр options

options — объект конфигурации, позволяющий гибко управлять правилами проверки, приоритетами, включением/отключением определённых правил и контекстом сканирования.

Структура объекта options

const options = {
  runOnly: {
    type: 'tag', // или 'rule'
    values: ['wcag2a', 'wcag2aa'] // или список конкретных правил
  },
  rules: {
    'color-contrast': { enabled: true },
    'image-alt': { enabled: false }
  },
  resultTypes: ['violations', 'incomplete', 'passes', 'inapplicable'],
  reporter: 'v2'
};
Ключевые поля

  1. runOnly Определяет, какие правила будут выполнены. Может быть объектом с type и values:

    • type: 'tag' — запускаются все правила с указанными тегами (например, wcag2a, wcag2aa, section508).
    • type: 'rule' — запускаются конкретные правила по их идентификаторам.

  2. rules Позволяет включать или отключать отдельные проверки.

    • enabled: true/false — активирует или деактивирует правило.
    • Можно задавать параметры правил для кастомной конфигурации (например, минимальный контраст текста).

  3. resultTypes Определяет, какие типы результатов будут возвращены:

    • violations — нарушения доступности.
    • incomplete — неполные результаты.
    • passes — успешные проверки.
    • inapplicable — неприменимые правила.

  4. reporter Формат отчета: строка 'v2', 'v3' или пользовательская функция для кастомного отчета.

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

import axe from 'axe-core';

const mainContent = document.querySelector('#main-content');

const options = {
  runOnly: {
    type: 'tag',
    values: ['wcag2aa']
  },
  rules: {
    'color-contrast': { enabled: true },
    'image-alt': { enabled: false }
  },
  resultTypes: ['violations', 'passes']
};

axe.run(mainContent, options).then(results => {
  console.log('Нарушения:', results.violations);
  console.log('Успешные проверки:', results.passes);
});

В этом примере:

  • Проверка выполняется только на элементе #main-content.
  • Активируются только правила, соответствующие тегу wcag2aa.
  • Правило image-alt отключено.
  • Результаты выводятся только для нарушений и успешных проверок.

Настройка для динамических и больших страниц

Для SPA или страниц с динамически подгружаемым контентом:

  • Перед вызовом axe.run() необходимо убедиться, что все элементы загружены в DOM.
  • Для периодических проверок можно использовать MutationObserver, чтобы отслеживать изменения в DOM и запускать axe.run() на новых элементах.
  • Использование параметра node позволяет ограничить область проверки только изменёнными компонентами, что экономит ресурсы.

Важные моменты

  • Ошибки в node (например, передан null) приведут к проверке всей страницы. Это иногда нежелательно на больших проектах.
  • Параметр options может использоваться совместно с кастомными правилами, подключаемыми через axe.configure().
  • Корректная настройка resultTypes позволяет фильтровать ненужные данные, облегчая анализ отчетов.

Понимание и правильное использование параметров node и options является ключевым для точного и эффективного анализа доступности с помощью Axe-core в JavaScript.

Оглавление