ARIA атрибуты и роли

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

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

Роли (roles) Роль элемента определяет его семантическую функцию. В Radix UI каждая интерактивная компонента имеет предустановленную роль, которая соответствует спецификации WAI-ARIA. Примеры ролей в Radix UI:
- button — для кнопок, активируемых пользователем.
- dialog — для модальных окон и всплывающих элементов.
- menu и menuitem — для списков действий и навигации.
Использование ролей гарантирует, что экранные читалки смогут правильно идентифицировать элемент и предоставить пользователю соответствующие команды управления.
ARIA-атрибуты Эти атрибуты предоставляют дополнительную информацию о состоянии или поведении элемента. В Radix UI они применяются автоматически для большинства интерактивных компонентов, но их можно расширять при необходимости.

Наиболее часто используемые ARIA-атрибуты:
- aria-expanded — указывает, раскрыт ли элемент (например, меню или аккордеон).
- aria-haspopup — информирует, что элемент открывает всплывающее меню или диалог.
- aria-controls — связывает элемент с управляемым им контейнером (например, кнопка, открывающая панель).
- aria-labelledby и aria-label — задают текстовое описание элемента.
- aria-disabled — обозначает временно неактивный элемент.
В Radix UI большинство этих атрибутов управляется внутренней логикой компонентов, что снижает вероятность ошибок при ручной настройке доступности.

Примеры использования ARIA в компонентах Radix UI

Кнопка с раскрывающимся меню

import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

<DropdownMenu.Root>
  <DropdownMenu.Trigger aria-haspopup="menu" aria-expanded={open}>
    Открыть меню
  </DropdownMenu.Trigger>
  <DropdownMenu.Content role="menu">
    <DropdownMenu.Item role="menuitem">Пункт 1</DropdownMenu.Item>
    <DropdownMenu.Item role="menuitem">Пункт 2</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Разбор:

aria-haspopup="menu" сообщает, что кнопка открывает меню.
aria-expanded={open} динамически обновляет состояние раскрытия.
role="menu" и role="menuitem" обеспечивают правильную семантику для экранных читалок.

Аккордеон с ARIA

import * as Accordion from '@radix-ui/react-accordion';

<Accordion.Root type="single">
  <Accordion.Item value="item-1">
    <Accordion.Header>
      <Accordion.Trigger aria-expanded={expanded}>
        Заголовок секции
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      Содержимое секции
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Разбор:

aria-expanded отражает текущее состояние секции.
Связь между Trigger и Content автоматически управляется библиотекой.

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

Radix UI интегрирует контролируемые состояния с ARIA, что позволяет динамически изменять атрибуты без потери доступности:

При изменении open состояния меню автоматически обновляется aria-expanded.
При закрытии модального окна aria-hidden применяется к основному содержимому страницы.
Для компонентов типа Tabs Radix UI автоматически управляет aria-selected, aria-controls и role="tab" для всех вкладок.

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

Локальные и глобальные ARIA атрибуты

Radix UI позволяет комбинировать встроенные ARIA-атрибуты с пользовательскими:

aria-label для предоставления альтернативного текста.
aria-labelledby для связки с заголовком, который уже присутствует в DOM.
aria-describedby для дополнительного описания, например, ошибок в форме или пояснений.

Пример с модальным окном:

<Dialog.Root>
  <Dialog.Trigger>Открыть</Dialog.Trigger>
  <Dialog.Overlay />
  <Dialog.Content aria-labelledby="modal-title" aria-describedby="modal-description">
    <h2 id="modal-title">Заголовок модального окна</h2>
    <p id="modal-description">Подробное описание содержимого</p>
  </Dialog.Content>
</Dialog.Root>

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