Пороговые значения

Для работы с библиотекой необходимо установить её через npm:

npm install axe-core

После установки библиотеку можно подключить в проекте:

import axe from 'axe-core';

Для тестирования веб-страницы в браузере можно использовать глобальный объект window.axe. В Node.js среде подключение и настройка происходит через API библиотеки.

Основы использования

Библиотека Axe-core предназначена для автоматизированного аудита доступности веб-страниц. Основной объект — axe — предоставляет метод run, который выполняет проверку указанного DOM-узла или всей страницы:

axe.run(document, {
  runOnly: {
    type: 'tag',
    values: ['wcag2a', 'wcag2aa']
  }
}).then(results => {
  console.log(results.violations);
});
  • document — корневой элемент для проверки.
  • runOnly — фильтр правил по тегам или идентификаторам.
  • results.violations — массив найденных нарушений.

Важно учитывать, что Axe-core работает асинхронно, возвращая Promise с результатами аудита.

Настройка пороговых значений

Пороговые значения в Axe-core позволяют определять критичность нарушений и управлять обработкой результатов. По умолчанию библиотека классифицирует нарушения по уровням: critical, serious, moderate, minor.

Пример фильтрации результатов по пороговому уровню:

axe.run(document).then(results => {
  const threshold = 'serious';
  const filteredViolations = results.violations.filter(v => v.impact === threshold || v.impact === 'critical');
  console.log(filteredViolations);
});
  • impact — уровень влияния нарушения на доступность.
  • Порог можно задавать как строку ('critical') или массив уровней (['critical', 'serious']).

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

Расширенная конфигурация

Axe-core позволяет гибко настраивать проверку через объект config:

const config = {
  rules: {
    'color-contrast': { enabled: true },
    'label': { enabled: false }
  },
  reporter: 'v2',
  runOnly: {
    type: 'tag',
    values: ['wcag21aa']
  }
};

axe.run(document, config).then(results => {
  console.log(results);
});
  • rules — включение и отключение отдельных правил.
  • reporter — формат отчёта (v1, v2, json).
  • runOnly — уточнение проверок по стандартам.

Для пороговой фильтрации удобно использовать кастомные функции:

function filterByThreshold(violations, threshold) {
  const levels = ['minor', 'moderate', 'serious', 'critical'];
  const thresholdIndex = levels.indexOf(threshold);
  return violations.filter(v => levels.indexOf(v.impact) >= thresholdIndex);
}

axe.run(document).then(results => {
  const seriousViolations = filterByThreshold(results.violations, 'serious');
  console.log(seriousViolations);
});

Такой подход позволяет динамически менять пороговую границу без модификации конфигурации каждого правила.

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

Для автоматизированного тестирования Axe-core хорошо сочетается с Jest, Mocha и Cypress. Пример с Jest:

import { configureAxe, axe } from 'axe-core';

test('Проверка доступности страницы', async () => {
  const results = await axe.run(document);
  const violations = results.violations.filter(v => v.impact === 'critical');
  expect(violations).toHaveLength(0);
});
  • Использование фильтрации по порогу позволяет тестам быть более избирательными.
  • Можно объединять с визуальными тестами и другими статическими анализаторами.

Использование в CI/CD

Пороговые значения особенно важны при автоматизации:

  1. Сбор критических нарушений: тесты должны падать только при critical impact.
  2. Отчёты для команды: serious и moderate нарушения логируются для исправления в будущем.
  3. Автоматическое игнорирование minor: минимизирует ложные срабатывания в процессе разработки.

Пример скрипта для CI:

axe.run(document).then(results => {
  const critical = results.violations.filter(v => v.impact === 'critical');
  if (critical.length > 0) {
    console.error('Критические нарушения доступности найдены', critical);
    process.exit(1);
  }
});

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

Вывод по пороговым значениям

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

  • Выделять критические ошибки.
  • Гибко фильтровать результаты.
  • Интегрировать проверки в автоматизированные процессы.

Использование порогов снижает шум тестов и делает аудит доступности управляемым и масштабируемым.

Оглавление