Параметр selectors

selectors — один из ключевых параметров библиотеки Axe-core в JavaScript, отвечающий за точное определение элементов DOM, к которым будет применён анализ доступности. Этот параметр позволяет ограничить область проверки, исключить лишние узлы или сосредоточиться на конкретных частях страницы, что критично для оптимизации тестирования крупных интерфейсов.

Основные принципы работы

selectors представляет собой массив CSS-селекторов или строк, которые передаются в конфигурацию правил Axe-core. Каждый селектор указывает, какие элементы будут включены или исключены из анализа.

Пример базовой структуры:

const options = {
  runOnly: {
    type: 'tag',
    values: ['wcag2a', 'wcag2aa']
  },
  selectors: ['#main-content', '.interactive-section']
};
axe.run(document, options).then(results => {
  console.log(results.violations);
});

В этом примере анализ ограничен элементами с идентификатором main-content и классом interactive-section. Остальные узлы DOM игнорируются.

Включение и исключение элементов

selectors работает в паре с опциями include и exclude, позволяя создавать более точные фильтры:

const options = {
  include: ['#header', '.form-container'],
  exclude: ['.ads', '.promo-banner']
};

axe.run(document, options).then(results => {
  console.log(results.violations);
});
  • include — массив селекторов, указывающий, какие элементы обязательно проверять.
  • exclude — массив селекторов, которые игнорируются даже если они попадают под включение.

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

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

  1. Поддержка вложенных селекторов Можно использовать сложные CSS-селекторы, включая псевдоклассы, combinator’ы и атрибутные селекторы:

    const options = {
  include: ['#main-content .button', 'section[role="region"]']
};

    Это позволяет точно определять интерактивные элементы и семантические блоки страницы.

  2. Комбинация с правилами selectors может применяться не только глобально, но и на уровне конкретного правила:

    const options = {
  rules: {
    'color-contrast': {
      enabled: true,
      selectors: ['.high-contrast', '.important-text']
    }
  }
};

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

  3. Оптимизация производительности При работе с большими приложениями проверка всех элементов DOM может быть ресурсоёмкой. Ограничение селекторов снижает нагрузку и ускоряет получение результатов.

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

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

  • Всегда использовать selectors для больших SPA (Single Page Applications), чтобы исключить скрытые элементы или временные модальные окна.
  • Комбинировать include и exclude, чтобы гарантировать, что анализ охватывает только релевантные области.
  • Проверять корректность CSS-селекторов перед запуском теста, чтобы избежать исключений при выполнении axe.run().
  • Для компонентов с повторяющейся структурой удобно применять селекторы по атрибутам (data-*), чтобы анализ оставался стабильным при изменении классов.

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

selectors тесно связаны с параметрами runOnly, rules и frameWaitTime:

  • runOnly задаёт фильтр по типам правил или тегам WCAG, а selectors ограничивает область их применения.
  • rules позволяет включать или отключать отдельные проверки, при этом selectors указывает элементы, к которым они применяются.
  • frameWaitTime важен при проверке контента в iframe: selectors может указывать только на узлы внутри конкретного iframe, если frameWaitTime настроен корректно.

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

const options = {
  runOnly: {
    type: 'tag',
    values: ['wcag2a', 'wcag2aa']
  },
  include: ['#app', '.modal-content'],
  exclude: ['.ads', '.tooltip'],
  rules: {
    'image-alt': { enabled: true, selectors: ['img', 'picture img'] },
    'color-contrast': { enabled: true }
  }
};

axe.run(document, options).then(results => {
  results.violations.forEach(v => {
    console.log(v.id, v.nodes.map(n => n.target));
  });
});

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

  • Анализ выполняется только для тегов WCAG 2.0 уровня A и AA.
  • Проверяются только блоки #app и .modal-content.
  • Игнорируются рекламные баннеры и подсказки.
  • Для правила image-alt проверка ограничена конкретными тегами <img>.

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

Оглавление