Accessibility checklist

Chakra UI изначально строится с упором на доступность (accessibility, a11y). Каждый компонент библиотеки включает встроенные атрибуты WAI-ARIA и управление фокусом, что упрощает создание интерфейсов, соответствующих стандартам WCAG. При работе с библиотекой важно понимать, какие элементы уже обеспечивают доступность, а какие требуют дополнительной настройки.

Использование атрибутов ARIA

В Chakra UI большинство интерактивных компонентов автоматически поддерживают ARIA-атрибуты. Например:

  • Button – поддерживает aria-disabled, aria-label, aria-haspopup для элементов с выпадающими меню.
  • Input и Textarea – автоматически связываются с FormLabel через htmlFor, обеспечивая корректное чтение экранными читалками.
  • Checkbox, Radio и Switch – используют role и aria-checked для передачи состояния.

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

<Box role="alert" aria-live="polite">
  Данные успешно сохранены
</Box>

Здесь role="alert" сообщает экранным читалкам о важности сообщения, а aria-live="polite" контролирует, как оно будет объявлено пользователю.

Управление фокусом и табуляцией

Chakra UI обеспечивает корректное управление фокусом в модальных и всплывающих компонентах:

  • Modal – при открытии фокус автоматически переносится на первый интерактивный элемент, при закрытии возвращается к элементу, с которого был открыт модал.
  • Drawer – поддерживает focus trap, предотвращая уход фокуса за пределы панели.
  • Tabs – управляют фокусом стрелками и клавишей Tab, соответствуя ARIA-спецификации.

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

Цвета и контрастность

Chakra UI поставляется с встроенными темы и системами цвета, учитывающими контрастность текста и фона:

  • Text, Heading, Button и Badge – имеют автоматические проверки контрастности при использовании стандартной темы.
  • Для кастомных цветов следует использовать функции mode() и useColorModeValue() для корректного отображения в светлой и тёмной теме.
  • Контраст текста с фоном должен соответствовать WCAG 2.1 Level AA (минимум 4.5:1 для обычного текста, 3:1 для крупного текста).

Пример:

<Text color={useColorModeValue('gray.800', 'gray.100')}>
  Контрастный текст в светлой и тёмной теме
</Text>

Поддержка клавиатурной навигации

Каждый компонент Chakra UI рассчитан на работу с клавиатурой:

  • Menu – стрелки для навигации по пунктам, Enter для выбора, Esc для закрытия.
  • Accordion – Tab для перехода, ArrowDown/ArrowUp для открытия и закрытия панелей.
  • Popover – Esc закрывает поповер, Tab циклически проходит по элементам внутри.

При разработке пользовательских интерактивных элементов важно вручную реализовать обработку клавиш и tabIndex.

Использование семантической разметки

Chakra UI позволяет использовать как семантические HTML-теги, так и кастомные обёртки:

  • <Box> – универсальный контейнер, но лучше применять section, main, header, footer, nav для структуры страницы.
  • <Button as="a" href="#"> – сохраняет поведение ссылки при необходимости.
  • <Heading as="h1"> – задаёт правильный уровень заголовка для SEO и скринридеров.

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

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

  1. eslint-plugin-jsx-a11y – проверяет JSX на корректное использование ARIA и семантики.
  2. axe-core или react-axe – динамически проверяют компоненты в браузере.
  3. Lighthouse – общий аудит доступности всей страницы.

Доступность форм и валидация

Chakra UI тесно интегрируется с библиотеками форм, такими как Formik или React Hook Form, обеспечивая доступность:

  • Ошибки связываются с aria-describedby для уведомления скринридеров.
  • Поля с ошибкой получают aria-invalid="true".
  • Подсказки (helper text) автоматически связываются с FormLabel через id.

Пример:

<FormControl isInvalid={!!error}>
  <FormLabel htmlFor="email">Email</FormLabel>
  <Input id="email" {...register('email')} />
  <FormErrorMessage>{error?.message}</FormErrorMessage>
</FormControl>

Здесь FormControl управляет атрибутами ARIA, делая форму полностью доступной.

Резюме ключевых практик

  • Использовать встроенные компоненты Chakra UI без изменений, где это возможно, чтобы сохранять доступность по умолчанию.
  • Всегда проверять ARIA-атрибуты при создании кастомных компонентов.
  • Контролировать фокус, табуляцию и клавиатурную навигацию.
  • Следить за контрастностью и цветовой темой.
  • Применять семантические HTML-теги вместе с Chakra UI.
  • Интегрировать с инструментами проверки доступности и формами, поддерживающими ARIA.

Эти подходы позволяют создавать интерфейсы, которые не только выглядят современно, но и полностью соответствуют стандартам доступности.

Оглавление