# VisuallyHidden

Texte qui n'est pas affiché à l'écran mais lu par les lecteurs d'écran. Il complète ce que la position sur la page indique déjà aux personnes voyantes.

## Playground

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

## Quand l'utiliser

-   Pour donner au regard le contexte qu'il obtient de la position : "Sauvegarde hebdomadaire" sur un bouton "Modifier" dans une ligne de tableau.

## Quand ne pas l'utiliser

-   **Pour cacher quelque chose à tout le monde :** utilisez l'attribut `hidden`.
-   **Pour le texte que tout le monde devrait lire :** si cela aide les lecteurs d'écran, cela aide presque toujours tout le monde. Montrez-le.

## Exemples

### Le nom complet d'une action

Les personnes voyantes comprennent à partir de la ligne ; le lecteur d'écran entend "Modifier sauvegarde hebdomadaire".

Afficher le code

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

## Faire et ne pas faire

Do

"Modifier" avec le nom de la ligne caché.

Contexte que seul le lecteur d'écran manquait.

Don’t

"Sauvegarder avant de partir" caché, uniquement pour les lecteurs d'écran.

Seule une notice que les lecteurs d'écran reçoivent : les personnes voyantes en avaient aussi besoin.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-visually-hidden"`

obligatoire

Cela disparaît de l'écran et reste pour les lecteurs d'écran.