Дополнительные опции

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

Настройка правил и исключений

Axe-core использует набор правил, каждая из которых проверяет определённый аспект доступности. Правила можно настраивать следующим образом:

const axeOptions = {
  rules: {
    'color-contrast': { enabled: false },
    'image-alt': { enabled: true }
  }
};
  • enabled: false отключает правило, что полезно при тестировании страниц с уникальным дизайном.
  • enabled: true гарантирует, что правило будет обязательно проверено.

Можно также задавать параметры для конкретных правил, например, минимальное значение контраста для color-contrast:

rules: {
  'color-contrast': { minContrastRatio: 4.5 }
}

Контроль области анализа (context)

Опция context позволяет ограничить сканирование определённым селектором:

axe.run(document.querySelector('#main-content'), options)
  .then(results => console.log(results));
  • Полезно для тестирования отдельных компонентов страницы.
  • Можно передавать CSS-селекторы, DOM-элементы или массивы элементов.
  • Если context не указан, проверяется весь документ.

Управление тегами и категориями

Каждое правило Axe-core имеет теги, отражающие категорию проверки: wcag2a, wcag2aa, best-practice и т.д. Можно фильтровать правила по тегам:

const options = {
  runOnly: {
    type: 'tag',
    values: ['wcag2aa', 'best-practice']
  }
};
  • type: 'tag' — фильтрует по тегам.
  • values — массив тегов, которые будут проверены.
  • Альтернатива — фильтр по конкретным правилам с помощью type: 'rule' и values: ['rule-id'].

Настройка уровней серьёзности

Каждое нарушение имеет уровень серьёзности: minor, moderate, serious, critical. Можно выбрать, какие уровни включать в результаты:

const options = {
  resultTypes: ['violations', 'incomplete', 'passes']
};
  • violations — ошибки доступности.
  • incomplete — правила, которые не удалось полностью проверить.
  • passes — элементы, прошедшие проверку.

Фильтрация по уровням позволяет концентрироваться на критических проблемах.

Настройка фреймворков и интеграция с тестами

Axe-core поддерживает работу с различными средами: Node.js, Cypress, Jest, Playwright. Для интеграции с тестами можно использовать дополнительные опции:

const options = {
  reporter: 'v2',
  iframes: true,
  frameWaitTime: 1000
};
  • reporter — формат вывода результатов (JSON, HTML и др.).
  • iframes: true — проверка содержимого фреймов.
  • frameWaitTime — задержка перед сканированием iframe для загрузки контента.

Для Node.js можно передавать кастомный document из jsdom для серверной проверки.

Игнорирование элементов

Иногда необходимо исключить из проверки элементы, которые невозможно сделать доступными или которые не влияют на доступность критически. Для этого используется селектор exclude:

const options = {
  exclude: [['.ads-banner'], ['.tracking-pixel']]
};
  • Поддерживается массив массивов селекторов.
  • Исключенные элементы и их потомки не будут проверяться.

Можно комбинировать с context для проверки только нужных частей страницы.

Настройка локализации и сообщений

Axe-core позволяет изменять текст сообщений и язык через объект locale:

const options = {
  locale: {
    region: 'ru',
    messages: {
      'color-contrast': 'Контраст цвета слишком низкий'
    }
  }
};
  • region — язык и регион, например 'ru' или 'en-US'.
  • messages — переопределение текста сообщений для конкретных правил.

Это особенно полезно для интеграции с внутренними системами отчётности и UI на родном языке.

Использование кастомных правил

Помимо стандартного набора, Axe-core позволяет добавлять собственные правила:

axe.registerRule({
  id: 'custom-heading',
  selector: 'h1, h2, h3',
  any: ['aria-label'],
  enabled: true,
  metadata: {
    impact: 'moderate'
  },
  description: 'Проверяет наличие aria-label у заголовков'
});
  • id — уникальный идентификатор.
  • selector — CSS-селектор элементов для проверки.
  • any, all, none — условия проверки атрибутов.
  • metadata.impact — уровень серьёзности.
  • description — пояснение для отчёта.

Таймауты и асинхронная проверка

Для больших страниц или сложных SPA можно использовать таймаут:

const options = {
  timeout: 5000
};
  • Устанавливает максимальное время ожидания завершения проверки.
  • Полезно при работе с динамическим контентом или фреймворками типа React, Vue, Angular.

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

Axe-core корректно работает с элементами, которые создаются динамически. Опции runOnly и context позволяют фокусироваться на изменённых областях страницы, а параметр iframes гарантирует проверку вложенных фреймов. Для SPA рекомендуется вызывать axe.run после полной загрузки контента или при срабатывании события рендеринга компонента.

Настройка отчетности

Опции отчетности позволяют интегрировать результаты Axe-core с CI/CD и системами тестирования:

const options = {
  reporter: 'v2',
  resultTypes: ['violations', 'incomplete'],
  save: true,
  savePath: './axe-results.json'
};
  • reporter — формат отчёта (v1, v2, json, html).
  • save и savePath — сохраняют результаты на диск.
  • Позволяет автоматически анализировать результаты и генерировать отчёты для команды разработки.

Дополнительные опции Axe-core предоставляют гибкость при проверке доступности и позволяют адаптировать инструмент под уникальные требования проекта. Их грамотное использование повышает точность тестирования и сокращает количество ложных срабатываний.

Оглавление