Динамический контент

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

npm install axe-core --save-dev

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

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

Для браузерных окружений доступна версия через <script>:

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

Инициализация и базовое использование

Axe-core выполняет проверку доступности DOM-дерева страницы. Основной метод — axe.run, который принимает корневой элемент для анализа и объект опций.

Пример базового запуска:

axe.run(document, {
  runOnly: {
    type: 'tag',
    values: ['wcag2a', 'wcag2aa']
  },
  reporter: 'v2'
}).then(results => {
  console.log(results.violations);
});

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

  • runOnly позволяет ограничивать проверку конкретными стандартами (например, WCAG 2.1).
  • reporter задает формат отчета (v2, v3, json).
  • results.violations содержит массив найденных проблем доступности.

Проверка динамического контента

Динамический контент, создаваемый через JavaScript (AJAX-запросы, SPA-фреймворки), требует особого подхода. Axe-core анализирует DOM в момент вызова axe.run, поэтому элементы, загруженные позже, без повторного запуска останутся вне проверки.

Подходы к динамическому контенту

  1. Повторный запуск после загрузки контента

    Если данные подгружаются асинхронно, axe.run следует вызывать после рендеринга:

    fetch('/api/data')
  .then(res => res.json())
  .then(data => {
    renderContent(data); // вставка контента в DOM
    axe.run(document.body).then(results => {
      console.log(results.violations);
    });
  });

  2. Использование MutationObserver

    Для автоматической проверки элементов, которые появляются после первоначальной загрузки страницы, применяется MutationObserver:

    const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length) {
      axe.run(mutation.target).then(results => {
        console.log(results.violations);
      });
    }
  });
});

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

    Такой подход позволяет анализировать новые узлы в реальном времени без необходимости вручную запускать проверки.

Конфигурация правил для динамических элементов

Axe-core предоставляет гибкую систему настройки правил:

  • rules — включение или отключение конкретных проверок.
  • exclude — исключение элементов по селекторам.
  • elementRef — проверка только конкретного узла.

Пример конфигурации для динамических форм:

axe.run(document.body, {
  rules: {
    'color-contrast': { enabled: true },
    'label': { enabled: false }
  },
  include: [['#dynamic-form']]
}).then(results => {
  console.log(results.violations);
});

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

Для React, Vue или Angular важно запускать проверку после полного рендеринга компонентов. В React это делается через useEffect:

import { useEffect } from 'react';
import axe from 'axe-core';

function DynamicComponent({ data }) {
  useEffect(() => {
    axe.run(document.getElementById('dynamic-container'))
      .then(results => console.log(results.violations));
  }, [data]);

  return <div id="dynamic-container">{data.map(item => <p>{item}</p>)}</div>;
}

Ключевое: axe.run должен вызываться после того, как DOM обновлен, иначе новые элементы не будут проверены.

Обработка отчетов и визуализация

Результаты проверки включают:

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

Для динамического контента удобно строить визуальный интерфейс:

results.violations.forEach(violation => {
  violation.nodes.forEach(node => {
    const el = node.target[0];
    el.style.outline = '2px solid red';
  });
});

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

Советы по производительности

  • Проверять только измененные узлы, а не весь DOM, чтобы избежать лагов.
  • Использовать runOnly с нужными тегами или правилами.
  • Комбинировать MutationObserver и отложенный вызов axe.run через setTimeout для сглаживания нагрузки при больших динамических страницах.

Особенности работы с SPA

В SPA (Single Page Application) важно учитывать:

  • Навигация между страницами не перезагружает DOM, поэтому axe.run необходимо запускать на каждом изменении вида.
  • События рендеринга должны синхронизироваться с проверкой: после перехода и полного отображения контента.
  • Для элементов, создаваемых условно (if, v-if, ngIf), проверка запускается после вставки в DOM.

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

Оглавление