Данные about проверки

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

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

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

import axe from 'axe-core';

// Инициализация
axe.run(document, {
  reporter: 'v2',
  rules: {
    'color-contrast': { enabled: true },
    'image-alt': { enabled: true }
  }
}, (err, results) => {
  if (err) throw err;
  console.log(results.violations);
});

Ключевые моменты при настройке:

  • document — корневой элемент, который будет проверяться.
  • rules — объект, определяющий активные правила. Можно отключать ненужные или настраивать параметры.
  • reporter — формат вывода результатов, например, v2 для структурированного JSON.

Структура результатов проверки

Результаты Axe-core имеют несколько важных полей:

  1. violations — массив объектов с нарушениями.
  2. passes — элементы, которые успешно прошли проверку.
  3. incomplete — проверки, которые не удалось выполнить полностью.
  4. inapplicable — правила, которые не применимы к текущему DOM.

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

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

Пример вывода для одного нарушения:

{
  "id": "image-alt",
  "impact": "critical",
  "description": "Все изображения должны иметь альтернативный текст",
  "nodes": [
    {
      "html": "<img src='logo.png'>",
      "target": ["#header img"],
      "failureSummary": "Элемент не имеет атрибута alt"
    }
  ]
}

Глубокая настройка правил

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

  • enabled: true/false — включение или отключение.
  • selector — ограничение проверки только определенными элементами.
  • any, all, none — условия для комбинации проверок внутри правила.

Пример включения проверки только для форм:

axe.run(document, {
  rules: {
    'label': {
      enabled: true,
      selector: 'form'
    }
  }
});

Также можно расширять правила собственными функциями:

axe.configure({
  checks: [
    {
      id: 'custom-link-check',
      evaluate: (node) => node.tagName === 'A' && !node.hasAttribute('href'),
      enabled: true,
      options: {}
    }
  ]
});

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

Axe-core широко используется вместе с Jest, Cypress, Mocha для автоматизации тестирования доступности:

  • Jest:
import axe from 'axe-core';
import { render } from '@testing-library/react';

test('страница доступна', async () => {
  const { container } = render(<App />);
  const results = await axe.run(container);
  expect(results.violations).toHaveLength(0);
});
  • Cypress:
cy.visit('/page');
cy.injectAxe();
cy.checkA11y(null, {
  includedImpacts: ['critical', 'serious']
});

Особенности:

  • injectAxe() внедряет библиотеку в контекст страницы.
  • checkA11y() выполняет проверку, принимает фильтры по селекторам и уровню критичности.

Работа с асинхронным контентом

Проверка элементов, создаваемых динамически через JavaScript, требует ожидания рендеринга:

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

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

Оптимизация и фильтрация данных

  • Фильтрация по impact:
const criticalViolations = results.violations.filter(v => v.impact === 'critical');
  • Фильтрация по селекторам:
const formViolations = results.violations.filter(v =>
  v.nodes.some(node => node.target[0].startsWith('#form'))
);
  • Группировка по правилам позволяет формировать понятные отчёты для команды разработчиков.

Расширенные возможности

  • Конфигурация контекста — проверка только определенной части DOM с помощью context: '#main'.
  • Скрипты обхода Shadow DOM — Axe-core корректно анализирует элементы внутри Shadow DOM при соответствующих настройках.
  • Поддержка iframe — можно запускать проверку внутри вложенных фреймов.

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

  • Всегда включать базовые правила (image-alt, color-contrast, label), чтобы обеспечить минимум доступности.
  • Регулярно интегрировать проверку в CI/CD, чтобы выявлять нарушения на ранних этапах.
  • Использовать фильтры impact, чтобы сосредоточиться на критичных проблемах.
  • Документировать каждое кастомное правило для команды, чтобы поддерживать единый стандарт.

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

Оглавление