VisuallyHidden

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

Основные принципы работы

VisuallyHidden применяет специальные CSS-стили, которые:

  • делают элемент невидимым визуально (width: 1px, height: 1px, overflow: hidden),
  • не удаляют его из потока DOM полностью,
  • сохраняют доступность для навигации с помощью клавиатуры и чтения экранными читалками.

Таким образом, элемент остаётся интерактивным, если это необходимо, и корректно воспринимается технологиями доступности.

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

Импортировать компонент можно следующим образом:

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

Простейший пример применения:

<VisuallyHidden>
  Скрытый текст для экранных читалок
</VisuallyHidden>

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

Встраивание в интерактивные элементы

VisuallyHidden часто используется для добавления скрытых меток к кнопкам, ссылкам или полям ввода, чтобы улучшить доступность. Например, для кнопки с иконкой:

import { IconButton, VisuallyHidden } from "@chakra-ui/react";
import { SearchIcon } from "@chakra-ui/icons";

<IconButton aria-label="Поиск">
  <VisuallyHidden>Поиск</VisuallyHidden>
  <SearchIcon />
</IconButton>

В данном примере aria-label гарантирует доступность, а текст внутри VisuallyHidden обеспечивает дополнительную поддержку экранных читалок. Это полезно для тех случаев, когда IconButton используется без явного текста.

Использование с формами

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

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

<label>
  <VisuallyHidden>Введите ваше имя</VisuallyHidden>
  <Input placeholder="Имя" />
</label>

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

Стили и кастомизация

VisuallyHidden использует стандартные стили, которые безопасно применять в любом компоненте. В Chakra UI компонент поддерживает все стандартные пропсы для стилизации через sx, className или другие системные свойства, например:

<VisuallyHidden sx={{ color: "red" }}>
  Скрытый, но стилизуемый текст
</VisuallyHidden>

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

Комбинация с другими компонентами Chakra UI

Компонент легко интегрируется с другими элементами библиотеки, такими как Tooltip, Button, Input, IconButton. Часто используется для скрытых подсказок, которые будут доступны только вспомогательным средствам:

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

<Button>
  <VisuallyHidden>Отправить форму</VisuallyHidden>
  ?
</Button>

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

Лучшие практики

  1. Не использовать для чисто декоративного контента. Компонент предназначен только для улучшения доступности.
  2. Использовать с интерактивными элементами. Кнопки, ссылки, поля формы – идеальный вариант.
  3. Не дублировать визуальные подсказки. Если текст уже виден на экране, скрывать его бессмысленно.
  4. Комбинировать с aria-атрибутами. Например, aria-label, aria-labelledby для корректного поведения на всех платформах.

Примеры продвинутого использования

  • Добавление скрытых инструкций для навигации по клавиатуре:
<VisuallyHidden>Используйте Tab для перехода между полями</VisuallyHidden>
  • Скрытые сообщения об ошибках формы:
<VisuallyHidden id="error-message">
  Пожалуйста, введите корректный адрес электронной почты
</VisuallyHidden>
<Input aria-describedby="error-message" />
  • Поддержка многоязычных интерфейсов, когда визуальный текст на одной локали, а вспомогательная информация скрыта и предоставляется отдельно.

Использование VisuallyHidden делает интерфейс более доступным и соответствует стандартам WCAG. Его правильная интеграция позволяет создавать приложения, которые удобно использовать всем пользователям, независимо от способностей.

Оглавление