L'attribut hidden until-found
Posté : 15 janv. 2026, 20:12
L'attribut hidden="until-found" a été ajouté pour améliorer l'accessibilité et le référencement des contenus en HTML, il permet de cacher du contenu tout en le laissant indexable par les moteurs de recherche et surtout trouvable via la fonction "Rechercher" du navigateur (raccourci Ctrl+F).
Habituellement, pour cacher un élément (tel que le contenu d'un accordéon ou d'un onglet), on utilise display: none (qui est très efficace et prévu pour cela) ou on passe par des classes spécifiques visually-hidden ou sr-only qui sont ajoutés "à la main" ou par des frameworks CSS tels que Bootstrap, Tailwind pour masquer du contenu visuellement sans toutefois empêcher son rendu par les lecteurs d'écran.
La difficulté avec cette approche est que le texte est effectivement invisible pour l'utilisateur mais aussi pour la fonction de recherche du navigateur. Si un utilisateur cherche un mot-clé présent dans un bloc caché par défaut (de l'accordéon, ou d'un onglet inactif), il ne le trouvera jamais car ce texte restera inatteignable tant que le bloc n'est pas affiché à nouveau (ou déployé).
Lorsqu'on ajoute l'attribut hidden (qui existait déjà auparavant) avec cette nouvelle valeur until-found :
Le problème avec display: noneHabituellement, pour cacher un élément (tel que le contenu d'un accordéon ou d'un onglet), on utilise display: none (qui est très efficace et prévu pour cela) ou on passe par des classes spécifiques visually-hidden ou sr-only qui sont ajoutés "à la main" ou par des frameworks CSS tels que Bootstrap, Tailwind pour masquer du contenu visuellement sans toutefois empêcher son rendu par les lecteurs d'écran.
La difficulté avec cette approche est que le texte est effectivement invisible pour l'utilisateur mais aussi pour la fonction de recherche du navigateur. Si un utilisateur cherche un mot-clé présent dans un bloc caché par défaut (de l'accordéon, ou d'un onglet inactif), il ne le trouvera jamais car ce texte restera inatteignable tant que le bloc n'est pas affiché à nouveau (ou déployé).
L'astuce hidden="until-found"Lorsqu'on ajoute l'attribut hidden (qui existait déjà auparavant) avec cette nouvelle valeur until-found :
- Il est caché par défaut (équivalent à display: none).
- Si l'utilisateur effectue une recherche (Ctrl+F) et que le mot se trouve dans cette section, le navigateur révèle automatiquement l'élément.
- Le navigateur déclenche un événement spécial appelé beforematch.