Приоритетные правила

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

Библиотека может использоваться как в браузере через консоль разработчика, так и в автоматизированных тестах с использованием Node.js, Puppeteer, Cypress и других инструментов.

Подключение и инициализация

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

npm install axe-core

Или загрузить напрямую через CDN:

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

Инициализация и запуск анализа в браузере выглядит следующим образом:

axe.run(document, {}, function(err, results) {
  if (err) throw err;
  console.log(results.violations);
});

Параметры функции axe.run:

  • context — область документа для проверки (по умолчанию весь document).
  • options — объект с настройками проверок и правил.
  • callback — функция обратного вызова, принимающая ошибки и результаты.

Структура результатов

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

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

Каждое нарушение содержит:

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

Приоритетные правила

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

Уровни влияния (impact):

  1. Critical — критические ошибки, полностью нарушающие доступность (например, отсутствие альтернативного текста у изображений или недоступные интерактивные элементы для клавиатуры).
  2. Serious — серьёзные проблемы, мешающие части пользователей взаимодействовать с контентом (например, контраст текста и фона ниже допустимого значения).
  3. Moderate — умеренные нарушения, влияющие на удобство использования, но не блокирующие доступ (например, неверное использование ARIA-ролей, которое не ломает полностью функционал).
  4. Minor — незначительные несоответствия, которые не критичны, но лучше исправить для соответствия стандартам.

Использование фильтрации по уровню позволяет строить приоритетный план исправлений:

const criticalViolations = results.violations.filter(v => v.impact === 'critical');
const seriousViolations = results.violations.filter(v => v.impact === 'serious');

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

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

Пример настройки:

const options = {
  runOnly: {
    type: 'tag',
    values: ['wcag2a', 'wcag2aa'] // проверять только правила WCAG 2.0 уровней A и AA
  },
  rules: {
    'color-contrast': { enabled: true },
    'image-alt': { enabled: true }
  }
};

axe.run(document, options, (err, results) => {
  if (err) throw err;
  console.log(results.violations);
});

Особенности настройки:

  • Можно использовать теги для группировки правил (wcag2a, wcag2aa, wcag21aa, best-practice).
  • Отключение правил осуществляется через enabled: false.
  • Некоторые правила допускают тонкую настройку через объект options.rules[ruleId].options.

Интеграция с автоматизированным тестированием

Для повышения эффективности тестирования доступности Axe-core интегрируется с современными инструментами:

  • Jest + Puppeteer — запуск тестов на страницах в реальном браузере.
  • Cypress — проверка доступности во время end-to-end тестирования.
  • Playwright — аналогично Puppeteer, с расширенной поддержкой браузеров.

Пример использования с Cypress:

import 'cypress-axe';

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

Использование приоритетных правил позволяет автоматически отмечать критические и серьёзные ошибки как блокирующие, а умеренные и незначительные — как предупреждения.

Вывод

Axe-core обеспечивает детальную диагностику доступности веб-приложений, позволяя структурировать результаты по критичности нарушений. Система приоритетных правил помогает фокусироваться на исправлении наиболее значимых ошибок, повышая качество и соответствие стандартам WCAG. Гибкая настройка и интеграция с инструментами тестирования делают библиотеку мощным инструментом в процессе разработки и аудита интерфейсов.

Оглавление