Типы checks: any, all, none

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

Для начала работы достаточно подключить библиотеку:

import axe from 'axe-core';

// или через CDN
// <script src="https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.7.0/axe.min.js"></script>

После подключения необходимо инициализировать сканирование:

axe.run(document, {
  // настройки конфигурации
}, (err, results) => {
  if (err) throw err;
  console.log(results.violations);
});

Ключевым элементом конфигурации являются checks — правила, по которым выполняется аудит доступности.

Типы checks в Axe-core

В Axe-core проверка доступности может быть выполнена с использованием трёх стратегий: any, all и none. Они определяют логику сопоставления элементов DOM с правилами.

any

Стратегия any означает, что элемент считается проблемным, если хотя бы одно условие из группы checks нарушено. Это наиболее мягкая проверка, которая выявляет потенциальные проблемы без строгого соответствия всем критериям.

Пример конфигурации:

axe.run(document, {
  rules: {
    'color-contrast': { enabled: true },
    'image-alt': { enabled: true }
  },
  checks: {
    type: 'any'
  }
}, (err, results) => {
  console.log(results.violations);
});

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

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

all

Стратегия all подразумевает, что элемент считается проблемным, только если все условия checks нарушены одновременно. Это строгая проверка, выявляющая элементы с комплексными проблемами доступности.

Пример использования:

axe.run(document, {
  rules: {
    'label': { enabled: true },
    'aria-required-children': { enabled: true }
  },
  checks: {
    type: 'all'
  }
}, (err, results) => {
  console.log(results.violations);
});

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

  • Позволяет выявить комплексные нарушения, когда один элемент нарушает несколько правил одновременно.
  • Менее чувствительна к единичным нарушениям, показывая только критические сочетания ошибок.
  • Используется для детального анализа и при подготовке к сертификации доступности.

none

Стратегия none полностью игнорирует выбранные checks для элементов или правил. Элемент никогда не будет считаться проблемным в рамках отключённых проверок. Это полезно, когда необходимо исключить специфические правила, которые не применимы к проекту.

Пример настройки:

axe.run(document, {
  rules: {
    'color-contrast': { enabled: true },
    'aria-hidden-focus': { enabled: true }
  },
  checks: {
    type: 'none'
  }
}, (err, results) => {
  console.log(results.violations);
});

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

  • Полностью исключает элемент из проверок по выбранным rules.
  • Удобно для временного игнорирования элементов, где соблюдение доступности невозможно или не требуется.
  • Может использоваться совместно с selectors для таргетирования конкретных частей DOM.

Комбинирование типов checks

Axe-core позволяет тонко настраивать аудит, комбинируя стратегии any, all и none с фильтрацией по CSS-селекторам или группам правил:

axe.run(document, {
  rules: {
    'color-contrast': { enabled: true },
    'image-alt': { enabled: true },
    'label': { enabled: true }
  },
  checks: [
    { type: 'any', selector: '.interactive' },
    { type: 'all', selector: '.form-control' },
    { type: 'none', selector: '.decorative' }
  ]
}, (err, results) => {
  console.log(results.violations);
});

Преимущества комбинированного подхода:

  • Позволяет использовать строгие проверки (all) для критических элементов, мягкие (any) для менее значимых, и исключать (none) декоративные компоненты.
  • Улучшает читаемость отчётов и уменьшает количество ложноположительных нарушений.
  • Обеспечивает гибкость и адаптацию под специфические требования проекта.

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

  • Для быстрого анализа интерфейса использовать any.
  • Для подготовки к аудиту доступности — all.
  • Для исключения декоративных или сторонних элементов — none.
  • Использовать комбинацию типов checks с селекторами, чтобы точечно проверять критичные элементы.
  • Логи violations хранить отдельно, чтобы отслеживать динамику исправлений.

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

Оглавление