Ручная проверка требований

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

Библиотека реализует JavaScript API, позволяющее запускать проверки как в браузере, так и в среде Node.js. Основной принцип работы — анализ DOM-дерева и вычисление соответствия элементов правилам доступности.

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

Для работы с Axe-core в браузере можно использовать CDN:

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

В среде Node.js или при работе с инструментами сборки (Webpack, Vite) предпочтительно использовать npm:

npm install axe-core

Подключение в коде:

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

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

Axe-core предоставляет функцию axe.run, которая выполняет сканирование DOM на предмет нарушений доступности. Пример базового запуска:

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

Здесь results.violations содержит массив объектов, описывающих найденные нарушения:

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

Настройка проверок

Axe-core позволяет гибко настраивать проверку. Можно исключать определённые правила или включать только выбранные:

axe.run(document, {
    runOnly: {
        type: 'tag',
        values: ['wcag2a', 'wcag2aa']
    },
    rules: {
        'color-contrast': { enabled: false }
    }
}, (err, results) => {
    console.log(results.violations);
});
  • runOnly позволяет ограничить проверку определёнными тегами или ID правил.
  • rules задаёт индивидуальные настройки для конкретных правил.

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

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

import { configureAxe, toHaveNoViolations } from 'jest-axe';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

expect.extend(toHaveNoViolations);

test('component should have no accessibility violations', async () => {
    const { container } = render(<MyComponent />);
    const axe = configureAxe();
    const results = await axe(container);
    expect(results).toHaveNoViolations();
});

Ключевой момент — интеграция с DOM-рендером компонента и проверка результата с использованием стандартных assertion.

Работа с результатами

Каждое нарушение содержит следующие данные:

  • selector — CSS-селектор элемента.
  • html — фрагмент HTML-кода элемента.
  • failureSummary — краткая информация о причине нарушения.
  • help и helpUrl — текстовое объяснение и ссылка на документацию по исправлению.

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

results.violations.forEach(v => {
    console.log(`${v.id} (${v.impact}): ${v.description}`);
    v.nodes.forEach(node => {
        console.log(`  Element: ${node.html}`);
    });
});

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

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

Пример добавления кастомного правила:

axe.configure({
    rules: [
        {
            id: 'custom-alt-check',
            selector: 'img',
            any: ['alt'],
            enabled: true,
            description: 'Все изображения должны иметь alt атрибут'
        }
    ]
});

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

  • Использовать комбинацию автоматизированных и ручных проверок. Автотесты обнаруживают базовые нарушения, но ручная проверка обеспечивает оценку контекста, семантики и пользовательского опыта.
  • Регулярно обновлять библиотеку, так как правила доступности и методы тестирования постоянно совершенствуются.
  • Интегрировать Axe-core в процесс CI/CD, чтобы нарушения доступности выявлялись на раннем этапе разработки.

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

Оглавление