Code review доступности

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

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

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

Через npm:

npm install axe-core --save-dev

Через CDN (для быстрого тестирования в браузере):

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

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

Интеграция с браузером

Для выполнения аудита доступности на веб-странице используется метод axe.run. Простейший пример:

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

  • document — корневой элемент, с которого начинается аудит.

  • {} — объект опций, который позволяет ограничивать проверку конкретными правилами или элементами.

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

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

Настройка правил и конфигурации

Библиотека поддерживает гибкую настройку проверок. В объекте опций можно указать:

const options = {
  runOnly: {
    type: 'tag',
    values: ['wcag2aa', 'best-practice']
  },
  rules: {
    'color-contrast': { enabled: true },
    'image-alt': { enabled: false }
  }
};
  • runOnly — ограничение проверок определёнными тегами или правилами.
  • rules — индивидуальная активация или деактивация конкретных правил.

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

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

Пример с Jest:

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

test('Проверка доступности компонента', async () => {
    const { container } = render(<MyComponent />);
    const results = await axe.run(container);
    expect(results.violations).toHaveLength(0);
});

Пример с Cypress:

cy.visit('/page');
cy.injectAxe();
cy.checkA11y();
  • cy.injectAxe() — внедряет скрипт Axe в страницу.
  • cy.checkA11y() — выполняет аудит доступности и выводит результаты.

Анализ и обработка результатов

Результаты аудита содержат детализированную информацию о нарушениях:

  • nodes содержит массив элементов, где зафиксировано нарушение.
  • html — исходный код элемента.
  • failureSummary — краткое описание проблемы.
  • all, any, none — детализируют, какие условия правила были выполнены или нарушены.

Для удобства анализа можно создавать отчёты в JSON или HTML:

const fs = require('fs');
axe.run(document).then(results => {
    fs.writeFileSync('axe-report.json', JSON.stringify(results, null, 2));
});

Продвинутые возможности

  1. Динамические элементы: Axe-core корректно работает с элементами, которые появляются после загрузки страницы или через JavaScript.
  2. Кастомные правила: Можно создавать свои проверки доступности через API axe.registerRule.
  3. Интеграция с CI/CD: Axe-core легко подключается к процессам непрерывной интеграции для автоматической проверки доступности на каждом деплое.
  4. Селекторы: Можно ограничивать аудит конкретными селекторами CSS для ускорения проверки.

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

  • Использовать комбинацию runOnly и rules для ускорения проверки и фокусировки на критичных нарушениях.
  • Автоматизировать проверки в тестах, чтобы избежать регрессий доступности.
  • Включать результаты аудита в процесс code review, чтобы все новые изменения проходили контроль доступности.
  • Сохранять отчёты в формате JSON или HTML для последующего анализа командой.

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

Оглавление