Тестирование доступности

MDX — это расширение Markdown, позволяющее вставлять JSX-компоненты прямо в текст. При работе с MDX критически важно учитывать доступность контента, поскольку его могут просматривать пользователи с ограниченными возможностями, включая слабовидящих, пользователей экранных читалок и людей с когнитивными нарушениями.

Основы доступности в MDX

В MDX компоненты создаются с использованием JSX, что делает доступность напрямую зависимой от правильной разметки HTML и корректного использования атрибутов ARIA. Основные моменты:

  • Семантика HTML: Использование <header>, <main>, <section>, <article>, <footer> обеспечивает структуру документа, понятную для экранных читалок. Вставка этих элементов в MDX происходит так же, как в обычном JSX.
  • Текстовые альтернативы: Для изображений обязательны атрибуты alt. В MDX это реализуется через стандартный Markdown-синтаксис ![описание](путь) или через компонент <img alt="описание" src="путь" />.
  • Контраст текста и фона: В стилях MDX необходимо проверять достаточный контраст для текста и фоновых элементов, чтобы пользователи с нарушением зрения могли воспринимать контент.

Использование инструментов для проверки доступности

MDX позволяет интегрировать инструменты для автоматического тестирования доступности:

  1. axe-core — библиотека для проверки DOM на соответствие стандартам WCAG. В проекте на MDX можно использовать jest-axe для тестирования компонентов:

    import { render } from '@testing-library/react';
import { axe } from 'jest-axe';
import MyComponent from './MyComponent.mdx';

test('компонент соответствует стандартам доступности', async () => {
  const { container } = render(<MyComponent />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

  2. Storybook с addon-a11y — позволяет визуально отслеживать нарушения доступности компонентов MDX. MDX-файлы можно использовать напрямую как Storybook-документацию, что упрощает проверку:

    import { Meta } from '@storybook/addon-docs';

<Meta title="Компоненты/Кнопка" component={Button} />

    После этого Storybook автоматически анализирует все компоненты на странице с помощью панели доступности.

Тестирование интерактивных элементов

MDX поддерживает любые React-компоненты, включая формы, кнопки и модальные окна. При тестировании доступности необходимо:

  • Проверять клавиатурную навигацию: все интерактивные элементы должны быть доступны с помощью Tab, Enter, Space.
  • Использовать ARIA-атрибуты: для динамических элементов, таких как модальные окна, нужно добавлять aria-modal="true", role="dialog" и корректно управлять фокусом.
  • Обеспечивать логический порядок элементов: даже при визуальной компоновке с помощью CSS порядок фокусировки должен соответствовать структуре документа.

Автоматизация тестирования MDX-документации

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

  • Комбинируют jest-axe и @testing-library/react, чтобы тестировать каждый компонент и примеры прямо из MDX.
  • Создают отдельный файл тестов для документации, импортируя MDX-файлы как React-компоненты.
  • Используют визуальные тесты с Cypress с плагинами доступности (например, cypress-axe) для проверки интерактивных MDX-страниц.

Рекомендации по улучшению доступности в MDX

  • Всегда использовать семантические HTML-теги вместо <div> и <span> для структурных элементов.
  • Обеспечивать альтернативные тексты для всех медиафайлов.
  • Проверять контраст текста и фона, избегать использования цветов как единственного способа передачи информации.
  • Использовать ARIA-атрибуты только там, где стандартные HTML-теги недостаточны.
  • Автоматически тестировать MDX-контент на соответствие WCAG 2.1 с помощью axe-core или Storybook addon.

Доступность в MDX — это не только требование для пользователей с ограниченными возможностями, но и фактор улучшения общей структуры, удобочитаемости и качества документации, делая контент более универсальным и корректным для всех платформ.

Оглавление