Отложенная загрузка контента

Для работы с библиотекой Axe-core в JavaScript необходимо установить пакет через npm или подключить через CDN. Наиболее распространённый способ для проектов на Node.js:

npm install axe-core

После установки библиотеку можно импортировать:

import axe from 'axe-core';

Для использования в браузере через CDN:

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

После этого объект axe становится доступным для конфигурации и запуска тестов доступности.

Инициализация и базовый запуск

Для запуска сканирования DOM используется метод run. Он принимает корневой элемент для проверки, объект конфигурации и callback с результатами:

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

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

  • document — корневой элемент для анализа. Можно передать любой DOM-узел.
  • results.violations — массив найденных нарушений доступности с детальными описаниями.
  • Ошибки при выполнении передаются через err.

Работа с отложенной загрузкой контента

Отложенная загрузка (lazy loading) элементов, таких как изображения, модальные окна, динамически подгружаемые списки, требует особого подхода, поскольку Axe-core анализирует только текущий DOM. Элементы, которые ещё не загружены, не будут проверены стандартным вызовом axe.run.

Принципы проверки динамического контента:

  1. Отслеживание события загрузки Любой динамический элемент должен проверяться после его добавления в DOM. Например, при подгрузке контента через AJAX:
fetch('/api/content')
  .then(response => response.text())
  .then(html => {
    const container = document.getElementById('lazy-container');
    container.innerHTML = html;

    axe.run(container, {}, (err, results) => {
      if (err) throw err;
      console.log(results.violations);
    });
  });
  1. Мутационный наблюдатель (MutationObserver) Для отслеживания постоянной динамики в DOM удобно использовать MutationObserver, который будет автоматически запускать анализ Axe-core на новых элементах:
const observer = new MutationObserver((mutationsList) => {
  for (let mutation of mutationsList) {
    if (mutation.addedNodes.length) {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          axe.run(node, {}, (err, results) => {
            if (err) throw err;
            console.log(results.violations);
          });
        }
      });
    }
  }
});

observer.observe(document.body, { childList: true, subtree: true });

Преимущества: позволяет проверять контент в реальном времени без ручного вызова сканирования после каждой загрузки.

Асинхронная проверка и промисы

Axe-core поддерживает промисы, что упрощает интеграцию с асинхронным кодом и современными фреймворками:

axe.run(document)
  .then(results => {
    console.log(results.violations);
  })
  .catch(err => console.error(err));

При динамическом контенте можно вызывать этот метод после завершения всех асинхронных операций:

async function loadAndTest() {
  const html = await fetchContent('/api/content');
  const container = document.getElementById('lazy-container');
  container.innerHTML = html;

  const results = await axe.run(container);
  console.log(results.violations);
}

Конфигурация для отложенного контента

Для оптимизации проверки можно использовать:

  • runOnly — выбор определённых правил, чтобы не сканировать весь DOM при каждой загрузке:
axe.run(document, { runOnly: ['color-contrast', 'label'] })
  • include и exclude — проверка конкретных селекторов:
axe.run(document, {
  include: [['#lazy-container']],
  exclude: [['.ads-block']]
});

Это особенно важно при динамическом контенте, чтобы избегать повторной проверки статических частей страницы.

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

Фреймворки типа React, Vue или Angular активно используют виртуальный DOM и lazy-loading. Для корректного анализа нужно:

  1. Встраивать вызов axe.run в хуки жизненного цикла компонентов (componentDidMount в React, mounted в Vue).
  2. Использовать асинхронные вызовы после загрузки данных или рендеринга модальных окон.
  3. При многократных обновлениях DOM — комбинировать MutationObserver с выборочной проверкой изменений.

Пример для React:

useEffect(() => {
  axe.run(document.getElementById('app'))
    .then(results => console.log(results.violations))
    .catch(err => console.error(err));
}, [dynamicContent]);

Обработка результатов

Результаты Axe-core включают:

  • violations — нарушения доступности с описанием и рекомендациями.
  • passes — элементы, которые прошли проверку.
  • incomplete — элементы, для которых проверка была частично выполнена.
  • inapplicable — правила, которые не применимы к текущему DOM.

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

Практические советы

  • Проверять динамически загружаемые модальные окна, всплывающие подсказки и интерактивные виджеты.
  • Минимизировать частоту запусков при частых DOM-изменениях.
  • Использовать кастомные правила Axe-core при специфических компонентах.
  • Логировать результаты с указанием контекста (какой компонент или блок загружен), чтобы ускорить исправление ошибок.
Оглавление