# Visually hidden



> Visually hidden component hides content visually while retaining readability by screen readers for accessibility.

## Examples

### Default

```tsx
import { VisuallyHidden } from "@kesko/components";

export default () => (
  <p>
    The text below is visually hidden but accessible to screen readers:
    <VisuallyHidden>This text is only visible to assistive technology.</VisuallyHidden>
  </p>
);

```

```html
<p>
  The text below is visually hidden but accessible to screen readers:
  <span class="k-visually-hidden">This text is only visible to assistive technology.</span>
</p>
```