Try-catch блоки

Axe-core — это библиотека для автоматизированного тестирования доступности веб-приложений. Она предоставляет API для анализа DOM и выявления проблем с доступностью, соответствующих стандартам WCAG (Web Content Accessibility Guidelines). В JavaScript Axe-core можно интегрировать напрямую в браузер или использовать в Node.js-среде.

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

Axe-core доступна как npm-пакет. Для подключения достаточно установить пакет и импортировать его:

import axe from 'axe-core';

// или через require
const axe = require('axe-core');

Инициализация библиотеки предполагает, что DOM уже загружен. Для веб-приложений обычно используется событие DOMContentLoaded:

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

Основные методы

  1. axe.run(context, options, callback) Запускает анализ доступности на указанном контексте (например, document или конкретный элемент).

    • context — элемент DOM или CSS-селектор.
    • options — объект настроек (например, исключение некоторых правил).
    • callback — функция обратного вызова, принимающая ошибки и результаты проверки.

  2. axe.configure(config) Позволяет глобально изменить настройки библиотеки. Используется для отключения правил или изменения их приоритетов:

axe.configure({
    rules: [
        { id: 'color-contrast', enabled: false }, // отключение проверки контраста
        { id: 'image-alt', enabled: true }        // включение проверки альтернативного текста
    ]
});

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

Метод axe.run возвращает объект с несколькими ключами:

  • violations — массив объектов с найденными нарушениями. Каждый объект содержит:

    • id — идентификатор правила.
    • impact — степень важности (minor, moderate, serious, critical).
    • description — описание проблемы.
    • nodes — элементы DOM, на которых обнаружена ошибка.

  • passes — массив проверок, пройденных успешно.

  • incomplete — проверки, которые не удалось завершить.

  • inapplicable — правила, не применимые к текущему DOM.

Пример обработки результатов:

axe.run(document, {}, (err, results) => {
    if (err) {
        console.error('Ошибка при анализе доступности:', err);
        return;
    }

    results.violations.forEach(violation => {
        console.log(`Нарушение: ${violation.id}`);
        console.log(`Степень важности: ${violation.impact}`);
        violation.nodes.forEach(node => {
            console.log('Элемент:', node.html);
            console.log('Описание:', node.failureSummary);
        });
    });
});

Использование Axe-core с фреймворками

Для React, Vue или Angular Axe-core можно интегрировать как в браузерные тесты, так и в среду Node.js:

  • React: через react-axe, который автоматически подключает Axe-core при разработке.
  • Node.js: через puppeteer или playwright для анализа страниц на сервере:
const puppeteer = require('puppeteer');
const axeCore = require('axe-core');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('http://localhost:3000');

    const results = await page.evaluate(async () => {
        return await axe.run(document);
    });

    console.log(results.violations);
    await browser.close();
})();

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

Axe-core позволяет точно управлять проверками:

  • Ограничение анализа отдельными элементами:
axe.run(document.querySelector('#main-content'));
  • Исключение правил:
axe.run(document, {
    rules: {
        'color-contrast': { enabled: false },
        'label': { enabled: true }
    }
});
  • Настройка тегов для фильтрации правил:
axe.run(document, {
    runOnly: {
        type: 'tag',
        values: ['wcag2a', 'wcag2aa']
    }
});

Отладка и интеграция в CI/CD

Для интеграции Axe-core в автоматические тесты используется Node.js-среда. Результаты проверок можно сохранять в JSON и анализировать в пайплайнах CI/CD. Это позволяет автоматически выявлять регрессии доступности при обновлении фронтенда.

const fs = require('fs');

axe.run(document, {}, (err, results) => {
    if (err) throw err;
    fs.writeFileSync('axe-results.json', JSON.stringify(results, null, 2));
});

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

  • Запускать Axe-core на ограниченных участках DOM при больших страницах.
  • Использовать фильтрацию правил (runOnly) для ускорения анализа.
  • Интегрировать с тестовыми инструментами, такими как Jest или Mocha, чтобы избегать блокировки пользовательского интерфейса.

Практические сценарии применения

  1. Локальная проверка компонентов — использовать axe.run на отдельных компонентах перед интеграцией в страницу.
  2. Интеграционные тесты — включать Axe-core в автоматические тесты, чтобы проверять доступность всех страниц приложения.
  3. Мониторинг доступности — запускать Axe-core в продакшн-среде через headless-браузеры для регулярного аудита.

Axe-core обеспечивает мощный инструмент для поддержания стандартов доступности, интегрируясь с любыми современными JavaScript-приложениями, от простых страниц до сложных SPA и серверных рендеринговых решений.

Оглавление