Селекторы CSS

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

Применение селекторов CSS в конфигурации Axe-core

В Axe-core селекторы CSS используются главным образом в конфигурационных объектах, таких как include и exclude. Эти свойства позволяют управлять областью анализа:

const axeConfig = {
  include: [['#main-content', '.interactive-widget']],
  exclude: [['.ads', '#tracking-pixels']]
};
  • include — массив селекторов CSS, определяющий элементы, которые будут включены в проверку. Если массив пустой, проверка охватывает весь DOM.
  • exclude — массив селекторов CSS, элементы которых будут исключены из анализа. Исключения применяются даже если элемент попадает под include.

Селекторы могут быть комбинированными, дочерними, атрибутными и использовать псевдоклассы, что обеспечивает гибкость фильтрации:

const config = {
  include: [['main article > section']],
  exclude: [['[aria-hidden="true"]', '.visually-hidden']]
};

Здесь проверка охватывает все <section> внутри <article> в <main>, но исключает скрытые элементы.

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

  1. Поддержка селекторов: Axe-core полностью поддерживает стандартные CSS3-селекторы, включая классы, идентификаторы, атрибутные селекторы, псевдоклассы вроде :first-child или :nth-of-type(n). Однако динамические псевдоклассы типа :hover или :active не учитываются, так как библиотека анализирует статическое состояние DOM.

  2. Сложные селекторы: При указании сложных селекторов, состоящих из нескольких уровней вложенности, Axe-core применяет их как фильтр элементов перед запуском правил проверки. Это позволяет оптимизировать производительность, исключая лишние узлы DOM из анализа.

  3. Влияние псевдоэлементов: Селекторы ::before и ::after не участвуют в анализе, так как Axe-core работает с реальным DOM, а не с визуальными псевдоэлементами.

Использование селекторов CSS в правилах Axe-core

Некоторые правила Axe-core позволяют указывать target непосредственно для конкретного теста. Например:

const ruleOverrides = {
  rules: {
    'color-contrast': {
      enabled: true,
      selector: '.highlight, .important-text'
    }
  }
};
  • Свойство selector фильтрует элементы только для этого правила.
  • Если элемент соответствует include и exclude, но не подходит под селектор конкретного правила, проверка по этому правилу не выполняется.

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

Динамическое построение селекторов

В реальных приложениях часто требуется формировать селекторы динамически на основе состояния страницы:

const interactiveSections = document.querySelectorAll('.interactive');
const targets = Array.from(interactiveSections).map(el => `#${el.id}`);

axe.run(document, { include: [targets] }).then(results => {
  console.log(results.violations);
});
  • Этот метод позволяет программно определять область проверки.
  • Можно автоматически исключать элементы без ID, скрытые блоки или сторонние виджеты, генерируя селекторы на лету.

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

  • Сужение области проверки: Для ускорения анализа следует указывать конкретные контейнеры (#main-content, .form-wrapper), избегая глобальных селекторов вроде body *.
  • Исключение повторяющихся элементов: Использование .ads, [aria-hidden="true"] помогает уменьшить количество ложных срабатываний.
  • Комбинирование селекторов: Разделение селекторов в массиве массивов ([['#header'], ['#footer']]) позволяет группировать элементы по логическим блокам.
  • Тестирование интерактивных компонентов: Селекторы .button, .dropdown, .modal позволяют целенаправленно проверять элементы, с которыми взаимодействует пользователь.

Селекторы CSS и производительность

Чем более точный и лаконичный селектор используется, тем быстрее Axe-core завершает анализ. Слишком общие селекторы, например div *, приводят к проверке тысяч узлов DOM, что замедляет тестирование. Оптимизация селекторов — ключевой фактор при интеграции Axe-core в CI/CD пайплайны.

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

const axeFullConfig = {
  include: [['#main-content', '.interactive-widget']],
  exclude: [['.ads', '[aria-hidden="true"]']],
  rules: {
    'color-contrast': { enabled: true, selector: '.text, .highlight' },
    'label': { enabled: true, selector: 'input, textarea, select' }
  }
};

axe.run(document, axeFullConfig).then(results => {
  results.violations.forEach(v => {
    console.log(`${v.id}: ${v.nodes.length} элементов`);
  });
});

Такой подход позволяет:

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

Селекторы CSS в Axe-core становятся инструментом стратегического контроля за качеством доступности, обеспечивая точность и производительность анализа.

Оглавление