VisuallyHidden

Contenu lu par les lecteurs d'écran mais invisible à l'écran : libellé d'un bouton icône, précision de contexte (« (s'ouvre dans un nouvel onglet) »), lien d'évitement.

Exemples d'utilisation

Libellé d'un bouton icône

<button type="button">
  <TrashIcon aria-hidden="true" />
  <SuVisuallyHidden>Supprimer le fichier</SuVisuallyHidden>
</button>

Lien d'évitement

Avec focusable, le contenu réapparaît quand il reçoit le focus. Appuyez sur Tab dans la démo.

Contenu de la page.

<SuVisuallyHidden as="a" href="#main" focusable class="skip-link">
  Aller au contenu principal
</SuVisuallyHidden>

API

Props

Prop	Type	Défaut	Description
as	string	'span'	Élément rendu
focusable	boolean	false	Visible quand le contenu (ou un de ses enfants) a le focus

Accessibilité

• Masquage accessible (clip-path, taille 1px) : le contenu reste dans l'arbre d'accessibilité, contrairement à display: none.
• Pour un bouton icône, aria-label sur le bouton fonctionne aussi ; VisuallyHidden garde le texte dans le DOM (traduction automatique, recherche).