Правила доступности и их структура

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

Axe-core интегрируется с JavaScript через несколько способов: как библиотека для браузера, через Node.js для серверного тестирования и через плагины для популярных фреймворков и инструментов тестирования, таких как Jest, Cypress, Playwright.

Структура правил

Каждое правило Axe-core представляет собой объект с несколькими ключевыми свойствами:

  • id – уникальный идентификатор правила. Используется для однозначного обращения к правилу в отчётах и настройках.
  • description – текстовое описание проблемы, которую проверяет правило. Обычно включает ссылку на соответствующий критерий WCAG.
  • help – краткая подсказка по исправлению обнаруженной ошибки.
  • tags – массив категорий и тегов, например wcag2a, wcag2aa, wcag21aa, что позволяет фильтровать правила по уровню соответствия.
  • impact – уровень критичности нарушения: critical, serious, moderate, minor.
  • selector – CSS-селектор или XPath для элементов, к которым применимо правило.
  • evaluate – функция, выполняющая проверку. Возвращает true или false в зависимости от соответствия элемента правилу.
  • any / all / none – условия логического объединения проверок для сложных правил.

Пример структуры правила:

{
  id: "color-contrast",
  description: "Проверка контрастности текста и фона",
  help: "Использовать контраст не менее 4.5:1 для обычного текста",
  tags: ["wcag2aa", "color"],
  impact: "serious",
  selector: "body *",
  evaluate: function(node) {
    // Логика проверки контраста
    return nodeHasSufficientContrast(node);
  }
}

Категории правил

Axe-core группирует проверки по функциональным и тематическим категориям:

  1. Контраст и визуальная доступность – проверка контраста текста, фона, фокусных элементов.
  2. Семантика HTML и ARIA – корректное использование тегов
  3. Формы и элементы ввода – наличие label для , корректное использование aria-describedby, aria-required.
  4. Навигация и фокусировка – проверка логики табуляции, последовательности фокуса, видимости элементов при фокусе.
  5. Медиа и альтернативные описания – наличие alt у изображений, субтитров для видео, описаний для сложных графиков.

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

Взаимодействие с DOM

Axe-core применяет правила к дереву DOM и анализирует свойства элементов. Основные методы взаимодействия:

  • axe.run([context], [options]) – запуск проверки для всего документа или заданного контекста.
  • context – объект, задающий селекторы или элементы для проверки.
  • options – объект с настройками: включение/отключение правил, настройка уровней доступности, фильтры по тегам.

Пример вызова:

axe.run(document, {
  runOnly: {
    type: "tag",
    values: ["wcag2aa"]
  },
  rules: {
    "color-contrast": { enabled: true },
    "label": { enabled: true }
  }
}).then(results => {
  console.log(results.violations);
});

Результат содержит массив объектов violations, каждый из которых привязан к конкретному правилу и элементам DOM, нарушающим его. Объект включает:

  • id – идентификатор правила, нарушенного на странице.
  • impact – уровень критичности.
  • description и help – текстовое описание и рекомендации.
  • nodes – массив объектов с конкретными элементами, селекторами и HTML-кодом, вызывающими нарушение.

Настройка и расширяемость

Axe-core позволяет создавать собственные правила и расширять существующие, задавая:

  • id, description, help – идентификатор и описание.
  • tags – теги для фильтрации.
  • selector – CSS-селекторы для поиска элементов.
  • evaluate – функцию проверки элемента или группы элементов.

Пользовательские правила интегрируются через axe.configure(), что позволяет включать их в стандартный процесс тестирования.

Практическая организация тестов

Для крупных проектов Axe-core применяют в связке с фреймворками тестирования:

  • Unit/Integration тесты – проверка отдельных компонентов, например, кнопок, форм, модальных окон.
  • E2E тесты – интеграция с Cypress или Playwright для тестирования полного пользовательского сценария.
  • CI/CD интеграция – автоматическое уведомление команды о нарушениях доступности на стадии сборки.

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

Оглавление