Подключение через CDN

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

Подключение скрипта

Для использования Axe-core через CDN достаточно добавить тег <script> в HTML-документ. Рекомендуется подключать библиотеку в конце <body>, чтобы она загружалась после всех элементов страницы:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Тестирование доступности</title>
</head>
<body>
    <h1>Пример страницы</h1>
    <button>Нажми меня</button>

    <!-- Подключение Axe-core -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.7.3/axe.min.js"></script>
    <script>
        // Инициализация проверки после загрузки страницы
        window.addEventListener('load', () => {
            axe.run(function(err, results) {
                if (err) throw err;
                console.log(results.violations);
            });
        });
    </script>
</body>
</html>

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

  • Использование CDN избавляет от необходимости локального хранения библиотеки.
  • Версия библиотеки должна быть указана явно для предотвращения неожиданного обновления.
  • Скрипт подключается после основных элементов DOM, чтобы проверка охватывала весь контент страницы.

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

Axe-core поддерживает гибкую конфигурацию. Через объект axe.configure() можно:

  • включать или отключать определённые правила;
  • задавать селекторы для ограничения области проверки;
  • управлять поведением библиотеки при обнаружении ошибок.

Пример конфигурации:

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

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

Особенности конфигурации:

  • rules — массив объектов с настройкой отдельных проверок;
  • reporter позволяет задать формат вывода (v2, v3, html, json);
  • Ограничение области проверки осуществляется через селектор второго параметра axe.run(rootNode, options, callback).

Интеграция с браузерной консолью

Подключение через CDN позволяет сразу использовать Axe-core для интерактивного анализа:

  1. Открыть DevTools.
  2. Ввести axe.run() в консоль.
  3. Получить полный объект с нарушениями доступности, предупреждениями и справочной информацией для каждой ошибки.

Пример использования:

axe.run(document.body, { runOnly: ['wcag2aa'] })
    .then(results => console.table(results.violations))
    .catch(err => console.error(err));

Объяснение параметров:

  • runOnly ограничивает проверку стандартами WCAG или определёнными правилами;
  • document.body указывает корневой элемент для анализа;
  • then и catch позволяют использовать промисы для удобной обработки результатов.

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

  • Быстрая интеграция без сборки проекта.
  • Возможность тестирования в любом браузере без дополнительных инструментов.
  • Легкое обновление версии через изменение URL.
  • Совместимость с различными окружениями (статические страницы, фреймворки, SPA).

Важные рекомендации

  • Всегда использовать последнюю стабильную версию библиотеки.
  • Не полагаться только на автоматические проверки — сочетание Axe-core с ручным тестированием повышает качество доступности.
  • Проверка должна выполняться после полной загрузки DOM, иначе часть элементов может быть пропущена.
  • Для многократного использования и интеграции с CI/CD рекомендуется рассмотреть локальную установку через npm, чтобы избежать зависимости от внешнего CDN.

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

Оглавление