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.
Sur cette page
Playground
Voir comme
Fond
<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
Weekly backup
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
<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. |