Включение и отключение правил

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

Основы работы с правилами

Каждое правило в Axe-core описывает конкретный аспект доступности, например:

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

Правила идентифицируются уникальными именами (ruleId) и имеют несколько параметров настройки:

  • enabled — включение или отключение правила;
  • selector — CSS-селектор, к которому применяется правило;
  • options — дополнительные параметры проверки, специфичные для конкретного правила.

Пример базовой конфигурации:

const axeConfig = {
  rules: {
    'color-contrast': { enabled: true },
    'image-alt': { enabled: false }
  }
};

В данном примере проверка контраста цветов включена, а проверка наличия альтернативного текста у изображений отключена.

Включение и отключение правил программно

Axe-core позволяет управлять правилами динамически через объект конфигурации при запуске анализа страницы. Методы axe.run и axe.configure поддерживают указание правил:

import axe from 'axe-core';

// Настройка правил глобально
axe.configure({
  rules: [
    { id: 'image-alt', enabled: true },
    { id: 'label', enabled: false }
  ]
});

// Запуск анализа
axe.run(document.body).then(results => {
  console.log(results.violations);
});

Особенности:

  • Использование id вместо полного имени правила обеспечивает точное управление.
  • С помощью свойства enabled: false правило полностью исключается из проверки.
  • Возможна выборочная активация правил только для определённых элементов через параметр selector:
axe.configure({
  rules: [
    { id: 'color-contrast', selector: '.main-content', enabled: true }
  ]
});

Группировка и массовое отключение правил

Для крупных проектов часто требуется отключить сразу несколько правил. Axe-core поддерживает это через массив правил в конфигурации. Можно комбинировать включение и отключение:

axe.configure({
  rules: [
    { id: 'image-alt', enabled: false },
    { id: 'label', enabled: false },
    { id: 'color-contrast', enabled: true }
  ]
});

Также возможна настройка по категориям. Например, все правила, относящиеся к wcag2aa, можно включить или отключить одновременно. Для этого используется фильтрация по тегам правил:

axe.configure({
  rules: axe.getRules().filter(rule => rule.tags.includes('wcag2aa')).map(rule => ({
    id: rule.id,
    enabled: true
  }))
});

Локальное отключение правил в коде тестов

Иногда требуется временно отключить правило для конкретного теста или элемента. Для этого Axe-core предоставляет возможность указывать правила прямо в axe.run:

axe.run(document.body, {
  rules: {
    'color-contrast': { enabled: false },
    'image-alt': { enabled: true }
  }
}).then(results => {
  console.log(results.violations);
});

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

Важные нюансы

  • Порядок применения правил: сначала учитываются глобальные настройки через axe.configure, затем локальные в axe.run.
  • Совместимость правил: некоторые правила могут зависеть друг от друга, поэтому массовое отключение требует проверки влияния на результаты анализа.
  • Производительность: отключение неиспользуемых правил сокращает время сканирования, особенно на больших страницах.

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

  1. Отключать правила только при необходимости, чтобы не терять покрытие доступности.
  2. Использовать селекторы для ограничения области проверки.
  3. Регулярно обновлять конфигурацию при изменении структуры приложения и требований WCAG.

Эффективная настройка правил позволяет интегрировать Axe-core в CI/CD процессы, минимизировать ложные срабатывания и поддерживать высокий уровень доступности веб-приложений.

Оглавление