Фильтрация по стандартам

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

Поддерживаемые стандарты

Axe-core из коробки поддерживает несколько стандартов доступности:

WCAG 2.0 / 2.1: основной международный стандарт, включающий уровни соответствия A, AA, AAA.
Section 508: стандарт для правительственных веб-ресурсов США.
VPAT (Voluntary Product Accessibility Template): шаблон для отчетности соответствия.

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

Настройка фильтрации

Фильтрация по стандартам осуществляется через объект конфигурации axe.run(). Основной параметр — runOnly, который определяет, какие правила применять:

import axe from 'axe-core';

axe.run(document, {
  runOnly: {
    type: 'tag',
    values: ['wcag2aa']  // фильтруем только правила уровня AA WCAG 2.1
  }
}).then(results => {
  console.log(results.violations);
});

Ключевые моменты:

type может принимать значения tag или rule, где tag фильтрует по категориям стандартов, а rule позволяет выбирать конкретные проверки.
values — массив тегов стандартов, которые должны быть включены в проверку.

Примеры тегов:

wcag2a — базовый уровень A
wcag2aa — уровень AA
wcag2aaa — уровень AAA
section508 — проверки по американскому стандарту

Комбинирование стандартов

Фильтрация поддерживает несколько тегов одновременно, что позволяет создавать комплексные конфигурации:

axe.run(document, {
  runOnly: {
    type: 'tag',
    values: ['wcag2aa', 'section508']
  }
}).then(results => {
  results.violations.forEach(v => {
    console.log(`${v.id} - ${v.description}`);
  });
});

Такой подход полезен, когда проект должен соответствовать сразу нескольким нормативам.

Исключение правил

Иногда необходимо исключить отдельные проверки, даже если они входят в выбранный стандарт. Для этого используется параметр rules с настройкой enabled:

axe.run(document, {
  runOnly: {
    type: 'tag',
    values: ['wcag2aa']
  },
  rules: {
    'color-contrast': { enabled: false }  // отключаем проверку контраста
  }
});

Преимущество такого метода — возможность гибко управлять тестами, не меняя стандарт полностью.

Динамическая фильтрация

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

const interactiveElements = Array.from(document.querySelectorAll('button, a, input'));

interactiveElements.forEach(el => {
  axe.run(el, {
    runOnly: {
      type: 'tag',
      values: ['wcag2aa']
    }
  }).then(results => {
    console.log(`Элемент ${el.tagName}:`, results.violations);
  });
});

Такой подход снижает количество ложных срабатываний и ускоряет процесс тестирования.

Использование кастомных тегов

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

axe.configure({
  rules: [
    {
      id: 'custom-alt-check',
      selector: 'img',
      any: [{
        id: 'has-alt',
        evaluate: node => !!node.getAttribute('alt')
      }],
      tags: ['custom-standard']
    }
  ]
});

axe.run(document, {
  runOnly: {
    type: 'tag',
    values: ['custom-standard']
  }
});

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