# VisuallyHidden

Text that does not show on screen, but screen readers read. It completes what the position on the page already tells sighted people.

## Playground

```html
<label class="feitio-stack" data-gap="2" style="inline-size: min(100%, 20rem)"><span class="feitio-visually-hidden">Filter</span><input class="feitio-input" type="search" placeholder="…"></label>
```

## When to use

-   To give the context the eye gets from position: "Edit weekly backup" on an "Edit" button inside a table row.

## When not to use

-   **To hide something from everyone:** use the `hidden` attribute.
-   **For text everyone should read:** if it helps screen readers, it almost always helps everyone. Show it.

## Examples

### The full name of an action

Sighted people understand from the row; the screen reader hears "Edit weekly backup".

Show code

```html
<button type="button" class="feitio-button" data-size="small">
  Editar<span class="feitio-visually-hidden"> backup semanal</span>
</button>
```

## Do and don’t

Do

"Edit" with the row’s name hidden.

Context that only the screen reader was missing.

Don’t

"Save before leaving" hidden, only for screen readers.

A notice only screen readers get: sighted people needed it too.

## Attributes

Attribute

Values

What for

`class="feitio-visually-hidden"`

required

Disappears from the screen and stays for screen readers.