Настройка отдельных правил

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

Подключение и базовая конфигурация

Для начала необходимо установить и подключить Axe-core в проект на Jav * aScript:

import axe from 'axe-core';

axe.run(document, {
  runOnly: {
    type: 'tag',
    values: ['wcag2a', 'wcag2aa']
  }
}).then(results => {
  console.log(results.violations);
});

В этом примере используется фильтрация по тегам WCAG, но конфигурация может быть значительно тоньше — через отдельные правила.

Включение и отключение отдельных правил

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

axe.run(document, {
  rules: {
    'color-contrast': { enabled: true },
    'duplicate-id': { enabled: false }
  }
}).then(results => {
  console.log(results.violations);
});
  • enabled: true — включение проверки правила.
  • enabled: false — отключение правила для исключения из анализа.

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

Настройка параметров правил

Некоторые правила поддерживают дополнительные параметры, которые позволяют уточнить их работу. Например, правило color-contrast можно настроить с порогом контраста:

axe.run(document, {
  rules: {
    'color-contrast': {
      enabled: true,
      options: { level: 'AAA', noScroll: true }
    }
  }
});

Параметры зависят от конкретного правила и могут включать:

  • level — минимальный уровень контраста (AA или AAA).
  • include / exclude — селекторы, на которые правило распространяется или не распространяется.
  • impact — фильтрация по уровню влияния проблемы (critical, serious, moderate, minor).

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

Добавление собственных правил

Axe-core поддерживает создание кастомных правил, что расширяет возможности библиотеки для нестандартных компонентов:

axe.configure({
  rules: [
    {
      id: 'custom-button-name',
      selector: 'button',
      enabled: true,
      any: [{
        id: 'has-name',
        evaluate: node => node.textContent.trim().length > 0,
      }],
      metadata: {
        description: 'Проверка наличия текста у кнопок',
        impact: 'critical'
      }
    }
  ]
});

Элементы кастомного правила:

  • id — уникальный идентификатор.
  • selector — CSS-селектор элементов для проверки.
  • enabled — состояние правила.
  • any / all / none — логические блоки условий для проверки.
  • metadata — описание, уровень влияния, ссылки на стандарты.

Кастомные правила интегрируются с существующими и отображаются в отчетах нарушений так же, как встроенные.

Использование тегов для выборочной проверки

Каждое правило Axe-core имеет набор тегов, которые позволяют запускать выборочные проверки:

axe.run(document, {
  runOnly: {
    type: 'tag',
    values: ['wcag2a', 'wcag2aa', 'best-practice']
  }
});
  • wcag2a / wcag2aa — проверки соответствия стандартам WCAG.
  • best-practice — рекомендации по улучшению UX и доступности.
  • Теги можно комбинировать с индивидуальными правилами для максимально точного анализа.

Динамическая модификация правил

Правила можно изменять на лету через API, что удобно для тестирования:

const currentConfig = axe.getRules();
currentConfig['image-alt'].enabled = false;

axe.configure({ rules: currentConfig });

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

Логирование и фильтрация результатов по правилам

Результаты анализа содержат подробную информацию по каждому нарушению, включая ID правила, селектор элемента и уровень влияния:

axe.run(document).then(results => {
  const criticalViolations = results.violations.filter(v => v.impact === 'critical');
  criticalViolations.forEach(v => {
    console.log(`Правило: ${v.id}, Элемент: ${v.nodes.map(n => n.target).join(', ')}`);
  });
});

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

Итоговые рекомендации по настройке

  • Использовать включение/отключение правил для исключения ложных срабатываний.
  • Настраивать параметры правил для соответствия внутренним стандартам проекта.
  • Применять теги и уровни влияния для фильтрации проверок.
  • Создавать кастомные правила, чтобы расширять возможности библиотеки под уникальные компоненты.
  • Встроенная динамическая конфигурация позволяет адаптировать проверки под разные страницы и состояния приложения.

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

Оглавление