Visually Hidden

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

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

Компонент VisuallyHidden реализует концепцию “visually hidden but accessible”. На практике это достигается с помощью CSS, который полностью скрывает элемент с экрана, но не удаляет его из DOM. Такой подход позволяет:

  • Сохранять семантику HTML.
  • Поддерживать корректное чтение контента скринридерами.
  • Предотвращать визуальный шум на странице.

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

Для использования необходимо импортировать компонент из Chakra UI:

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

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

<VisuallyHidden>Скрытый текст для скринридеров</VisuallyHidden>

В этом случае текст «Скрытый текст для скринридеров» не будет виден на экране, но скринридер его озвучит.

Применение в кнопках и иконках

Часто VisuallyHidden используется вместе с иконками, чтобы добавить доступное описание:

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

<IconButton
  icon={<FaSearch />}
  aria-label="Поиск"
/>
<VisuallyHidden>Поиск</VisuallyHidden>

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

Внедрение в формы и элементы управления

VisuallyHidden полезен для добавления меток к полям формы, которые не должны отображаться визуально:

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

<FormLabel htmlFor="email">
  <VisuallyHidden>Email</VisuallyHidden>
</FormLabel>
<Input id="email" type="email" placeholder="Введите ваш email" />

Такой подход позволяет сохранить корректные связи между меткой и полем (htmlFor и id), что критично для доступности.

Работа с компонентами, которые требуют скрытого текста

VisuallyHidden может быть использован в комбинации с интерактивными компонентами для предоставления дополнительного контекста:

<Button>
  <Icon as={FaTrash} />
  <VisuallyHidden>Удалить элемент</VisuallyHidden>
</Button>

Пользователь видит только иконку корзины, а скринридер озвучивает текст «Удалить элемент», делая интерфейс доступным.

Отличие от display: none и visibility: hidden

Скрытие элемента с помощью CSS-свойств display: none или visibility: hidden полностью убирает его из визуального и программного потока. В отличие от них, VisuallyHidden:

  • Сохраняет элемент в DOM.
  • Делает его доступным для ассистивных технологий.
  • Поддерживает правильную навигацию по странице с клавиатуры.

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

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

<VisuallyHidden style={{ position: 'absolute', top: 0 }}>
  Дополнительная информация
</VisuallyHidden>

Однако в большинстве случаев стандартные стили Chakra UI полностью удовлетворяют требованиям доступности.

Практические рекомендации

  • Использовать для скрытия текста, который важен для понимания интерфейса, но не нужен визуально.
  • Не использовать для декоративного контента, который не несет смысловой нагрузки.
  • Всегда сочетать с семантическими HTML-элементами (<label>, <button>), чтобы улучшить доступность.
  • Проверять результаты работы скринридеров для уверенности в корректности озвучивания скрытого контента.

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

Оглавление