Комплексный подход

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

Библиотека может интегрироваться с браузерами через Puppeteer, Selenium, Cypress, Jest и другие тестовые фреймворки. Основная идея заключается в анализе DOM-структуры страницы, проверке атрибутов ARIA, цветовых контрастов, семантики элементов и корректного использования интерактивных элементов.

const axe = require('axe-core');
const { JSDOM } = require('jsdom');

const dom = new JSDOM(`<button>Click me</button>`);
axe.run(dom.window.document, {}, (err, results) => {
    if (err) throw err;
    console.log(results.violations);
});

В примере выше библиотека сканирует документ на предмет нарушений доступности и возвращает массив violations с детальной информацией о каждом обнаруженном нарушении.

Конфигурация правил и кастомизация

Axe-core предоставляет гибкую систему правил, которые можно включать или отключать, а также настраивать с учётом специфики проекта. Каждое правило имеет уникальный идентификатор и определяет, какие проверки будут выполняться.

const options = {
    runOnly: {
        type: 'tag',
        values: ['wcag2aa', 'section508']
    },
    rules: {
        'color-contrast': { enabled: true },
        'label': { enabled: false }
    }
};

axe.run(document, options).then(results => {
    console.log(results.violations);
});

Ключевые моменты конфигурации:

  • runOnly позволяет ограничить проверку только определёнными тегами правил (например, wcag2aa).
  • rules даёт возможность отключать или включать конкретные проверки в зависимости от требований проекта.
  • Настройки позволяют интегрировать Axe-core даже в сложные динамические интерфейсы с минимальным количеством ложных срабатываний.

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

Cypress: Axe-core интегрируется через специальный плагин cypress-axe. После установки и подключения в тестах можно выполнять автоматические проверки доступности после каждого рендера компонента.

import 'cypress-axe';

describe('Accessibility tests', () => {
    it('Home page should have no violations', () => {
        cy.visit('/');
        cy.injectAxe();
        cy.checkA11y();
    });
});

Jest: Для unit-тестирования компонентов React или других библиотек можно использовать jest-axe.

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

expect.extend(toHaveNoViolations);

test('Button component should be accessible', async () => {
    const { container } = render(<button>Click me</button>);
    const results = await axe(container);
    expect(results).toHaveNoViolations();
});

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

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

Axe-core возвращает объект с ключевыми полями:

  • violations — массив нарушений, содержащий id, impact (уровень серьёзности), описание проблемы и рекомендации по исправлению.
  • incomplete — массив проверок, которые не удалось полностью выполнить.
  • passes — список успешно пройденных проверок.

Пример обработки результатов:

axe.run(document).then(results => {
    results.violations.forEach(v => {
        console.log(`Проблема: ${v.id}`);
        console.log(`Влияние: ${v.impact}`);
        console.log(`Элементы: ${v.nodes.map(node => node.html).join(', ')}`);
        console.log('---');
    });
});

Особое внимание стоит уделять полю impact, которое классифицирует проблемы по критичности: minor, moderate, serious, critical. Это помогает приоритизировать исправления и сосредоточиться на критических нарушениях в первую очередь.

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

Кастомные правила: Axe-core позволяет создавать собственные правила проверки, что полезно для уникальных компонентов интерфейса или специфических требований проекта.

axe.configure({
    rules: [
        {
            id: 'custom-heading',
            selector: 'h1',
            any: [{
                id: 'has-text',
                evaluate: node => node.textContent.trim().length > 0
            }],
            enabled: true
        }
    ]
});

Асинхронная проверка динамических страниц: При работе с приложениями на React, Vue или Angular важно выполнять проверку после полной отрисовки компонентов, иначе библиотека может пропустить элементы, которые ещё не появились в DOM.

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

Рекомендации по использованию

  • Включать Axe-core в автоматические тесты на всех уровнях: unit, интеграционные и end-to-end.
  • Использовать фильтры по тегам и критичности, чтобы фокусироваться на основных нарушениях.
  • Сохранять отчёты в CI/CD и визуализировать их для команды разработчиков.
  • Постоянно обновлять конфигурацию и правила с учётом изменений стандартов WCAG и структуры проекта.

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

Оглавление