# VisuallyHidden

Texto que não aparece na tela, mas o leitor de tela lê. Completa o que a posição na página já diz para quem enxerga.

## Playground

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

## Quando usar

-   Para dar o contexto que o olho pega pela posição: "Editar backup semanal" num botão "Editar" dentro de uma linha de tabela.

## Quando não usar

-   **Para esconder algo de todo mundo:** use o atributo `hidden`.
-   **Para texto que todos deveriam ler:** se ajuda o leitor de tela, quase sempre ajuda todo mundo. Mostre.

## Exemplos

### O nome completo de uma ação

Quem vê, entende pela linha; o leitor de tela ouve "Editar backup semanal".

Mostrar código

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

## Bons e maus padrões

Faça assim

"Editar" com o nome da linha escondido.

O contexto que falta só ao leitor de tela.

Não faça

"Salve antes de sair" escondido, só para o leitor de tela.

Um aviso que só o leitor de tela recebe: quem enxerga também precisava dele.

## Atributos

Atributo

Valores

Para quê

`class="feitio-visually-hidden"`

obrigatório

Some da tela e continua para o leitor de tela.