Профили проверок

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

Концепция профилей

Профиль проверки — это набор правил и конфигураций, определяющих поведение сканера. Каждый профиль содержит:

  • Набор правил (rules) — конкретные проверки доступности, которые будут выполнены. Например, проверка наличия альтернативного текста для изображений, корректного использования заголовков, контрастности текста.
  • Уровень серьезности (impact) — фильтрация по критичности нарушений: minor, moderate, serious, critical.
  • Контекст применения (tags) — логическая классификация правил для более тонкого контроля: wcag2a, wcag2aa, experimental, best-practice.

Использование профилей позволяет запускать только нужные проверки и исключать из анализа правила, которые не релевантны текущему проекту.

Создание кастомного профиля

Для создания собственного профиля используется объект конфигурации axe.configure(). Пример структуры:

const customProfile = {
  rules: [
    {
      id: 'image-alt',
      enabled: true
    },
    {
      id: 'color-contrast',
      enabled: false
    }
  ],
  checks: [],
  reporter: 'v2'
};

axe.configure(customProfile);

В этом примере правило image-alt активно, а color-contrast отключено. Это позволяет адаптировать проверку под особенности интерфейса.

Встроенные профили

Axe-core предоставляет несколько предустановленных профилей:

  • wcag2a — базовый уровень соответствия стандарту WCAG 2.0 A. Включает минимальный набор обязательных проверок.
  • wcag2aa — расширенный набор проверок для уровня AA. Проверяет контраст, семантику элементов, правильное использование ARIA.
  • best-practice — набор рекомендаций, ориентированных на удобство пользователей, не всегда обязательных по WCAG.
  • experimental — тестовые или новые проверки, которые могут быть нестабильными.

Применение встроенного профиля осуществляется с помощью ключевого слова axe.run({ runOnly: { type: 'tag', values: ['wcag2aa'] } }).

Фильтрация правил по тегам

Каждое правило имеет набор тегов, например ['wcag2aa', 'cat.text-alternatives']. Это позволяет создавать динамические профили на основе тегов, а не конкретных идентификаторов правил. Пример:

const options = {
  runOnly: {
    type: 'tag',
    values: ['wcag2aa', 'best-practice']
  }
};

axe.run(document, options).then(results => {
  console.log(results.violations);
});

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

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

Для крупных проектов часто важно фокусироваться на критичных нарушениях. В Axe-core можно фильтровать результаты по impact:

const options = {
  runOnly: { type: 'tag', values: ['wcag2aa'] },
  resultTypes: ['violations']
};

axe.run(document, options).then(results => {
  const criticalIssues = results.violations.filter(v => v.impact === 'critical');
  console.log(criticalIssues);
});

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

Применение кастомных проверок

Профили можно расширять собственными проверками. Кастомное правило регистрируется через axe.registerRule():

axe.registerRule({
  id: 'custom-heading',
  selector: 'h1,h2,h3',
  enabled: true,
  any: [],
  all: [
    {
      id: 'heading-text-not-empty',
      evaluate: (node) => node.textContent.trim().length > 0
    }
  ],
  tags: ['custom', 'best-practice']
});

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

Применение в автоматизированных тестах

Профили проверок интегрируются с фреймворками тестирования, такими как Jest, Mocha, Cypress. Пример использования с Cypress:

cy.injectAxe();
cy.configureAxe({
  rules: [
    { id: 'color-contrast', enabled: true },
    { id: 'image-alt', enabled: true }
  ]
});
cy.checkA11y(null, { includedImpacts: ['critical', 'serious'] });

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

Управление несколькими профилями

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

  • Базовый профиль — проверки для всех страниц.
  • Интерактивные компоненты — дополнительные проверки ARIA и фокусировки.
  • Мобильные версии — проверка контрастности и размеров элементов.

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

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

Оглавление