Определение checks

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

Каждый check представляет собой самостоятельный модуль, который анализирует DOM и выявляет потенциальные нарушения. Проверки классифицируются по типу, цели и уровню серьёзности.

Структура checks

Каждый check в Axe-core описывается следующими компонентами:

  • id — уникальный идентификатор проверки. Используется для точной ссылки на проверку в отчётах.
  • evaluate — функция, выполняющая основную логику проверки. Она принимает узел DOM и возвращает результат проверки.
  • options — настройки, влияющие на работу проверки. Например, можно указать селекторы, которые нужно игнорировать.
  • tags — метки, связывающие проверку с определёнными стандартами и категориями (например, wcag2a, wcag2aa, best-practice).
  • enabled — флаг, определяющий активность проверки при запуске сканирования.

Пример структуры простого check:

const exampleCheck = {
  id: "image-alt-check",
  evaluate: (node) => {
    return node.tagName === "IMG" && !node.hasAttribute("alt")
      ? { result: "fail", message: "Изображение без атрибута alt" }
      : { result: "pass" };
  },
  options: {},
  tags: ["wcag2a", "best-practice"],
  enabled: true,
};

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

Checks в Axe-core делятся на несколько ключевых категорий:

  1. Семантические ошибки (Semantic checks) Проверяют правильность структуры HTML: использование заголовков, списков, таблиц и других элементов, влияющих на восприятие контента.

  2. Атрибуты и свойства (Attribute checks) Контролируют наличие обязательных атрибутов: alt для изображений, aria-label для интерактивных элементов, role для специальных контейнеров.

  3. Визуальные и контрастные проверки (Visual checks) Определяют читаемость элементов, контраст текста и фона, размеры интерактивных зон.

  4. Фокус и навигация (Focus checks) Анализируют логическую последовательность фокуса, доступность элементов через клавиатуру и соответствие стандартам ARIA.

  5. Best Practices Общие рекомендации по улучшению доступности, не всегда обязательные, но повышающие качество интерфейса.

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

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

Пример включения только выбранных checks:

const axeConfig = {
  runOnly: {
    type: "tag",
    values: ["wcag2a", "wcag2aa"]
  }
};

axe.run(document, axeConfig).then(results => {
  console.log(results.violations);
});

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

axe.configure({
  rules: [
    {
      id: "color-contrast",
      enabled: true,
      options: {
        minContrastRatio: 4.5
      }
    },
    {
      id: "image-alt",
      enabled: false
    }
  ]
});

Процесс выполнения check

  1. Сканирование DOM Axe-core проходит по каждому узлу документа, применяя набор активных checks.

  2. Применение evaluate Функция evaluate каждой проверки анализирует узел на соответствие правилам.

  3. Сбор результатов Каждое нарушение или успешная проверка добавляется в результирующий объект.

  4. Генерация отчёта После сканирования формируется структурированный отчёт с подробностями о каждом нарушении: id, описание, уровень серьёзности (minor, serious, critical), рекомендации по исправлению.

Примеры часто используемых checks

  • image-alt — проверка наличия атрибутов alt у изображений.
  • label — проверка корректного использования <label> для элементов формы.
  • color-contrast — проверка достаточного контраста текста и фона.
  • tabindex — анализ правильного использования атрибута tabindex для управления последовательностью фокуса.
  • aria-roles — проверка корректного использования ARIA-ролей.

Каждый из этих checks можно настраивать по уровню строгости, игнорируемым селекторам и другим параметрам.

Интеграция с тестами

Checks в Axe-core легко интегрируются с юнит-тестами и CI/CD:

import axe from 'axe-core';

describe('Accessibility tests', () => {
  it('should have no violations', async () => {
    const results = await axe.run(document.body);
    expect(results.violations).toHaveLength(0);
  });
});

Такой подход позволяет обеспечивать доступность на уровне разработки, выявляя нарушения до деплоя.

Расширение библиотеки через собственные checks

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

axe.register({
  id: "custom-heading-check",
  evaluate: (node) => {
    return node.tagName === "H2" && node.textContent.length < 5
      ? { result: "fail", message: "Заголовок слишком короткий" }
      : { result: "pass" };
  },
  tags: ["best-practice"],
  enabled: true
});

Кастомные проверки полностью интегрируются с отчётами и инструментами анализа.

Взаимосвязь checks и тегов

Теги (tags) в checks позволяют группировать проверки по стандартам и важности. Это удобно для:

  • выбора проверок для определённого уровня WCAG,
  • фильтрации violations в отчётах,
  • создания профилей сканирования для разных команд (например, дизайнеров или фронтенд-разработчиков).

Примеры тегов: wcag2a, wcag2aa, wcag21aa, best-practice, experimental.

Особенности производительности

Каждый check оптимизирован для быстрого обхода DOM, но при большом количестве сложных правил можно:

  • ограничить область проверки через селекторы,
  • отключить ненужные checks,
  • настроить фильтрацию по тегам.

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

Резюме

Модель checks является ядром Axe-core, объединяя:

  • проверку узлов DOM через evaluate,
  • конфигурацию и включение/отключение через options и enabled,
  • классификацию по тегам и уровням серьёзности.

Понимание структуры и возможностей checks позволяет гибко управлять доступностью веб-приложений и интегрировать автоматические проверки в любой процесс разработки.

Оглавление