Анализ проблемных правил

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

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

Типы правил и их классификация

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

  • Тип проверки

    • Семантические ошибки — проверка корректности использования HTML-тегов, ARIA-атрибутов, роли элементов.
    • Визуальные ошибки — анализ контрастности текста, видимости элементов, доступности цветовых схем.
    • Навигационные ошибки — проверка логики последовательности фокуса, правильности использования табуляции и ссылок.
    • Медиа и интерактивные элементы — проверка альтернативного текста для изображений, подписи для видео и управления мультимедиа.

  • Уровень критичности Каждое правило имеет уровень серьёзности: critical, serious, moderate, minor, что позволяет приоритизировать исправление ошибок.

  • Тип воздействия Некоторые правила являются blocking (влияют на базовую доступность), другие — advisory (рекомендательные).

Принципы работы анализатора

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

  1. Сбор элементов Библиотека проходит по всем узлам DOM, отфильтровывает скрытые и недоступные для пользователя элементы.

  2. Применение правил Каждое правило проверяет соответствующие атрибуты, стили и структуру документа.

  3. Формирование отчёта Для каждого нарушения формируется объект с полями:

    • id — идентификатор правила;
    • impact — уровень критичности;
    • description — подробное описание ошибки;
    • help — рекомендации по исправлению;
    • nodes — список элементов, где обнаружена ошибка.

Типовые проблемные правила

Контраст текста

  • Проверяет соотношение цвета текста и фона.
  • Требования WCAG: минимум 4.5:1 для обычного текста и 3:1 для крупного.
  • Ошибки возникают при использовании слишком светлого текста на светлом фоне или наоборот.
  • Особенности реализации: Axe-core анализирует как inline-стили, так и наследуемые CSS-правила.

Недостаток альтернативного текста

  • Проверяет и на наличие alt атрибута.
  • Для интерактивных элементов, например кнопок с изображениями, alt должен быть информативным.
  • Отсутствие альтернативного текста нарушает восприятие контента пользователями скринридеров.

Некорректное использование ARIA

  • Проверяет соответствие ARIA-ролей, свойств и состояний стандартам WAI-ARIA.
  • Примеры ошибок: использование роли button на
    , несоответствие aria-checked с фактическим состоянием элемента.
  • Axe-core валидирует дерево ARIA, выявляя несоответствия, которые могут привести к некорректному поведению вспомогательных технологий.

Проблемы с фокусом и навигацией

  • Элемент должен быть доступен через клавиатуру и иметь видимый фокус.
  • Ошибки: элементы с tabindex="-1" без причин, скрытые элементы в последовательности фокуса, нарушение логики навигации.
  • Axe-core эмулирует табуляцию, выявляя недоступные или некорректно расположенные элементы.

Дублирование id

  • Каждому элементу в документе должен соответствовать уникальный id.
  • Ошибка дублирования приводит к сбоям при привязке label, управлении фокусом или скриптах.
  • Axe-core сканирует весь DOM и фиксирует повторяющиеся идентификаторы.

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

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

import axe from 'axe-core';

axe.run(document, {
  rules: {
    'color-contrast': { enabled: true },
    'image-alt': { enabled: false }
  }
}).then(results => {
  console.log(results.violations);
});
  • Можно отключать правила, которые не актуальны для конкретного проекта.
  • Кастомные правила реализуются через функции проверки DOM с возвращением объекта violations.
  • Поддерживаются тестовые сценарии с конкретными элементами, что позволяет интегрировать проверки в Jest, Mocha или Cypress.

Интеграция в процессы разработки

  • CI/CD: автоматический запуск проверки при коммите или pull request.
  • E2E тестирование: проверка доступности при навигации по страницам приложения.
  • Линтеры и редакторы: подключение к ESLint через axe-core/CLI или плагины для VS Code.

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

Примеры отчетов

Каждое нарушение включает подробную информацию:

{
  "id": "color-contrast",
  "impact": "serious",
  "description": "Текст имеет низкий контраст относительно фона",
  "help": "Увеличить контраст текста и фона до соотношения 4.5:1",
  "nodes": [
    {
      "html": "
Пример текста
",
      "target": ["p"]
    }
  ]
}

Такой формат позволяет быстро идентифицировать проблемные элементы, интегрировать их в баг-трекеры и планировать исправления по приоритетам.

Оглавление