Инспектирование элементов

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

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

Для работы с Axe-core в браузере используется подключение через <script> или пакет axe-core через npm:

// Node.js / npm
const axe = require('axe-core');

// Браузерный вариант через CDN
// <script src="https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.9.7/axe.min.js"></script>

После подключения библиотека предоставляет метод axe.run(), который анализирует текущий DOM или указанный контейнер:

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

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

  • runOnly — позволяет ограничить набор правил по тегам или конкретным идентификаторам правил.
  • rules — ручная настройка активации или деактивации отдельных правил.
  • document — объект DOM, который будет анализироваться; может быть конкретным элементом.

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

Результаты работы axe.run() возвращают объект с несколькими массивами, среди которых:

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

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

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

  • incomplete — элементы, по которым недостаточно данных для окончательного заключения.

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

Пример обработки нарушений:

axe.run(document).then(results => {
    results.violations.forEach(violation => {
        console.log(`Правило: ${violation.id} (${violation.impact})`);
        violation.nodes.forEach(node => {
            console.log(`Элемент: ${node.target}`);
            console.log(`Подробности: ${node.failureSummary}`);
        });
    });
});

Настройка инспектирования

Axe-core позволяет гибко настраивать инспектирование элементов:

  • Целевые контейнеры: можно анализировать не весь DOM, а только определенные узлы:
const container = document.querySelector('#main-content');
axe.run(container).then(results => console.log(results));

  • Исключения: можно пропускать отдельные элементы с помощью атрибута data-axe-ignore="true".

  • Фильтрация по критичности: для фокусировки на наиболее серьёзных нарушениях:

axe.run(document).then(results => {
    const criticalIssues = results.violations.filter(v => v.impact === 'critical');
    console.log(criticalIssues);
});

Инспектирование динамических элементов

Axe-core поддерживает анализ динамически изменяемого DOM. Для этого используется повторный вызов axe.run() после изменения интерфейса или интеграция с наблюдателями MutationObserver:

const observer = new MutationObserver(() => {
    axe.run(document.getElementById('dynamic-section'))
        .then(results => console.log(results.violations));
});

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

Такой подход позволяет автоматически проверять доступность новых элементов, появляющихся после действий пользователя или асинхронной загрузки данных.

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

Для unit- и e2e-тестов Axe-core предоставляет API для Node.js и браузера. Пример использования с Jest:

const { configureAxe, axe } = require('jest-axe');
const { render } = require('@testing-library/react');

test('доступность компонента', async () => {
    const { container } = render(<MyComponent />);
    const results = await axe(container);
    expect(results).toHaveNoViolations();
});

Основные моменты:

  • jest-axe предоставляет удобные матчер-функции (toHaveNoViolations).
  • render из @testing-library/react позволяет получить DOM-узел для анализа.
  • Можно комбинировать проверку с разными наборами правил и фильтровать по важности.

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

Axe-core поддерживает расширение с помощью:

  • Пользовательских правил: добавление своих критериев доступности для специфических компонентов.
  • Плагинов для браузеров: Chrome и Firefox имеют официальные расширения, которые визуализируют нарушения на странице.
  • Отчетов в HTML или JSON: для систематической документации доступности.

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

axe.configure({
    rules: [
        {
            id: 'custom-label-check',
            selector: 'input[type="text"]',
            any: [{
                match: node => node.hasAttribute('aria-label') || node.labels.length > 0
            }],
            enabled: true
        }
    ]
});

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

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

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

Оглавление