Глобальная конфигурация

Для начала необходимо установить библиотеку axe-core. В среде Node.js это делается через npm:

npm install axe-core

В браузере можно подключить библиотеку через CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.9.6/axe.min.js"></script>

После подключения доступна глобальная переменная axe, через которую осуществляется взаимодействие с API библиотеки.

Основные функции глобальной конфигурации

Глобальная конфигурация axe-core управляет поведением всех проверок доступности на странице. Она задаётся методом axe.configure().

axe.configure({
    branding: {
        application: "MyApp",
        icon: false
    },
    rules: [
        { id: 'color-contrast', enabled: true },
        { id: 'image-alt', enabled: false }
    ],
    checks: [],
    reporter: 'v2'
});

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

  • branding — задаёт название приложения и отображение логотипа Axe в отчётах.
  • rules — список правил, которые можно включать или отключать глобально. Каждое правило имеет уникальный идентификатор id.
  • checks — дополнительная настройка отдельных проверок, используется редко, например для кастомных проверок элементов.
  • reporter — формат вывода отчёта ('v1', 'v2'), влияет на структуру JSON-результата.

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

Правила в axe-core можно настраивать глобально, отключать или изменять их приоритет.

axe.configure({
    rules: [
        { id: 'color-contrast', enabled: true, selector: 'body *' },
        { id: 'label', enabled: false }
    ]
});
  • enabled — включение или отключение правила.
  • selector — CSS-селектор, определяющий область применения правила.
  • options — дополнительные параметры, специфичные для правила. Например:
axe.configure({
    rules: [
        {
            id: 'color-contrast',
            options: { threshold: 4.5 }
        }
    ]
});

threshold задаёт минимальное отношение контраста текста к фону, используемое для проверки.

Глобальные исключения

Для крупных проектов часто необходимо исключать определённые элементы из всех проверок. Это настраивается через exclude:

axe.configure({
    exclude: [
        ['.ignore-axe'],                 // CSS-селекторы
        [document.querySelector('#ad')]  // DOM-элементы
    ]
});

Элементы, указанные в exclude, полностью пропускаются при всех проверках доступности.

Кастомные проверки

axe-core позволяет добавлять собственные правила на глобальном уровне. Для этого используется метод axe.registerRule():

axe.registerRule({
    id: 'custom-heading',
    selector: 'h1, h2, h3',
    enabled: true,
    any: ['text'],
    evaluate: function(node) {
        return node.textContent.trim().length > 0;
    }
});

Параметры кастомного правила:

  • id — уникальный идентификатор.
  • selector — элементы, к которым применяется правило.
  • enabled — включение или отключение.
  • any / all / none — условия для проверки: хотя бы одно, все или отсутствие соответствий.
  • evaluate — функция, возвращающая true (успешно) или false (ошибка).

Глобальная настройка контекста

Axe позволяет задавать контекст выполнения проверок через глобальный context. Это полезно для страниц с динамическим контентом:

axe.configure({
    context: {
        include: [['main']],
        exclude: [['.dynamic-banner']]
    }
});
  • include — элементы или селекторы, которые нужно проверять.
  • exclude — элементы, которые нужно игнорировать.

Контекст можно переопределять локально при вызове axe.run(), но глобальная конфигурация обеспечивает единый стандарт для всех запусков на странице.

Настройка отчетов

Формат вывода и уровень детализации можно контролировать глобально:

axe.configure({
    reporter: 'v2',
    branding: { application: 'AccessibilityTest' }
});
  • reporter — выбирает версию формата отчёта.
  • branding — добавляет название приложения и отключает стандартный логотип Axe.

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

Сочетание с тестовыми фреймворками

При интеграции с Jest, Cypress или Mocha глобальная конфигурация задаётся один раз в файле и применяется ко всем тестам:

beforeAll(() => {
    axe.configure({
        rules: [{ id: 'color-contrast', enabled: true }],
        branding: { application: 'TestSuite' }
    });
});

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

Оглавление