Работа с тегами правил

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

Структура правила и теги

Каждое правило в Axe-core описывается объектом с набором свойств, среди которых особое значение имеет поле tags. Это массив строк, определяющий категории, к которым относится правило. Примеры тегов:

  • wcag2a, wcag2aa, wcag21aa — соответствие стандартам WCAG разных уровней.
  • best-practice — рекомендации по улучшению качества и удобства использования.
  • experimental — экспериментальные правила, не всегда стабильные.
  • cat.color, cat.keyboard, cat.text — тематические категории: цвета, клавиатурная навигация, текстовая семантика.

Использование тегов позволяет избирательно применять или игнорировать определённые правила в процессе сканирования.

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

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

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

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

В данном примере будут проверены только правила, имеющие теги wcag2aa или best-practice. Это позволяет ускорить проверку и сосредоточиться на конкретных аспектах доступности.

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

Помимо выборочного запуска, можно исключать правила с определёнными тегами. Для этого используется rules с параметром enabled: false в сочетании с функцией фильтрации по тегам:

const rulesToDisable = {};
axe.getRules().forEach(rule => {
  if (rule.tags.includes('experimental')) {
    rulesToDisable[rule.id] = { enabled: false };
  }
});

const config = { rules: rulesToDisable };

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

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

Создание пользовательских правил с тегами

В Axe-core возможно добавление собственных правил. Теги играют здесь важную роль, так как позволяют интегрировать новые проверки в существующую систему фильтрации:

axe.configure({
  rules: [
    {
      id: 'custom-alt-check',
      selector: 'img',
      tags: ['wcag2a', 'custom'],
      any: [{
        id: 'alt-attribute',
        evaluate: (node) => node.hasAttribute('alt') && node.getAttribute('alt').trim() !== ''
      }],
      enabled: true
    }
  ]
});

В данном примере создаётся правило, проверяющее наличие атрибута alt у изображений. Теги wcag2a и custom позволяют использовать его вместе с другими проверками WCAG и выделять среди собственных правил.

Рекомендации по работе с тегами

  1. Группировка по стандартам: Для проектов с требованиями WCAG важно использовать теги уровня соответствия (wcag2a, wcag2aa и т.д.), чтобы фильтровать проверки в зависимости от целей.
  2. Разделение по категориям: Тематические теги (cat.color, cat.keyboard) позволяют быстро выявлять проблемы конкретного типа.
  3. Использование пользовательских тегов: При добавлении собственных правил рекомендуется применять уникальные теги, чтобы не пересекаться с встроенными и поддерживать гибкую фильтрацию.
  4. Фильтрация в CI/CD: Теги позволяют запускать разные наборы проверок на разных этапах разработки, например, быстрые проверки только для best-practice на ранних стадиях, а полное сканирование по WCAG на этапе релиза.

Практический пример комплексной конфигурации

const config = {
  runOnly: {
    type: 'tag',
    values: ['wcag2aa', 'cat.keyboard', 'custom']
  },
  rules: {
    'color-contrast': { enabled: true },
    'experimental-rule': { enabled: false }
  }
};

axe.run(document, config).then(results => {
  results.violations.forEach(v => {
    console.log(`${v.id} — ${v.help}`);
  });
});

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

Закрепление знаний

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

Оглавление