Инструменты разработчика

Библиотека Axe-core является мощным инструментом для автоматизированного тестирования доступности веб-приложений. Она поставляется в виде NPM-пакета и может использоваться как в браузерных, так и в серверных средах. Установка производится стандартной командой:

npm install axe-core --save-dev

После установки библиотеку можно подключить в проекте:

import axe from 'axe-core';

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

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

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

Основные принципы работы

Axe-core анализирует DOM страницы и выявляет нарушения принципов доступности согласно стандартам WCAG 2.1. Алгоритм проверки строится на следующих компонентах:

  1. Правила (rules) — набор заранее определённых проверок, каждая из которых отвечает за конкретный аспект доступности (например, контраст текста, наличие альтернативного текста для изображений, корректное использование ARIA-атрибутов).
  2. Контекст (context) — область DOM, которую необходимо проверить. По умолчанию библиотека проверяет весь документ.
  3. Опции (options) — позволяют настраивать поведение анализа, включая включение/отключение отдельных правил, игнорирование скрытых элементов и выбор уровня строгости.

Пример базового вызова проверки всей страницы:

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

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

Настройка правил

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

  • Включение или отключение правил:
const options = {
    runOnly: {
        type: 'rule',
        values: ['color-contrast', 'image-alt']
    }
};

axe.run(document, options, (err, results) => {
    console.log(results.violations);
});
  • Применение тегов: правила можно группировать с помощью тегов (wcag2a, wcag2aa, best-practice) и запускать проверки только для определённых категорий.
const options = {
    runOnly: {
        type: 'tag',
        values: ['wcag2aa', 'best-practice']
    }
};
  • Игнорирование элементов: некоторые части интерфейса можно исключить из анализа через селекторы:
const options = {
    rules: {
        'color-contrast': { enabled: true },
        'image-alt': { enabled: true }
    },
    include: [['#main-content']],
    exclude: [['.ignore-for-a11y']]
};

Асинхронный и синхронный режим

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

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

Синхронный вызов полезен при интеграции с тестовыми фреймворками, где требуется немедленный результат анализа DOM:

const results = axe.run(document, { runOnly: { type: 'tag', values: ['wcag2a'] } });
console.log(results.violations);

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

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

  • Jest:
import { configureAxe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('component should be accessible', async () => {
    const results = await configureAxe(axe).run(container);
    expect(results).toHaveNoViolations();
});
  • Cypress:
import 'cypress-axe';

cy.visit('/page');
cy.injectAxe();
cy.checkA11y();

Интеграция позволяет запускать проверки доступности в процессе CI/CD, обеспечивая автоматическую проверку каждой сборки.

Обработка результатов

Каждое нарушение в results.violations включает следующие ключевые поля:

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

Пример форматирования вывода:

results.violations.forEach(v => {
    console.log(`Правило: ${v.id} (${v.impact})`);
    console.log(`Описание: ${v.description}`);
    v.nodes.forEach(node => {
        console.log(`Элемент: ${node.target.join(', ')}`);
        console.log(`Сводка: ${node.failureSummary}`);
    });
});

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

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

  • Проверка только видимых элементов: можно игнорировать скрытые элементы через опцию includedHidden: false.
  • Поддержка Shadow DOM: библиотека корректно анализирует компоненты внутри Shadow DOM.
  • Поддержка iFrame: можно передавать iFrame-элемент как контекст для проверки.
  • Расширение правил: разработчики могут добавлять собственные правила, используя метод axe.registerRule(ruleDefinition).

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

axe.registerRule({
    id: 'custom-heading',
    selector: 'h1,h2,h3,h4,h5,h6',
    evaluate: node => node.textContent.length > 0,
    metadata: { impact: 'moderate', help: 'Заголовки должны содержать текст' }
});

Использование в DevTools

Для быстрого анализа доступности в браузере можно использовать интеграцию Axe-core с расширениями Chrome и Firefox. Расширение позволяет:

  • Сканировать текущую страницу одним кликом.
  • Просматривать нарушения с визуальными подсказками.
  • Экспортировать отчёты в формате JSON или CSV для дальнейшего анализа.

Использование расширения особенно удобно при отладке UI и проверке отдельных компонентов без запуска полноценного тестового окружения.

Оглавление