Метод axe.getRules

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

Основной синтаксис

const rules = axe.getRules([options]);

Параметры:

  • options — необязательный объект конфигурации, позволяющий фильтровать правила по определённым критериям.

Метод возвращает массив объектов, каждый из которых описывает отдельное правило. Структура объекта правила включает следующие ключевые поля:

  • id — уникальный идентификатор правила, используемый при его включении или исключении из анализа.
  • description — текстовое описание правила.
  • help — краткая подсказка о том, как исправить нарушения, обнаруженные этим правилом.
  • helpUrl — ссылка на официальную документацию правила на сайте Axe-core.
  • tags — массив категорий и тегов правила, например, wcag2a, wcag2aa, best-practice.
  • enabled — логическое значение, показывающее, активно ли правило в текущей конфигурации.
  • selector — CSS-селектор, к которому применимо правило.
  • any, all, none — объекты, описывающие условия срабатывания правила на элементе.

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

Получение всех правил без фильтрации:

const allRules = axe.getRules();
console.log(allRules);

Вывод содержит полный список правил Axe-core, включая стандартные правила для WCAG и дополнительные проверки лучших практик. Каждое правило можно подробно изучить через поля description и helpUrl.

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

const wcagAA = axe.getRules({ tags: ['wcag2aa'] });
console.log(wcagAA);

Использование параметра tags позволяет выбрать только те правила, которые соответствуют определённым стандартам доступности, например, WCAG 2.1 AA.

Проверка состояния правил:

const rules = axe.getRules();
const disabledRules = rules.filter(rule => !rule.enabled);
console.log(disabledRules);

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

Настройка правил через getRules

Метод axe.getRules тесно связан с возможностью настройки библиотеки:

  • Включение или отключение правил: Сначала получаем список правил, затем изменяем поле enabled для нужного правила и повторно применяем конфигурацию:
const rules = axe.getRules();
rules.forEach(rule => {
  if (rule.id === 'color-contrast') {
    rule.enabled = false;
  }
});
  • Использование селекторов и условий: Объекты any, all, none позволяют определить более сложные условия для срабатывания правила на странице.
rules.find(r => r.id === 'label').any = ['[for]', '[aria-label]'];

Это полезно при кастомизации проверки под специфическую структуру приложения.

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

Метод axe.getRules активно используется совместно с популярными тестовыми фреймворками, такими как Jest, Mocha или Cypress, для динамической конфигурации правил перед выполнением тестов:

import axe from 'axe-core';

beforeAll(() => {
  const rules = axe.getRules({ tags: ['wcag2a'] });
  rules.forEach(rule => {
    if (rule.id === 'color-contrast') rule.enabled = true;
  });
});

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

Особенности и рекомендации

  1. Динамическое управление правилами — getRules позволяет не только получать статический список, но и изменять активность правил во время выполнения тестов.
  2. Совместимость с версиями Axe-core — метод поддерживается всеми современными версиями библиотеки, но структура некоторых полей может меняться. Рекомендуется проверять документацию при обновлении.
  3. Оптимизация тестов — выбор правил через tags уменьшает время выполнения анализа, исключая неактуальные проверки.
  4. Отслеживание изменений конфигурации — полезно для аудита доступности, когда требуется проверить, какие правила были включены или отключены на разных этапах разработки.

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

Оглавление