Структура проекта

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

Ключевыми преимуществами являются:

• Полная автоматизация проверки доступности.
• Расширяемость за счет пользовательских правил и конфигураций.
• Совместимость с современными инструментами тестирования: Jest, Cypress, Selenium.

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

Для Node.js-проектов используется пакет axe-core. Установка через npm:

npm install axe-core --save-dev

Для браузерного окружения можно подключать через CDN:

После подключения библиотека становится доступной глобально через объект axe.

Основные методы

axe.run — главный метод для сканирования страницы или DOM-узла. Возвращает объект с результатами тестирования.

const results = await axe.run(document);
console.log(results.violations);

Ключевые свойства объекта results:

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

axe.configure — настройка правил, включая отключение или изменение уровня важности. Пример:

axe.configure({
  rules: [
    { id: 'color-contrast', enabled: false },
    { id: 'label', options: { selector: 'input, textarea' } }
  ]
});

Структура проекта с Axe-core

1. Тестовый модуль В проекте создается отдельная директория для тестов доступности. Обычно структура выглядит так:

project/
├─ src/
│  └─ components/
├─ tests/
│  └─ accessibility/
│     ├─ button.test.js
│     ├─ form.test.js
│     └─ modal.test.js
└─ package.json

2. Организация тестов Каждый компонент тестируется отдельно. В начале теста инициализируется библиотека, запускается axe.run на контейнере компонента, после чего проверяется наличие нарушений:

import { render } from '@testing-library/react';
import axe from 'axe-core';
import Button from '../. ./src/components/Button';

test('Button должен соответствовать требованиям доступности', async () => {
  const { container } = render();
  const results = await axe.run(container);
  expect(results.violations).toHaveLength(0);
});

3. Интеграция с CI/CD Результаты Axe-core можно использовать как часть конвейера сборки. Скрипты тестирования могут завершаться с ошибкой при наличии нарушений, что позволяет автоматически поддерживать высокий уровень доступности:

{
  "scripts": {
    "test:axe": "node tests/accessibility/runAxeTests.js"
  }
}

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

   • Отключение правил для компонентов, где они неприменимы.
   • Изменение порогов контрастности.
   • Добавление пользовательских правил для специфических элементов интерфейса.

Расширенные возможности

• Селекторы: позволяет проверять конкретные элементы вместо всего документа.
• Пользовательские правила: можно создавать собственные проверки для уникальных компонентов.
• Отчеты: результаты можно сохранять в формате JSON, что удобно для аналитики или генерации отчетов в CI.
• Асинхронность: все операции выполняются асинхронно, что совместимо с современными фреймворками тестирования.

Практические советы по использованию

• Выделять отдельный слой для тестов доступности, чтобы не смешивать их с функциональными тестами.
• Настраивать правила для проекта, а не использовать дефолтные настройки без изменений.
• Использовать отчеты для постоянного мониторинга нарушений, а не только для одноразовой проверки.
• Интегрировать с библиотеками тестирования React, Vue или Angular для сканирования компонентов в изоляции.

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

Объект violations имеет следующую структуру:

[
  {
    "id": "color-contrast",
    "impact": "serious",
    "description": "Недостаточный контраст текста",
    "nodes": [
      {
        "html": "Click me",
        "target": ["button"],
        "failureSummary": "Контраст текста и фона менее 4.5:1"
      }
    ]
  }
]

Эта структура позволяет:

• Определять приоритет исправления нарушений по уровню impact.
• Локализовать проблему в DOM по селектору target.
• Получать подробное описание проблемы и рекомендации по исправлению.