Отслеживание метрик

Axe-core — это библиотека для автоматизированного тестирования доступности веб-приложений на JavaScript. Она позволяет выявлять проблемы соответствия стандартам WCAG (Web Content Accessibility Guidelines) и ARIA (Accessible Rich Internet Applications). Основное предназначение Axe-core — интеграция в тесты пользовательского интерфейса, где она анализирует DOM и выявляет нарушения доступности, классифицируя их по уровням критичности.

Библиотека реализована как модуль JavaScript и может использоваться как в браузерной среде, так и в Node.js. Основные функции доступны через API, которое возвращает структурированные результаты проверки элементов страницы.

Подключение и инициализация

Для работы с Axe-core в проекте на JavaScript необходимо установить пакет через npm:

npm install axe-core

После установки библиотека подключается следующим образом:

const axe = require('axe-core');

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

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

Инициализация проверки выполняется через метод run:

axe.run(document, {}, function(err, results) {
    if (err) throw err;
    console.log(results.violations);
});

Ключевые моменты:

  • Первый аргумент (document) определяет контекст проверки — можно передать конкретный элемент DOM.
  • Второй аргумент — объект настроек правил проверки.
  • Третий аргумент — колбэк, который получает результаты анализа.

Настройка правил и конфигурация

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

const config = {
    rules: {
        'color-contrast': { enabled: true },
        'image-alt': { enabled: false }
    },
    reporter: 'v2'
};

axe.run(document, config, (err, results) => {
    if (err) throw err;
    console.log(results.violations);
});

Основные параметры конфигурации:

  • rules — объект, задающий состояние каждого правила (enabled: true/false).
  • reporter — формат вывода (v2, v3, json).
  • include / exclude — массив селекторов для включения или исключения элементов из проверки.

Работа с результатами

Результаты анализа содержат три основные категории: violations, passes и incomplete.

  • violations — нарушения доступности, которые необходимо исправить. Содержат описание проблемы, уровень серьёзности и рекомендации.
  • passes — элементы, прошедшие проверку.
  • incomplete — элементы, для которых невозможно однозначно определить соответствие.

Структура одного объекта нарушения:

{
  "id": "color-contrast",
  "impact": "serious",
  "description": "Элемент имеет недостаточный контраст текста.",
  "nodes": [
    {
      "html": "<p style='color:#888'>Текст</p>",
      "target": ["p"],
      "failureSummary": "Контраст текста ниже рекомендуемого уровня"
    }
  ]
}

Ключевые аспекты анализа:

  • id — уникальный идентификатор правила.
  • impact — критичность (minor, moderate, serious, critical).
  • nodes — массив элементов, нарушающих правило.
  • failureSummary — краткое описание проблемы для конкретного элемента.

Интеграция с тестовыми фреймворками

Axe-core можно интегрировать с популярными тестовыми фреймворками:

Jest:

const { configureAxe, toHaveNoViolations } = require('jest-axe');
expect.extend(toHaveNoViolations);

test('Главная страница не содержит нарушений доступности', async () => {
    const results = await configureAxe()(document.body);
    expect(results).toHaveNoViolations();
});

Cypress:

import 'cypress-axe';

cy.visit('/home');
cy.injectAxe();
cy.checkA11y(null, {
    includedImpacts: ['critical', 'serious']
});

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

Отслеживание метрик доступности

Для оценки качества доступности важно фиксировать метрики и отслеживать их динамику. Axe-core предоставляет данные, на основе которых можно построить метрики:

  • Общее количество нарушений — количество элементов с нарушениями.
  • Разбивка по уровням критичности — minor, moderate, serious, critical.
  • Типы нарушений — например, проблемы с контрастом, отсутствием альтернативного текста, неправильной структурой заголовков.
  • Исторические тренды — количество исправленных и появившихся новых нарушений за каждый спринт или релиз.

Пример сбора метрик и логирования в JSON:

axe.run(document).then(results => {
    const metrics = {
        totalViolations: results.violations.length,
        byImpact: results.violations.reduce((acc, violation) => {
            acc[violation.impact] = (acc[violation.impact] || 0) + 1;
            return acc;
        }, {})
    };
    console.log(JSON.stringify(metrics, null, 2));
});

Эти данные удобно использовать для создания дашбордов доступности и отслеживания прогресса исправления проблем.

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

  • Проверка всего DOM выполняется через document, но для ускорения тестов можно ограничивать область проверки селекторами.
  • Для проектов с динамическим контентом рекомендуется запускать Axe-core после рендера всех компонентов, иначе проверки могут быть неполными.
  • Для CI/CD важно сохранять результаты в машиночитаемом формате (json), чтобы строить графики и уведомления.
  • Использовать фильтры по уровням критичности при автоматических проверках, чтобы фокусироваться на наиболее серьёзных нарушениях.

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

Оглавление