Обучение команды

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

Установка и подключение

Для использования библиотеки в проекте Node.js необходимо установить пакет через npm:

npm install axe-core

В браузерной среде библиотека может быть подключена через CDN:

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

После подключения библиотеки создаётся объект axe, через который выполняются все проверки доступности.

Инициализация и конфигурация

Axe-core позволяет гибко настраивать правила проверки. Основные параметры конфигурации:

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

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

axe.run(document, {
  runOnly: {
    type: 'tag',
    values: ['wcag2a', 'wcag2aa']
  },
  rules: {
    'color-contrast': { enabled: true },
    'image-alt': { enabled: true }
  }
}).then(results => {
  console.log(results.violations);
});

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

Результат выполнения функции axe.run содержит следующие ключевые поля:

  • violations — массив найденных нарушений. Каждое нарушение включает:

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

  • passes — элементы, успешно прошедшие проверку.

  • incomplete — проверки, завершившиеся частично из-за ограничений контента или динамических элементов.

  • inapplicable — правила, которые не применимы к текущей странице.

Интеграция с тестами

Axe-core легко интегрируется с Jest, Mocha, Cypress и другими тестовыми фреймворками. Пример использования с Jest:

const { configureAxe, toHaveNoViolations } = require('jest-axe');
expect.extend(toHaveNoViolations);

test('Главная страница без нарушений доступности', async () => {
  const html = renderToString(<App />);
  const results = await configureAxe(axe).run(html);
  expect(results).toHaveNoViolations();
});

В среде браузера с Cypress проверка может выглядеть так:

cy.visit('/home');
cy.injectAxe();
cy.checkA11y(null, {
  runOnly: ['wcag2aa']
});

Настройка командной работы

Для командной работы важно внедрить стандартизированные подходы:

  1. Общие правила — определить набор правил, обязательных для всех участников проекта.
  2. CI/CD-интеграция — автоматизация запуска проверок при каждом коммите.
  3. Формат отчетов — использование JSON или HTML, чтобы результаты были читаемы и могли анализироваться всеми членами команды.
  4. Исключения и тонкая настройка — документировать временные отключения правил, чтобы избежать путаницы.

Советы по повышению эффективности

  • Использовать context для проверки только критичных частей страницы или компонентов.
  • Комбинировать автоматизированные проверки с ручными тестами, особенно для динамического контента.
  • Настраивать регулярное обновление версии axe-core, чтобы использовать новые правила и улучшения производительности.

Взаимодействие с динамическими страницами

Для одностраничных приложений или компонентов, загружаемых асинхронно, проверка доступности должна выполняться после полной отрисовки контента. В JavaScript это достигается через MutationObserver или асинхронные колбэки:

const observer = new MutationObserver(async () => {
  const results = await axe.run(document);
  console.log(results.violations);
});

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

Документация и расширения

Axe-core поддерживает плагины и расширения для специфических фреймворков:

  • axe-webdriverjs — интеграция с Selenium WebDriver.
  • axe-puppeteer — проверка доступности через Puppeteer.
  • axe-playwright — интеграция с Playwright.

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

Если требуется, могу подготовить отдельный раздел с реальными примерами исправления типичных нарушений, включая пошаговую визуализацию DOM и исправления кода. Это будет полезно для учебника по практическому применению axe-core. Хотите, чтобы я это сделал?

Оглавление