Блокировка при нарушениях

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

Установка и подключение

Для работы с Axe-core в проекте на JavaScript используется пакет axe-core. Установка через npm или yarn:

npm install axe-core
yarn add axe-core

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

import axe from 'axe-core';

Для Node.js можно использовать глобальный объект require:

const axe = require('axe-core');

После подключения необходимо инициализировать Axe для конкретного DOM-дерева. Например:

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

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

Метод axe.run возвращает объект с ключевыми разделами:

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

Каждое нарушение включает:

  • id — уникальный идентификатор правила.
  • impact — степень важности: minor, moderate, serious, critical.
  • description — описание нарушения.
  • nodes — конкретные элементы DOM, на которых выявлено нарушение.

Пример вывода:

{
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "description": "Недостаточная контрастность текста",
      "nodes": [
        {
          "html": "<span style='color:#777'>Текст</span>",
          "target": ["#text1"]
        }
      ]
    }
  ]
}

Автоматическая блокировка при нарушениях

Для обеспечения строгого соответствия стандартам WCAG можно реализовать блокировку запуска функционала при выявленных нарушениях. Основная логика заключается в проверке результатов Axe перед выполнением критичных операций:

async function runAccessibilityCheck() {
    return new Promise((resolve, reject) => {
        axe.run(document, {}, (err, results) => {
            if (err) return reject(err);
            if (results.violations.length > 0) {
                reject(new Error('Обнаружены нарушения доступности'));
            } else {
                resolve('Все проверки пройдены');
            }
        });
    });
}

runAccessibilityCheck()
    .then(message => {
        console.log(message);
        // выполнение дальнейших действий
    })
    .catch(error => {
        console.error(error.message);
        // блокировка функционала или уведомление команды
    });

Важным моментом является категоризация нарушений по уровню влияния. Можно настроить блокировку только для serious и critical:

const criticalViolations = results.violations.filter(v => 
    v.impact === 'serious' || v.impact === 'critical'
);
if (criticalViolations.length > 0) {
    throw new Error('Критические нарушения доступности обнаружены');
}

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

Для автоматизации проверки доступности в процессе CI/CD библиотека Axe-core часто интегрируется с Jest или Cypress.

Пример для Jest:

import 'axe-core/axe.min.js';

test('доступность страницы', async () => {
    const results = await new Promise((resolve, reject) => {
        axe.run(document, {}, (err, res) => err ? reject(err) : resolve(res));
    });
    expect(results.violations.length).toBe(0);
});

Пример для Cypress:

import 'cypress-axe';

cy.visit('/home');
cy.injectAxe();
cy.checkA11y(null, {
    includedImpacts: ['serious', 'critical']
});

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

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

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

const options = {
    rules: {
        'color-contrast': { enabled: true },
        'label': { enabled: false } // отключение проверки
    }
};

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

Также возможна создание кастомных правил, что полезно для специфичных интерфейсных компонентов. Каждое правило описывается через селекторы, проверку и сообщение об ошибке.

Оптимизация и производительность

Проверка большого DOM может занимать значительное время. Для оптимизации:

  • Проверять только ключевые страницы или критичные компоненты.
  • Использовать селекторы ограниченного контекста:
axe.run(document.querySelector('#main-content'), {}, callback);
  • Кэшировать результаты или выполнять проверку на стадии сборки, а не на каждом рендере.

Практические рекомендации по блокировке

  1. Сегментация по приоритету: блокировать только критические и серьёзные нарушения.
  2. Логирование нарушений: сохранять подробный отчет для разработчиков.
  3. Автоматическое уведомление команды: интеграция с Slack или email при обнаружении ошибок.
  4. Регулярная проверка компонентов: особенно после изменения UI или добавления новых элементов.

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

Оглавление