Доступность подсказок

Подсказки (Tooltip) в Radix UI — это интерактивные элементы, которые предоставляют дополнительную информацию при наведении, фокусе или касании. Важнейшая цель при реализации подсказок — обеспечение доступности (accessibility, a11y), чтобы информация была доступна не только мышью, но и клавиатурой, а также программам чтения с экрана (screen readers). Radix UI предоставляет встроенные механизмы для соответствия ARIA-стандартам.

Структура компонента Tooltip

Компонент подсказки в Radix UI строится из нескольких ключевых частей:

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

    import * as Tooltip from '@radix-ui/react-tooltip';

<Tooltip.Provider delayDuration={300}>
  {/* Внутренние подсказки */}
</Tooltip.Provider>
    • delayDuration — задержка перед отображением подсказки (в мс).
    • Использование Provider обеспечивает согласованное поведение всех подсказок в приложении.

  2. TooltipRoot Основной контейнер подсказки, объединяющий три элемента: триггер, контент и возможные дополнительные элементы (arrow).

    <Tooltip.Root>
  <Tooltip.Trigger>Наведи на меня</Tooltip.Trigger>
  <Tooltip.Content>Текст подсказки</Tooltip.Content>
</Tooltip.Root>
    • ARIA-атрибуты выставляются автоматически: aria-describedby связывает триггер с содержимым подсказки.

  3. TooltipTrigger Элемент, который инициирует появление подсказки. Может быть кнопкой, ссылкой или любым интерактивным элементом.

    • Важно, чтобы триггер был фокусируемым: кнопки, ссылки или элементы с tabIndex={0}.
    • Radix UI автоматически управляет aria-expanded и aria-haspopup.

  4. TooltipContent Отображаемый текст подсказки. Поддерживает стилизацию и позиционирование через props side, align, sideOffset.

    <Tooltip.Content side="top" align="center" sideOffset={5}>
  Подсказка с верхней стороны
  <Tooltip.Arrow />
</Tooltip.Content>
    • side — направление появления: top, right, bottom, left.
    • align — выравнивание относительно триггера: start, center, end.
    • sideOffset — смещение от триггера в пикселях.

  5. TooltipArrow Опциональный элемент, визуально указывающий на триггер. ARIA на него не накладывается, но улучшает визуальную связность.

Поддержка экранных читалок

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

  • aria-describedby — связывает триггер с подсказкой, позволяя читалке озвучивать её содержимое.
  • Подсказка автоматически скрывается из DOM, когда неактивна, предотвращая “шум” для пользователей вспомогательных технологий.
  • role="tooltip" выставляется на содержимое подсказки.
<Tooltip.Content role="tooltip">
  Дополнительная информация
</Tooltip.Content>

Это обеспечивает совместимость с большинством современных читалок, включая NVDA и VoiceOver.

Доступность с клавиатуры

Подсказки должны работать не только при наведении мышью, но и при фокусе клавиатурой:

  • Radix UI автоматически открывает подсказку при получении фокуса на TooltipTrigger.
  • Закрытие происходит при потере фокуса или нажатии клавиши Escape.
  • Поддерживается навигация через Tab без нарушения логики отображения подсказки.
<Tooltip.Trigger tabIndex={0}>Фокусируй меня</Tooltip.Trigger>

Управление задержкой и интерактивностью

Задержка появления и исчезновения важна для комфортного восприятия:

  • delayDuration — задержка перед открытием подсказки.
  • skipDelayDuration — время до закрытия при быстром перемещении курсора.

Интерактивные подсказки: если нужно, чтобы пользователь мог взаимодействовать с содержимым подсказки (например, ссылками или кнопками внутри), используется prop asChild и компонент Tooltip.Content оборачивается в интерактивный контейнер.

<Tooltip.Content side="top">
  <div>
    <p>Можно кликать по ссылкам внутри подсказки</p>
    <a href="#">Перейти</a>
  </div>
</Tooltip.Content>

Адаптивность и мобильные устройства

На сенсорных устройствах подсказки ведут себя иначе:

  • Radix UI использует long press вместо hover для открытия подсказки.
  • Подсказки корректно работают с touch-устройствами и не блокируют основные события прокрутки.
  • Оптимизация позиции учитывает размеры экрана, чтобы подсказка не уходила за границы viewport.

Кастомизация и стилизация

  • Любой элемент подсказки можно стилизовать через CSS или сторонние стилизованные компоненты (например, styled-components).
  • Поддерживается анимация появления/исчезновения с использованием keyframes или framer-motion.
<Tooltip.Content className="tooltip-fade">
  Появляющаяся подсказка
</Tooltip.Content>
.tooltip-fade {
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

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

  1. Не перегружать подсказку текстом — короткая и лаконичная информация.
  2. Использовать контрастные цвета текста и фона для удобного чтения.
  3. Следить за позиционированием: подсказка не должна закрывать основной контент.
  4. Тестировать с клавиатурой и экранными читалками, чтобы убедиться в правильном поведении ARIA-атрибутов.
  5. Не дублировать информацию, которая уже доступна другим способом (например, текст на кнопке).

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

Оглавление