Выборочный запуск правил

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

Основы конфигурации правил

Каждое правило в Axe-core имеет уникальный идентификатор (rule ID), который используется для его включения или отключения. Управление правилами осуществляется через объект конфигурации:

const axeConfig = {
  rules: {
    'color-contrast': { enabled: true },
    'label': { enabled: false },
    'image-alt': { enabled: true }
  }
};

В этом примере:

  • color-contrast и image-alt активны, поэтому будут проверяться.
  • label отключено, и ошибки, связанные с этим правилом, игнорируются.

Ключевое преимущество такого подхода — возможность исключить правила, которые не релевантны конкретной странице или компоненту, сокращая время тестирования и уменьшая шум в отчетах.

Запуск проверок на конкретных элементах

Кроме глобального включения/отключения правил, Axe-core позволяет ограничивать область проверки конкретными DOM-элементами. Это особенно полезно при тестировании сложных SPA или компонентов, где полный анализ всей страницы может быть избыточным.

Пример:

import axe from 'axe-core';

const targetNode = document.querySelector('#form-section');

axe.run(targetNode, axeConfig, (err, results) => {
  if (err) throw err;
  console.log(results.violations);
});
  • targetNode — корневой элемент, на котором будет произведена проверка.
  • Конфигурация axeConfig применяется только к выбранной области.

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

Включение и отключение правил динамически

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

function getAxeConfig(isMobile) {
  return {
    rules: {
      'color-contrast': { enabled: true },
      'landmark-one-main': { enabled: !isMobile },
      'image-alt': { enabled: true }
    }
  };
}

const config = getAxeConfig(window.innerWidth < 768);

axe.run(document, config, (err, results) => {
  console.log(results.violations);
});
  • landmark-one-main отключается на мобильных устройствах.
  • Остальные правила остаются активными.

Использование тегов для выборочной проверки

Каждое правило Axe-core может быть помечено тегами, что позволяет включать или отключать группы правил одновременно. Например, теги wcag2a, wcag2aa, best-practice группируют правила по стандартам доступности.

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

axe.run(document, axeConfigByTag, (err, results) => {
  console.log(results.violations);
});
  • Проверяются только правила, соответствующие тегам wcag2aa и best-practice.
  • Позволяет фокусироваться на нужных стандартах и игнорировать менее критичные проверки.

Альтернатива — runOnly.type = 'rule' с указанием конкретных ID правил, что обеспечивает максимально точечный контроль.

Применение в тестах

Выборочный запуск правил широко используется в юнит- и интеграционных тестах, когда нужно проверять доступность отдельных компонентов без анализа всей страницы. Пример с Jest:

import axe from 'axe-core';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

test('Проверка доступности компонента', async () => {
  const { container } = render(<MyComponent />);
  const results = await axe.run(container, {
    rules: { 'image-alt': { enabled: true } }
  });
  expect(results.violations.length).toBe(0);
});
  • Проверяется только image-alt.
  • Исключаются все остальные правила, что ускоряет тестирование и снижает количество ложных срабатываний.

Советы по выборочной проверке

  1. Определять критические правила: включать только те, которые действительно важны для проекта.
  2. Использовать теги: для быстрой группировки правил по стандартам доступности.
  3. Фокусироваться на элементах: проверять конкретные компоненты или секции вместо всей страницы.
  4. Динамическая конфигурация: менять набор правил в зависимости от устройства, состояния интерфейса или типа страницы.

Выборочный запуск правил в Axe-core — это инструмент, который обеспечивает гибкость, ускорение тестирования и уменьшение шума в отчетах, делая процесс проверки доступности более точным и управляемым.

Оглавление