Профилирование

Библиотека Axe-core — это мощный инструмент для автоматизированного тестирования доступности веб-приложений. Она распространяется как npm-пакет и может использоваться как в браузере, так и в Node.js-среде.

Установка через npm:

npm install axe-core

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

import axe from 'axe-core';

Для браузерного окружения возможно подключение через <script>:

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

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

Основные методы для профилирования

Профилирование доступности — процесс выявления нарушений стандартов WCAG в интерфейсе. Axe-core предоставляет несколько ключевых методов:

  • axe.run([context], [options], [callback]) — основной метод сканирования страницы или выбранного DOM-узла.
  • axe.configure(options) — позволяет задать глобальные правила проверки, фильтры и параметры профилирования.
  • axe.reset() — сброс всех кастомных настроек к значениям по умолчанию.

Пример базового сканирования:

axe.run(document, {}, (err, results) => {
    if (err) throw err;
    console.log(results.violations);
});
  • results.violations — массив объектов с обнаруженными нарушениями.
  • results.passes — элементы, прошедшие проверку.
  • results.incomplete — элементы, где проверка была частичной.
  • results.inapplicable — элементы, к которым проверка не применима.

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

Для глубокого профилирования важно корректно настраивать правила. Axe-core поддерживает:

  1. Выбор контекста сканирования Вместо всей страницы можно указать конкретный DOM-узел или селектор:
const mainContent = document.querySelector('#main');
axe.run(mainContent, {}, (err, results) => {
    console.log(results.violations);
});
  1. Отключение правил Не все проверки могут быть релевантны. Их можно отключать:
axe.configure({
    rules: [
        { id: 'color-contrast', enabled: false },
        { id: 'image-alt', enabled: true }
    ]
});
  1. Включение только нужных правил Иногда требуется тестировать только определённые аспекты доступности:
axe.run(document, {
    runOnly: {
        type: 'rule',
        values: ['color-contrast', 'image-alt']
    }
}, (err, results) => {
    console.log(results.violations);
});

Асинхронное профилирование

Axe-core полностью поддерживает промисы, что упрощает интеграцию в современные приложения:

async function runAccessibilityScan() {
    try {
        const results = await axe.run(document);
        console.table(results.violations.map(v => ({
            rule: v.id,
            impact: v.impact,
            nodes: v.nodes.length
        })));
    } catch (err) {
        console.error(err);
    }
}

runAccessibilityScan();

Такой подход позволяет легко обрабатывать результаты, фильтровать по уровню серьёзности (critical, serious, moderate, minor) и интегрировать сканирование в автоматические тесты.

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

Axe-core умеет работать с динамическим контентом, подгружаемым через JavaScript или AJAX:

  1. После изменения DOM необходимо повторно вызвать axe.run() для обновлённого узла.
  2. Для страниц с React, Vue или Angular рекомендуется использовать сканирование после рендера компонентов:
setTimeout(async () => {
    const results = await axe.run(document.querySelector('#dynamic-component'));
    console.log(results.violations);
}, 500);
  1. Возможна интеграция с MutationObserver для автоматического профилирования при изменении DOM:
const observer = new MutationObserver(async () => {
    const results = await axe.run(document);
    console.log(results.violations);
});
observer.observe(document.body, { childList: true, subtree: true });

Генерация и экспорт отчётов

Для учебных или аналитических целей важно сохранять результаты сканирования:

  • JSON-формат — удобен для последующей обработки:
const results = await axe.run(document);
const json = JSON.stringify(results, null, 2);
console.log(json);
  • HTML-отчёт — можно формировать с помощью сторонних библиотек или собственного форматирования:
function generateHTMLReport(results) {
    return `
        <h1>Accessibility Report</h1>
        ${results.violations.map(v => `
            <h2>${v.id} (${v.impact})</h2>
            <ul>
                ${v.nodes.map(node => `<li>${node.html}</li>`).join('')}
            </ul>
        `).join('')}
    `;
}
  • Интеграция с CI/CD — результаты можно использовать в Jenkins, GitHub Actions или GitLab CI, чтобы блокировать мерджи при критических нарушениях доступности.

Оптимизация профилирования

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

  1. Сканирование по селекторам, а не всей страницы.
  2. Отключение неактуальных правил.
  3. Использование runOnly и include/exclude для таргетинга определённых компонентов.
  4. Кеширование результатов при частых повторных сканированиях одинаковых элементов.

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

Axe-core легко комбинируется с Jest, Mocha, Cypress:

import 'cypress-axe';

describe('Проверка доступности', () => {
    it('страница соответствует WCAG', () => {
        cy.visit('/');
        cy.injectAxe();
        cy.checkA11y({
            runOnly: ['color-contrast', 'image-alt']
        });
    });
});

Такой подход позволяет автоматизировать обнаружение нарушений и включить их в процесс разработки без ручной проверки.

Работа с уровнями влияния

Каждое нарушение имеет уровень серьёзности:

  • critical — блокирующие элементы, требующие немедленного исправления.
  • serious — серьёзные нарушения, мешающие взаимодействию.
  • moderate — потенциальные проблемы, влияющие на UX.
  • minor — косметические недочёты.

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

const criticalViolations = results.violations.filter(v => v.impact === 'critical');

Кастомные правила

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

axe.configure({
    rules: [
        {
            id: 'custom-link-check',
            selector: 'a',
            any: [{ match: node => node.textContent.length > 0 }],
            enabled: true,
            tags: ['custom']
        }
    ]
});

Это позволяет расширять стандартный набор проверок и учитывать внутренние стандарты доступности.

Профилирование с использованием кастомных правил повышает точность тестирования и обеспечивает соответствие уникальным требованиям проекта.

Оглавление