Параметр rules

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

Структура параметра rules

Параметр rules представляет собой объект, где ключами являются имена правил, а значениями — настройки каждого правила. Общая структура выглядит следующим образом:

const options = {
  rules: {
    "rule-id": {
      enabled: true,
      someOption: "value"
    },
    "another-rule": {
      enabled: false
    }
  }
};
  • enabled – логическое значение, указывающее, включено ли правило в анализ.
  • Дополнительные свойства зависят от конкретного правила и позволяют тонко настроить его поведение (например, задавать пороги, исключения, фильтры).

Управление включением и отключением правил

Управление правилами через rules позволяет:

  1. Отключить правило полностью Если определённое правило не подходит для проекта или вызывает ложные срабатывания, его можно отключить:

    rules: {
  "color-contrast": { enabled: false }
}

    В этом примере проверка контраста текста с фоном будет пропущена.

  2. Включить правило при его отключении по умолчанию Некоторые правила Axe-core по умолчанию могут быть отключены, их можно активировать:

    rules: {
  "frame-title": { enabled: true }
}

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

Многие правила Axe-core имеют дополнительные настройки. Пример настройки правила проверки альтернативного текста для изображений:

rules: {
  "image-alt": {
    enabled: true,
    checkDecorative: false
  }
}
  • checkDecorative – указывает, проверять ли декоративные изображения, не влияющие на доступность.

Другой пример — ограничение проверки контраста текста только для определённых элементов:

rules: {
  "color-contrast": {
    enabled: true,
    include: ["h1", ".important-text"],
    exclude: ["footer"]
  }
}
  • include – массив CSS-селекторов для проверки.
  • exclude – массив селекторов, которые будут исключены из проверки.

Приоритет правил и взаимодействие

Параметр rules обрабатывается на уровне конфигурации при вызове методов axe.run(). Приоритеты следующие:

  1. Настройки конкретного правила в объекте rules перекрывают глобальные настройки Axe-core.
  2. Если правило не указано в rules, применяется конфигурация по умолчанию.
  3. Совмещение rules с другими параметрами (runOnly, exclude) позволяет создавать избирательные и гибкие проверки доступности.

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

const options = {
  runOnly: {
    type: "tag",
    values: ["wcag2aa"]
  },
  rules: {
    "color-contrast": { enabled: true },
    "image-alt": { enabled: true, checkDecorative: false },
    "label": { enabled: false }
  }
};

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

В этом примере проверяются только правила, соответствующие стандарту WCAG 2.0 AA, при этом проверка лейблов отключена, контраст включён, а для изображений декоративные элементы игнорируются.

Динамическое изменение правил

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

const baseOptions = { rules: { "color-contrast": { enabled: true } } };

// Отключение контраста для одной страницы
const pageOptions = {
  ...baseOptions,
  rules: {
    ...baseOptions.rules,
    "color-contrast": { enabled: false }
  }
};

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

Список доступных правил

Каждое правило в Axe-core имеет уникальный идентификатор. Среди часто используемых:

  • color-contrast — проверка контраста текста и фона
  • image-alt — проверка альтернативного текста изображений
  • label — проверка корректности элементов формы
  • frame-title — проверка наличия заголовка для фреймов
  • html-has-lang — проверка наличия атрибута lang на <html>

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

Практические советы по использованию

  • Отключение правил стоит использовать только для исключительных случаев, чтобы не снижать качество аудита доступности.
  • Настройка параметров внутри rules позволяет адаптировать анализ под уникальные элементы интерфейса.
  • Комбинирование с runOnly и exclude обеспечивает максимальную гибкость, минимизируя лишние проверки и ускоряя процесс анализа.

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

Оглавление