Структура объекта конфигурации

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

Основные поля объекта конфигурации

  1. rules Содержит набор правил, которые будут применяться при сканировании. Каждое правило описывает определённый аспект доступности, например, корректность использования ARIA-атрибутов или контрастность текста.

    const config = {
    rules: {
        "color-contrast": { enabled: true },
        "image-alt": { enabled: true },
        "label": { enabled: false }
    }
};
    • enabled — логическое значение, включающее или отключающее правило.
    • Дополнительно можно указывать параметры конкретного правила, например, минимальный коэффициент контрастности.

  2. tags Позволяет фильтровать правила по группам. Например, можно выбрать только критические или только рекомендуемые правила.

    const config = {
    tags: ["wcag2a", "wcag2aa"]
};

    Поддерживаются стандартные наборы тегов WCAG, такие как:

    • wcag2a — базовый уровень доступности
    • wcag2aa — средний уровень
    • wcag2aaa — высокий уровень

  3. include и exclude Определяют, какие элементы DOM подлежат проверке, а какие исключаются. Эти поля принимают массивы CSS-селекторов или XPath.

    const config = {
    include: ["#main-content", ".important-section"],
    exclude: [".ad-banner", "#footer"]
};
    • include — элементы, которые будут проверены обязательно.
    • exclude — элементы, которые будут проигнорированы даже если входят в include.

  4. resultTypes Определяет, какие категории результатов будут возвращены после анализа.

    const config = {
    resultTypes: ["violations", "incomplete", "inapplicable", "passes"]
};
    • violations — нарушения доступности
    • incomplete — результаты, которые не удалось полностью проверить
    • inapplicable — правила, неприменимые к текущему DOM
    • passes — успешные проверки

Вложенные параметры правил

Каждое правило может содержать детальные параметры, позволяющие тонко настроить проверку:

  • selector — ограничивает правило на определённые элементы.
  • options — объект дополнительных параметров, специфичных для правила.

Пример настройки контрастности текста:

const config = {
    rules: {
        "color-contrast": {
            enabled: true,
            options: {
                contrastRatio: 4.5
            }
        }
    }
};

Объект контекста и кастомные проверки

Axe-core позволяет создавать пользовательские правила и задавать контекст сканирования через объект context:

const config = {
    context: {
        include: ["body"],
        exclude: [".no-a11y"]
    },
    rules: {
        "custom-rule": {
            enabled: true,
            selector: "button.custom",
            any: ["aria-label"]
        }
    }
};

  • context задаёт общий контекст, а selector внутри правила — локальный фильтр.

  • Пользовательские правила поддерживают поля:

    • any — хотя бы один из указанных атрибутов должен быть присутствовать
    • all — все указанные атрибуты обязательны
    • none — указанные атрибуты не должны присутствовать

Динамическая конфигурация и программное управление

Объект конфигурации может быть создан динамически на основе состояния страницы или пользовательских условий:

function getAxeConfig(isAdmin) {
    return {
        rules: {
            "region": { enabled: !isAdmin },
            "color-contrast": { enabled: true }
        },
        exclude: isAdmin ? [".admin-panel"] : []
    };
}

Это позволяет интегрировать Axe-core в тестовые фреймворки, такие как Jest, Cypress или Puppeteer, с учётом специфики конкретного окружения.

Советы по организации объекта конфигурации

  • Разделять глобальные параметры (context, resultTypes) и правила для удобного управления.
  • Использовать tags для быстрого включения наборов правил WCAG.
  • Применять include и exclude для оптимизации времени сканирования, особенно на больших страницах.
  • Для сложных проектов выносить конфигурацию в отдельный JSON-файл или модуль JavaScript, чтобы использовать в разных тестовых сценариях.

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

Оглавление