jest-axe для автоматической a11y проверки

Доступность (a11y) веб-приложений — это важная часть обеспечения качественного пользовательского опыта для всех категорий пользователей. Веб-приложения должны быть доступными не только для людей с нормальным зрением, но и для людей с ограниченными возможностями, таких как слабовидящие, пользователи с нарушениями моторики или тех, кто использует вспомогательные технологии.

Jest-axe — это инструмент, интегрирующийся с Jest и React Testing Library для автоматического тестирования доступности компонентов. Он использует библиотеку axe-core, которая проводит анализ доступности на основе набора общих стандартов и правил, таких как WCAG (Web Content Accessibility Guidelines).

Установка jest-axe

Для того чтобы начать использовать jest-axe в тестах, необходимо установить соответствующие зависимости. Нужно добавить несколько пакетов в проект:

npm install --save-dev jest-axe axe-core

Если проект использует Yarn, то команда будет следующей:

yarn add --dev jest-axe axe-core

Эти пакеты обеспечивают взаимодействие с Jest и реализацию стандартных проверок доступности с помощью axe-core.

Настройка jest-axe

После установки библиотек необходимо настроить jest-axe для использования в тестах. Обычно это делается через импорт jest-axe и его интеграцию в блоки тестирования.

import { render } from '@testing-library/react';
import { axe } from 'jest-axe'; // импорт jest-axe
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('должен быть доступен для всех пользователей', async () => {
    const { container } = render(<MyComponent />);

    // Проверка доступности
    const results = await axe(container);

    expect(results).toHaveNoViolations();
  });
});

В этом примере используется render из React Testing Library для рендеринга компонента и axe для анализа его доступности. axe(container) проверяет доступность контента внутри контейнера, в котором был отрендерен компонент.

Функция axe() возвращает объект с результатами проверки доступности. Метод toHaveNoViolations() из библиотеки jest-axe используется для того, чтобы убедиться, что в компоненте нет нарушений стандартов доступности.

Как работает jest-axe

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

  • Текстовые контенты: проверка наличия доступных альтернативных описаний для изображений, правильность использования атрибутов alt, aria-label, и других.
  • Цветовые контрасты: проверка контраста текста с фоном, чтобы обеспечить читаемость контента для людей с нарушениями зрения.
  • Фокус и навигация с клавиатуры: проверка доступности для пользователей, которые управляют приложением с помощью клавиатуры, включая правильное управление фокусом.
  • Использование ARIA атрибутов: проверка наличия необходимых ARIA атрибутов для элементов, которые требуют дополнительного описания или обозначения их роли в интерфейсе.

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

Пример использования jest-axe

Рассмотрим пример более сложного компонента с различными интерактивными элементами.

import { render, fireEvent } from '@testing-library/react';
import { axe } from 'jest-axe';
import LoginForm from './LoginForm';

describe('LoginForm', () => {
  it('должен быть доступен для всех пользователей', async () => {
    const { container, getByLabelText } = render(<LoginForm />);

    // Заполнение формы
    fireEvent.change(getByLabelText(/Email/i), { target: { value: 'test@example.com' } });
    fireEvent.change(getByLabelText(/Пароль/i), { target: { value: 'password123' } });
    fireEvent.click(getByLabelText(/Войти/i));

    // Проверка доступности
    const results = await axe(container);

    expect(results).toHaveNoViolations();
  });
});

В этом примере:

  • Мы рендерим форму для входа с полями для ввода email и пароля.
  • Далее, с помощью fireEvent заполняем поля и имитируем клик по кнопке входа.
  • После выполнения действия, как и в предыдущем примере, проверяется доступность всего компонента.

Результаты проверки доступности возвращаются с объектом, в котором указываются нарушения, если таковые имеются.

Важные моменты при использовании jest-axe

  1. Асинхронность: Поскольку проверка доступности выполняется асинхронно, важно использовать await перед вызовом функции axe(), чтобы гарантировать завершение анализа перед проверкой результатов.

  2. Рендеринг динамических элементов: В случае, если компонент рендерит динамический контент (например, после асинхронных операций или пользовательского ввода), необходимо убедиться, что состояние компонента стабилизировалось до того, как будет проведена проверка доступности.

  3. Глобальные и специфические проверки: Если есть необходимость в проверке доступности всей страницы, можно использовать document в качестве контейнера. В случае с конкретными компонентами проверку лучше делать на уровне их контейнера.

const results = await axe(document.body); // для всей страницы

  1. Игнорирование специфичных нарушений: В некоторых случаях можно намеренно игнорировать определенные виды нарушений (например, если они временные или известные проблемы). Это можно сделать, используя опции конфигурации библиотеки axe-core.

  2. Интеграция с другими тестами: Jest-axe можно использовать вместе с другими библиотеками для тестирования функциональности компонента, такими как React Testing Library. Это позволяет выполнить всестороннюю проверку, включая как поведение компонента, так и его доступность.

Преимущества использования jest-axe

  1. Автоматизация проверки доступности: Jest-axe позволяет легко интегрировать проверки доступности в процессы тестирования, что способствует обнаружению проблем на ранних этапах разработки.

  2. Простота интеграции: Простая настройка и использование с минимальными усилиями. После установки jest-axe интегрируется напрямую в процесс тестирования с использованием уже знакомых методов Jest.

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

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

Использование jest-axe является важной практикой для улучшения качества кода и обеспечения доступности веб-приложений для более широкого круга пользователей.

Оглавление