Частичные проверки

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

Основы частичных проверок

Частичная проверка выполняется с помощью метода run, которому можно передать контекст — указание на область DOM, подлежащую аудиту. Контекст может быть представлен:

CSS-селектором, который выбирает нужные элементы:

axe.run('.main-content', options).then(results => {
    console.log(results.violations);
});

DOM-элементом, выбранным через document.querySelector или аналогичные методы:

const section = document.querySelector('#header');
axe.run(section, options).then(results => {
    console.log(results.violations);
});

Массивом DOM-элементов, если требуется проверить несколько отдельных блоков:

const blocks = [document.querySelector('#nav'), document.querySelector('#footer')];
axe.run(blocks, options).then(results => {
    console.log(results.violations);
});

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

Метод axe.run принимает два аргумента:

Контекст — область страницы для проверки (по умолчанию весь документ).
Опции — объект с настройками, позволяющими:

Исключать или включать определённые правила:

const options = {
    runOnly: {
        type: 'rule',
        values: ['color-contrast', 'image-alt']
    }
};

Ограничить аудит по тегам, классам или ролям:

const options = {
    elementRef: {
        selector: '.interactive'
    }
};

Управлять глубиной проверки вложенных элементов:

const options = {
    include: [['#main', '#sidebar']],
    exclude: [['#ads']]
};

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

Частичная проверка особенно полезна при работе с одностраничными приложениями (SPA), где содержимое страницы динамически изменяется. Для таких случаев применяется повторный вызов axe.run только на новых или изменённых элементах:

const newSection = document.querySelector('#dynamic-section');
axe.run(newSection).then(results => {
    if (results.violations.length > 0) {
        console.log('Обнаружены проблемы доступности в динамическом блоке');
        console.table(results.violations);
    }
});

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

Фильтрация и обработка результатов

После выполнения частичной проверки метод возвращает объект с результатами:

violations — массив обнаруженных нарушений WCAG.
passes — элементы, прошедшие проверку.
incomplete — частично проверенные элементы, требующие дополнительного анализа.
inapplicable — элементы, к которым правила неприменимы.

Применение фильтрации позволяет выделить только значимые проблемы:

axe.run(section).then(results => {
    const criticalIssues = results.violations.filter(v => v.impact === 'critical');
    console.log('Критические нарушения:', criticalIssues);
});

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

Частичные проверки Axe-core легко интегрируются с инструментами Jest, Cypress или Mocha для автоматизации тестирования:

it('Проверка доступности футера', async () => {
    const footer = document.querySelector('#footer');
    const results = await axe.run(footer);
    expect(results.violations.length).toBe(0);
});

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