GitHub Actions

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

Установка и подключение

Для работы с Axe-core в JavaScript используется пакет axe-core. Установка через npm выполняется командой:

npm install axe-core --save-dev

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

const axe = require('axe-core');

Для использования в браузере можно импортировать через CDN:

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

Инициализация и запуск тестирования

Для проверки доступности на странице необходимо вызвать функцию axe.run(), передав в неё объект с настройками и целевой DOM-элемент:

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

Ключевые моменты:

  • runOnly позволяет ограничить проверку конкретными тегами или стандартами.
  • Результаты results.violations содержат массив объектов с описанием нарушений, их местоположением и рекомендациями по исправлению.

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

Axe-core предоставляет возможность включать или исключать отдельные правила. Это полезно для адаптации тестирования под конкретный проект:

axe.run(document, {
  rules: {
    'color-contrast': { enabled: false },
    'image-alt': { enabled: true }
  }
});
  • enabled: false — правило отключается.
  • enabled: true — правило активируется.

Также можно настраивать параметры отдельных правил, например минимальный коэффициент контрастности:

axe.configure({
  rules: [
    {
      id: 'color-contrast',
      options: { contrastRatio: 4.5 }
    }
  ]
});

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

Axe-core широко используется вместе с Jest, Mocha, Cypress и другими инструментами для автоматического тестирования.

Пример с Jest:

const { toHaveNoViolations } = require('jest-axe');
expect.extend(toHaveNoViolations);

test('страница доступна', async () => {
  const results = await axe.run(document.body);
  expect(results).toHaveNoViolations();
});

Пример с Cypress:

cy.visit('/example-page');
cy.injectAxe();
cy.checkA11y();
  • cy.injectAxe() внедряет скрипт Axe-core в тестируемую страницу.
  • cy.checkA11y() выполняет проверку доступности с использованием конфигурации по умолчанию или кастомной.

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

Объект results содержит несколько ключевых полей:

  • violations — массив нарушений, каждое из которых содержит:

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

  • passes — массив правил, которые успешно пройдены.

  • incomplete — правила, для которых невозможно сделать окончательный вывод.

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

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

axe.run(document.querySelector('#main-content'));

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

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

  • Локализация: axe-core поддерживает вывод сообщений на разных языках.
  • Расширение правил: можно добавлять собственные правила, описывая их в формате JSON.
  • Динамический контент: библиотека отслеживает изменения DOM и позволяет повторно запускать проверки для динамических элементов.

Практические советы

  1. Регулярное использование в процессе разработки предотвращает накопление ошибок доступности.
  2. Интеграция с CI/CD позволяет поддерживать стандарты доступности без ручного тестирования.
  3. Фокус на ключевых правилах (color-contrast, image-alt, label) помогает быстро улучшить UX для пользователей с ограничениями.

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

Оглавление