ARIA-атрибуты в компонентах

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

Основные принципы ARIA в Chakra UI

ARIA (Accessible Rich Internet Applications) — это набор атрибутов HTML, которые помогают описывать поведение элементов интерфейса для пользователей с ограниченными возможностями. Chakra UI интегрирует ARIA через свои компоненты, автоматически применяя атрибуты, соответствующие роли и состояния компонентов.

Ключевые моменты:

  • Компоненты Chakra UI, такие как Button, Input, Checkbox, Switch, уже имеют корректные ARIA-атрибуты по умолчанию.
  • Для компонентов с динамическим поведением (Menu, Accordion, Modal) библиотека обеспечивает автоматическую синхронизацию ARIA-состояний, таких как aria-expanded, aria-controls, aria-hidden.
  • Дополнительные атрибуты можно передавать напрямую через пропсы, и Chakra UI корректно объединяет их с внутренними.

Атрибут aria-label и aria-labelledby

Использование aria-label позволяет задать текстовую подпись для элемента, если визуальный текст отсутствует. Например, иконка кнопки без текста:

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

Атрибут aria-labelledby связывает элемент с уже существующим текстовым элементом на странице, создавая доступное описание:

<Text id="section-title">Контактная информация</Text>
<Box aria-labelledby="section-title">
  <Input placeholder="Email" />
</Box>

Атрибут aria-hidden

aria-hidden используется для скрытия элементов от экранных читалок, при этом элемент остается видимым на экране. Chakra UI автоматически управляет этим атрибутом для таких компонентов, как Modal и Popover, когда они закрыты:

<Modal isOpen={isOpen} onCl ose={onClose}>
  <ModalOverlay />
  <ModalContent>
    <ModalHeader>Заголовок модального окна</ModalHeader>
    <ModalBody>
      Содержимое окна
    </ModalBody>
  </ModalContent>
</Modal>

Когда модальное окно закрыто, Chakra UI устанавливает aria-hidden="true" для ModalContent, предотвращая взаимодействие с экранными читалками.

Атрибуты для динамических компонентов

Menu Для компонента Menu библиотека автоматически управляет ARIA-атрибутами:

  • aria-haspopup="menu" на кнопке, открывающей меню.
  • aria-expanded указывает состояние раскрытия.
  • role="menuitem" для элементов меню.
<Menu>
  <MenuButton as={Button}>
    Опции
  </MenuButton>
  <MenuList>
    <MenuItem>Профиль</MenuItem>
    <MenuItem>Настройки</MenuItem>
  </MenuList>
</Menu>

Accordion Для Accordion Chakra UI синхронизирует:

  • aria-expanded у заголовка панели.
  • aria-controls у заголовка, указывающий на идентификатор панели.
  • id и role для элементов панели и заголовка.
<Accordion>
  <AccordionItem>
    <AccordionButton>
      <Box flex="1" textAlign="left">Раздел 1</Box>
      <AccordionIcon />
    </AccordionButton>
    <AccordionPanel pb={4}>
      Содержимое раздела 1
    </AccordionPanel>
  </AccordionItem>
</Accordion>

Настройка собственных ARIA-атрибутов

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

<Button aria-label="Добавить товар" aria-disabled={isLoading}>
  Добавить
</Button>

Рекомендации по использованию ARIA в Chakra UI

  1. Не дублировать визуальные подписи с aria-label. Если элемент уже содержит текст, использование aria-label не требуется.
  2. Использовать встроенные компоненты Chakra UI, так как они уже учитывают большинство ARIA-атрибутов.
  3. Для кастомных компонентов применять useAriaProps или передавать атрибуты напрямую через пропсы.
  4. Проверять доступность через инструменты вроде Lighthouse или axe, чтобы убедиться, что динамические ARIA-состояния корректно применяются.

Итоговая схема работы

Chakra UI упрощает создание доступных интерфейсов, автоматически управляя:

  • Ролями (role) — определяют тип элемента.
  • Состояниями (aria-expanded, aria-checked) — отражают текущее состояние компонента.
  • Описаниями (aria-label, aria-labelledby) — предоставляют текстовые альтернативы для экранных читалок.
  • Скрытием (aria-hidden) — исключают элементы из взаимодействия при необходимости.

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

Оглавление