Screen reader support

Chakra UI изначально ориентирован на доступность, и одним из ключевых аспектов является поддержка экранных считывателей (screen readers). Это позволяет пользователям с нарушениями зрения взаимодействовать с приложением без потери функциональности. Chakra UI использует сочетание ARIA-атрибутов, семантических HTML-элементов и контролируемых компонентов, чтобы обеспечить полную совместимость с ассистивными технологиями.

ARIA-атрибуты и семантическая разметка

Chakra UI активно использует ARIA-атрибуты для передачи информации о состоянии и роли компонентов. Например:

  • aria-label и aria-labelledby – позволяют давать доступное описание элементам интерфейса, которые не имеют текстового содержимого.
  • aria-hidden – скрывает элементы от экранных считывателей, когда они не должны быть доступны пользователю.
  • aria-live – используется для динамически обновляемого контента, чтобы сообщать о новых событиях.
  • role – задаёт семантическую роль элемента (например, button, dialog, alert), что важно для правильного восприятия интерфейса ассистивными технологиями.

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

import { Button } from "@chakra-ui/react";

<Button aria-label="Закрыть модальное окно">
  <CloseIcon />
</Button>

В этом примере CloseIcon визуально отображается, но экранный считыватель будет озвучивать текст “Закрыть модальное окно”, обеспечивая ясность действий для пользователей.

Компоненты с поддержкой фокуса

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

  • FocusLock – гарантирует, что фокус остается внутри модального окна или всплывающего компонента до закрытия.
  • VisuallyHidden – позволяет добавлять элементы, которые видимы только для ассистивных технологий, не влияя на визуальное отображение.
  • tabIndex – правильно настроенный для интерактивных элементов, чтобы логика перемещения фокуса соответствовала ожиданиям пользователя.

Пример скрытого текста для дополнительной информации:

import { VisuallyHidden, Button } from "@chakra-ui/react";

<Button>
  Сохранить
  <VisuallyHidden>изменения будут применены сразу</VisuallyHidden>
</Button>

Экранный считыватель озвучит полный контекст: “Сохранить, изменения будут применены сразу”, при этом на экране пользователь увидит только кнопку “Сохранить”.

Модальные окна и уведомления

Chakra UI предоставляет Modal, Drawer и Alert компоненты с встроенной поддержкой доступности:

  • Modal автоматически фокусирует первый интерактивный элемент при открытии и возвращает фокус к элементу-триггеру при закрытии.
  • AlertDialog использует aria-modal и управляет фокусом, предотвращая взаимодействие с остальной частью интерфейса до подтверждения действия.
  • Toast уведомления поддерживают aria-live="polite" или assertive для корректного озвучивания событий.

Пример уведомления Toast с озвучиванием:

import { useToast } from "@chakra-ui/react";

const toast = useToast();
toast({
  title: "Сохранение прошло успешно",
  status: "success",
  duration: 5000,
  isClosable: true,
  position: "top",
  variant: "subtle"
});

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

Доступные формы и интерактивные элементы

Формы в Chakra UI уже включают семантические элементы и корректную поддержку ARIA:

  • FormControl управляет связью между label, input и helperText.
  • FormErrorMessage автоматически добавляет aria-invalid и связывает ошибку с соответствующим полем.
  • Checkbox и Radio используют роли и состояния (aria-checked), что позволяет корректно озвучивать их пользователю.

Пример формы с доступностью:

import { FormControl, FormLabel, Input, FormErrorMessage } from "@chakra-ui/react";

<FormControl isInvalid={emailError}>
  <FormLabel htmlFor="email">Email</FormLabel>
  <Input id="email" type="email" />
  {emailError && <FormErrorMessage>{emailError}</FormErrorMessage>}
</FormControl>

Экранный считыватель озвучит: “Email, поле обязательно, ошибка: некорректный адрес”.

Динамический контент и уведомления

Для динамически изменяемого контента Chakra UI использует ARIA live regions, которые обеспечивают своевременное уведомление о событиях:

  • aria-live="polite" – для не критичных сообщений (например, обновления состояния).
  • aria-live="assertive" – для важных уведомлений (например, ошибки, предупреждения).

Пример:

import { Alert, AlertIcon } from "@chakra-ui/react";

<Alert status="error" aria-live="assertive">
  <AlertIcon />
  Произошла ошибка при сохранении данных
</Alert>

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

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

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

  • axe-core или eslint-plugin-jsx-a11y – для статического анализа кода на предмет ошибок доступности.
  • Встроенные функции браузеров, такие как VoiceOver (macOS) или NVDA (Windows), для динамического тестирования.
  • Проверку фокусировки и логики табуляции, чтобы убедиться, что интерактивные элементы доступны в правильном порядке.

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

Оглавление