import { Meta } from '@storybook/blocks';

<Meta title="Utilities/Visually Hidden" />

# Visually Hidden

#### Hides content from the screen in an accessible way.

#### You can use also [a11y](https://material.angular.io/cdk/a11y), they also have an auxiliary class for this.

## Features

- ✅ Visually hides content while preserving it for assistive technology.

## Import

Screen readers and other assistive technology skip elements that have display: none, visibility: hidden, opacity: 0, height: 0, or width: 0. In some cases you may need to visually hide an element while keeping it available to assistive technology.
You can do so using the a11y-visually-hidden Sass mixin, which emits the .cdk-visually-hidden CSS class:

```scss
@use '@angular/cdk';

@include cdk.a11y-visually-hidden();
```

## Examples

```html
<div class="custom-checkbox">
  <input class="cdk-visually-hidden" type="checkbox" />
</div>
```

## Accessibility

This is useful in certain scenarios as an alternative to traditional labelling with aria-label or aria-labelledby.
