Структура правила

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

Основные элементы правила

Каждое правило в Axe-core описывается как объект с набором ключевых свойств. Ключевые поля:

  • id – уникальный идентификатор правила, используемый для ссылки на него в отчётах и конфигурации. Пример: "color-contrast", "label".

  • description – краткое текстовое описание цели правила. Определяет, какую проблему доступности оно решает. Пример: "Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.".

  • help – более подробное объяснение с рекомендациями по исправлению нарушений. Обычно содержит ссылку на документацию WCAG или практические советы. Пример: "Elements must have sufficient color contrast to be perceivable by users with low vision. See https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html".

  • tags – массив категорий, к которым относится правило. Используется для фильтрации и группировки правил в отчётах. Типичные теги: ["wcag2a", "wcag2aa", "wcag21aa", "experimental"].

  • context – CSS-селектор или XPath, определяющий элементы DOM, к которым будет применяться правило. Этот селектор ограничивает область проверки. Пример: ["button", "input[type='submit']"].

  • enabled – булевое значение, определяющее, активировано ли правило по умолчанию. Позволяет включать или отключать правило в конфигурации Axe-core. Пример: true.

  • evaluate – функция, выполняющая проверку доступности на выбранных элементах. Принимает DOM-узел и возвращает объект с результатом: pass, fail или inapplicable. Стандартная сигнатура:

    function evaluate(node, options) {
    // Логика проверки
    return {
        result: "pass" | "fail" | "inapplicable",
        message: "Описание нарушения"
    };
}

  • all, any, none – условия, определяющие, как агрегируются результаты для группы элементов или подправил. Эти поля используют массивы функций или селекторов и позволяют задавать логические комбинации проверок. Пример:

    all: ["hasName", "isVisible"]

Вспомогательные свойства и функции

  • matches – функция, которая проверяет, соответствует ли элемент условиям применения правила. Часто используется для фильтрации элементов перед основной проверкой.

    matches: node => node.tagName === 'IMG' && !node.hasAttribute('alt')

  • any и none – альтернативные логические группы, применяемые для создания сложных условий. Например, правило может считаться нарушением, если выполняется хотя бы одно из условий в any или не выполняется ни одно из условий в none.

  • metadata – объект, содержащий дополнительную информацию о правиле, включая версию стандарта WCAG, приоритет и категорию риска. Пример:

    metadata: {
    impact: "critical",
    wcag: ["1.4.3", "2.4.4"],
    tags: ["accessibility", "contrast"]
}

Логика работы правила

  1. Идентификация элементов – по context или matches выбираются все элементы DOM, к которым применяется правило.
  2. Применение условий – выполняются функции из all, any, none для фильтрации элементов или проверки подусловий.
  3. Валидация – функция evaluate анализирует выбранные элементы и возвращает результат.
  4. Сбор отчёта – все результаты агрегируются в объект, который включается в общий отчёт Axe-core.

Пример простого правила

const imgAltRule = {
    id: "image-alt",
    description: "Проверка наличия атрибута alt у изображений",
    help: "Все изображения должны иметь атрибут alt для доступности.",
    tags: ["wcag2a", "images"],
    context: "img",
    enabled: true,
    matches: node => node.tagName === "IMG",
    evaluate: node => {
        if (!node.hasAttribute("alt") || node.getAttribute("alt").trim() === "") {
            return { result: "fail", message: "Изображение не имеет описания alt." };
        }
        return { result: "pass" };
    }
};

В этом примере видно, как все элементы структуры правила интегрируются: идентификатор, описание, область применения, функция проверки и результат.

Советы по разработке правил

  • Разделять логические условия и функцию проверки для лучшей читаемости и переиспользуемости.
  • Использовать metadata для маркировки важности правила и соответствия стандартам WCAG.
  • Применять all, any, none для сложных сценариев, где один элемент может требовать множественных проверок.
  • Тестировать правило на реальных страницах, чтобы избежать ложных срабатываний или пропусков нарушений.

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

Оглавление