WCAG 2.1 и 2.2

Axe-core — это мощная библиотека для автоматизированного тестирования доступности веб-приложений. Она реализует проверку соответствия стандартам WCAG 2.1 и 2.2, анализируя структуру DOM, свойства элементов и их поведение. Основное назначение — выявление проблем доступности, которые могут повлиять на пользователей с ограниченными возможностями. Библиотека предоставляется как отдельный JavaScript-модуль и может интегрироваться с браузером, тестовыми фреймворками и CI/CD-процессами.

Ключевые преимущества Axe-core:

  • Автоматизация проверок: позволяет проводить аудит доступности без ручного анализа каждой страницы.
  • Поддержка современных стандартов: включает правила WCAG 2.1 и расширения, соответствующие WCAG 2.2.
  • Гибкость интеграции: может использоваться в браузере через axe-core API, с инструментами тестирования вроде Cypress, Jest, Puppeteer.

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

Для использования Axe-core в проекте достаточно установить пакет через npm:

npm install axe-core

После установки библиотека доступна для импорта в любом JavaScript-коде:

import axe from 'axe-core';

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

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

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

Основной API и принципы работы

1. Инициализация проверки

Проверка начинается с вызова функции axe.run, которая принимает два параметра:

  • элемент или селектор: область DOM, которую нужно проверить.
  • опции: конфигурация правил и уровней доступности.

Пример базовой проверки всей страницы:

axe.run(document, {
  runOnly: {
    type: 'tag',
    values: ['wcag2aa'] // проверка на соответствие WCAG 2.1 уровня AA
  }
}).then(results => {
  console.log(results.violations); // вывод найденных нарушений
});

2. Структура результата

Результат проверки содержит следующие ключевые поля:

  • violations: массив найденных нарушений с указанием элемента, причины и рекомендаций.
  • passes: массив элементов, прошедших проверку.
  • incomplete: проверки, которые не удалось полностью выполнить.
  • inapplicable: правила, которые не применимы к текущей странице.

Каждое нарушение включает:

  • id: идентификатор правила.
  • impact: уровень влияния на доступность (critical, serious, moderate, minor).
  • description: текстовое описание проблемы.
  • helpUrl: ссылка на документацию с рекомендациями.

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

Axe-core предоставляет возможность включать или исключать отдельные правила. Для соответствия WCAG 2.1 и 2.2 используются теги:

  • wcag2a — уровень A
  • wcag2aa — уровень AA
  • wcag2aaa — уровень AAA
  • wcag21aa, wcag22aa — специфические для WCAG 2.1 и 2.2

Пример фильтрации по тегам:

axe.run(document, {
  runOnly: {
    type: 'tag',
    values: ['wcag21aa', 'wcag22aa']
  }
});

Также возможно полностью отключить отдельные правила:

axe.run(document, {
  rules: {
    'color-contrast': { enabled: false } // игнорирование проверки контрастности
  }
});

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

1. Cypress

Для автоматизации тестирования в рамках CI/CD удобно использовать Cypress с плагином cypress-axe:

import 'cypress-axe';

cy.visit('/page');
cy.injectAxe();
cy.checkA11y(null, {
  runOnly: ['wcag21aa']
});

2. Jest и Puppeteer

В headless-тестах с Jest и Puppeteer Axe-core позволяет проводить проверки без открытия браузера в интерфейсе:

const { AxePuppeteer } = require('axe-puppeteer');

const results = await new AxePuppeteer(page)
  .include('main')
  .withTags(['wcag21aa', 'wcag22aa'])
  .analyze();

console.log(results.violations);

Практические рекомендации по анализу результатов

  • Сортировка нарушений по impact позволяет фокусироваться на критических проблемах.
  • Важно учитывать incomplete и inapplicable проверки: не все правила применимы ко всем элементам.
  • Отдельное внимание стоит уделять динамическому контенту: Axe-core анализирует текущий DOM, поэтому асинхронно загружаемые элементы должны быть учтены.
  • Комбинирование автоматизированной проверки с ручной аудиторией улучшает полноту проверки соответствия WCAG 2.1/2.2.

Особенности поддержки WCAG 2.2

WCAG 2.2 вводит новые критерии доступности, такие как:

  • Улучшения для пользователей с когнитивными и моторными ограничениями.
  • Новые требования к интерактивным элементам (например, минимальная зона клика).

Axe-core регулярно обновляется для соответствия этим стандартам. Использование тегов wcag22aa позволяет проверить соблюдение новых требований без изменения существующей конфигурации тестов.

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

  • Локальная кастомизация правил: можно создавать свои проверки с использованием API axe.configure.
  • Логирование и экспорт результатов: результаты проверки можно сериализовать в JSON для хранения и анализа.
  • Интеграция с CI/CD: ошибки доступности можно превращать в задачи в системах контроля качества и трекинга багов.
axe.configure({
  branding: { brand: 'MyApp' },
  rules: [
    { id: 'custom-rule', enabled: true }
  ]
});

Эта гибкость делает Axe-core универсальным инструментом для обеспечения доступности веб-приложений на уровне соответствия WCAG 2.1 и 2.2.

Оглавление