---
description: Компонент-обертка, который позволяет скрыть контент визуально, но оставить его доступным для ассистивных технологий.
tags: accessibility
---

<Overview group="utils">
# VisuallyHidden [tag:component]

Компонент-обертка, который позволяет скрыть контент визуально, но оставить его доступным для ассистивных технологий.
По умолчанию рендерит содержимое в теге `span`.

</Overview>

{/* @example-description: Базовый пример `VisuallyHidden` для текста, доступного только скринридерам. */}
<Playground>
  ```jsx
  <Text>Здесь есть ещё текст для скринридера</Text>
  <VisuallyHidden>Доступно только для скринридеров</VisuallyHidden>
  ```
</Playground>

> Данный компонент предназначен исключительно для реализации доступного только для ассистивных технологий контента.
> Если вам нужно скрыть контент как визуально, так и для ассистивных технологий,
> то воспользуйтесь `CSS`-стилями `display:none` или `visibility: hidden` вместо данного компонента.

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `span` |  |
| `getRootRef` | `Ref<T>` | `-` |  |