Организация тестов

Axe-core — это библиотека для автоматизированного тестирования доступности веб-приложений на JavaScript. Установка осуществляется через npm:

npm install axe-core --save-dev

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

import axe from 'axe-core';

Для работы с браузерной средой часто используют скрипт из CDN:

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

Инициализация и конфигурация

Базовая инициализация Axe-core выполняется через функцию 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 — включение или отключение конкретных правил, возможность их настройки.
  • includedImpacts — фильтр по уровню критичности (minor, moderate, serious, critical).
  • reporter — выбор формата отчёта (v2, v3, csv, html).

Организация тестов в проекте

Для систематизации тестов доступности в проекте используют подход модульного или интеграционного тестирования.

Модульные тесты

Каждый компонент тестируется отдельно, что упрощает локализацию ошибок:

import { mount } from '@vue/test-utils';
import axe from 'axe-core';
import MyComponent from './MyComponent.vue';

test('Component should pass accessibility checks', async () => {
  const wrapper = mount(MyComponent);
  const results = await axe.run(wrapper.element);
  expect(results.violations).toHaveLength(0);
});
  • Преимущества: быстрый фидбек, тестируются только изменения в компоненте.
  • Недостатки: не учитываются контексты использования компонента в разных частях приложения.

Интеграционные тесты

Тестирование объединённых частей интерфейса, страниц или шаблонов:

import { render } from '@testing-library/react';
import axe from 'axe-core';
import App from './App';

test('Full page accessibility', async () => {
  const { container } = render(<App />);
  const results = await axe.run(container);
  expect(results.violations).toHaveLength(0);
});
  • Позволяет выявлять проблемы, возникающие только при взаимодействии нескольких компонентов.
  • Рекомендуется запускать на ключевых страницах и в случаях значительных изменений интерфейса.

Настройка CI/CD

Для интеграции тестов Axe-core в CI/CD используют Node.js скрипты или плагины для популярных фреймворков:

const { exec } = require('child_process');
exec('node runAxeTests.js', (error, stdout, stderr) => {
  if (error) {
    console.error(`Ошибка выполнения: ${error.message}`);
    process.exit(1);
  }
  console.log(stdout);
});
  • Автоматическое выполнение при каждом коммите или pull request.
  • Генерация отчётов в формате JSON или HTML для дальнейшего анализа.
  • Возможность выставлять fail build, если критические ошибки доступны (critical или serious).

Отчёты и анализ результатов

Axe-core возвращает объект с массивом violations, содержащим подробные данные о каждой проблеме:

{
  "id": "color-contrast",
  "impact": "serious",
  "description": "Text elements must have sufficient color contrast",
  "nodes": [
    {
      "html": "<button style='color:#aaa;background:#fff;'>Click me</button>",
      "target": ["button"],
      "failureSummary": "Text element has insufficient color contrast"
    }
  ]
}

Рекомендации по работе с результатами:

  • Сортировка по impact для приоритизации исправлений.
  • Создание отчётов для дизайнеров и разработчиков отдельно.
  • Автоматическое игнорирование известных false-positive через конфигурацию правил.

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

  • Пользовательские правила: разработка собственных проверок через API Axe-core.
  • Асинхронное тестирование: интеграция с динамическими SPA, где DOM обновляется после загрузки данных.
  • Взаимодействие с другими библиотеками тестирования: например, Cypress или Puppeteer, позволяя выполнять тесты в реальном браузере с полной визуализацией нарушений.

Примеры интеграции с Cypress

import 'cypress-axe';

describe('Accessibility tests', () => {
  it('Main page should be accessible', () => {
    cy.visit('/');
    cy.injectAxe();
    cy.checkA11y(null, {
      includedImpacts: ['critical', 'serious']
    });
  });
});
  • cy.injectAxe() добавляет Axe-core в контекст страницы.
  • cy.checkA11y() выполняет проверку доступности с фильтрацией по уровню критичности и конкретным правилам.

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

Оглавление