Timestamp и окружение

Библиотека Axe-core предназначена для автоматического анализа доступности веб-контента и интегрируется с JavaScript-приложениями для проведения аудитов элементов страницы. Она предоставляет детальные отчёты о нарушениях стандартов доступности WCAG, что позволяет повысить качество интерфейсов и соответствие нормативам.

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

Для использования Axe-core в браузере её можно подключить через npm или CDN. В Node.js-среде применяется пакет axe-core вместе с инструментами рендеринга страницы, например, jsdom или интеграцией в тестовые фреймворки.

Пример подключения через npm:

import axe from 'axe-core';

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

Ключевой момент: объект document задаёт контекст проверки, а runOnly позволяет ограничить проверку только определёнными категориями правил.

Timestamp в Axe-core

Каждое событие и каждая проверка Axe-core сопровождаются меткой времени (timestamp), что обеспечивает возможность отслеживания момента проведения аудита и анализа динамических изменений DOM. Timestamp представляет собой значение времени в миллисекундах с начала эпохи Unix и используется в следующих случаях:

  • Сопоставление результатов разных запусков аудита для динамических страниц.
  • Отслеживание времени отклика при изменении DOM.
  • Логирование нарушений для последующей аналитики.

В объекте результатов (results) timestamp находится в разделе timestamp верхнего уровня, а также внутри каждого обнаруженного нарушения. Пример структуры:

{
  "timestamp": 1678790123456,
  "url": "https://example.com",
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "description": "Элементы с низкой контрастностью текста",
      "timestamp": 1678790123478
    }
  ]
}

Здесь видно, что общий timestamp фиксирует момент запуска проверки, а вложенные timestamp’ы отражают точное время обнаружения каждой проблемы.

Контекст и окружение аудита

Окружение (environment) определяет условия, в которых проводится аудит:

  • Документ: текущий DOM страницы.
  • Фреймы: проверка может выполняться в отдельных <iframe> с наследованием контекста.
  • Тестовые инструменты: интеграция с Jest, Cypress или Puppeteer требует передачи специфических объектов страницы.

Параметры окружения задаются через объект конфигурации при вызове axe.run:

axe.run(document, {
  rules: {
    'label': { enabled: true },
    'color-contrast': { enabled: true }
  },
  reporter: 'v2',
  iframes: true
}).then(results => console.log(results));

Важный аспект — правильная настройка проверки фреймов, иначе нарушения в <iframe> не будут зафиксированы.

Асинхронная проверка и управление результатами

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

Пример с использованием async/await:

async function runAxeAudit() {
  const results = await axe.run(document, {
    runOnly: { type: 'tag', values: ['wcag2aa'] }
  });
  console.log(results.violations);
}

runAxeAudit();

Каждое нарушение содержит поля: id, impact, tags, nodes. Timestamp интегрирован в каждый узел (nodes) для точного отслеживания момента обнаружения проблемы.

Логирование и анализ

Использование timestamp в сочетании с объектом окружения позволяет:

  • Построение временной шкалы нарушений доступности.
  • Сравнение аудитов между разными версиями страниц.
  • Выявление динамических проблем, возникающих после пользовательских взаимодействий.

Для аналитики рекомендуется сохранять результаты в формате JSON и проводить агрегацию по timestamp и id нарушения.

Практические советы по окружению

  1. Использовать document или контейнер конкретного компонента, чтобы сократить время проверки.
  2. Включать фреймы только при необходимости, так как проверка всех <iframe> увеличивает нагрузку.
  3. Сохранять результаты с timestamp, чтобы можно было восстановить последовательность изменений.
  4. Интегрировать с CI/CD, чтобы каждый билд проходил автоматический аудит доступности и timestamp фиксировал момент проверки.

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

Оглавление