Rendre le contenu réduit accessible avec "hidden=until-found"

Joey Arhar

Les sections de contenu réductibles, parfois décrites comme un accordéon, sont un modèle d'UI courant. Toutefois, il est impossible de rechercher du contenu masqué dans les sections réduites à l'aide de la recherche dans la page. De plus, il n'est pas possible d'établir de lien vers des fragments de texte dans des régions réduites.

L'attribut HTML hidden=until-found et l'événement beforematch peuvent résoudre ces problèmes. En ajoutant hidden=until-found au conteneur de votre contenu masqué, vous permettez au navigateur de rechercher du texte dans cette zone cachée et d'afficher la section si une correspondance est trouvée.

Ces fonctionnalités sont disponibles à partir de Chrome 102. Voyons comment elles fonctionnent.

Comment l'utiliser ?

Si votre site Web comporte déjà des sections réductibles que vous souhaitez inclure dans l'index de recherche, remplacez les styles qui masquent ces sections par l'attribut hidden=until-found. Si votre page comporte également un autre état qui doit être synchronisé avec l'affichage ou non de votre section, ajoutez un écouteur d'événement beforematch qui sera déclenché sur l'élément hidden=until-found juste avant que l'élément ne soit révélé par le navigateur.

Mises en garde

Pour une expérience utilisateur cohérente, le contenu hidden=until-found doit pouvoir être révélé sans utiliser la recherche dans la page. Tous les internautes n'utiliseront pas la fonctionnalité de recherche sur la page, et les navigateurs non compatibles avec hidden=until-found bénéficieront de l'expérience d'origine des contenus masqués sans que le découverte sur la page ne soit révélée.

Pour vous assurer que votre contenu masqué est inclus dans l'index de recherche des navigateurs qui ne sont pas compatibles avec hidden=until-found, vous pouvez à tout moment développer le contenu masqué dans ces navigateurs. La détection de caractéristiques peut être effectuée en vérifiant la présence du gestionnaire d'événements beforematch:

if (!(‘onbeforematch' in document.body)) {
  // expand all hidden content
}

hidden=until-found applique la propriété CSS content-visibility:hidden au lieu de la propriété display:none appliquée par l'attribut hidden standard. Cela est nécessaire pour rechercher le contenu lorsqu'il est fermé, mais présente également les effets secondaires suivants:

• Certaines API de mise en page telles que getBoundingClientRect indiquent que le contenu masqué dans l'élément hidden=until-found prend de la place et occupe une position sur la page.
• Les nœuds enfants de l'élément hidden=until-found ne sont pas affichés, mais l'élément hidden=until-found lui-même comporte toujours une zone de texte. Cela signifie que les propriétés CSS telles que la bordure et la taille explicite auront toujours une incidence sur le rendu.

À titre d'exemple, la démo suivante ajoute une marge, une bordure et une marge intérieure à l'élément auquel hidden=until-found est appliqué. À la place du contenu masqué, un cadre avec une bordure grise s'affiche, qui se remplit ensuite du contenu masqué lorsqu'il est révélé. Il s'agit de la zone de l'élément masqué.

Pour éviter ce problème, ajoutez la bordure à un élément imbriqué dans le conteneur comportant hidden=until-found.