Apprenez à créer un composant de divulgation avec la balise HTML details native

Lors de la création d'interfaces utilisateur interactives, les sections pliables ou extensibles apparaissent constamment. Qu'il s'agisse d'une FAQ, d'un panneau de paramètres ou d'une navigation de type accordéon, les développeurs se sont traditionnellement appuyés sur JavaScript et les attributs ARIA pour créer ces modèles. Cependant, HTML5 a introduit une solution native qui gère automatiquement l'essentiel du travail.

Présentation du modèle de divulgation

Le modèle de divulgation est un composant d'interface classique qui affiche et masque du contenu à la demande. Les utilisateurs s'attendent à pouvoir déployer des sections afin de révéler des informations supplémentaires sans naviguer vers une nouvelle page. Bien que de nombreux frameworks proposent des solutions préconstruites, les éléments HTML natifs details et summary offrent cette fonctionnalité sans aucun JavaScript et avec une accessibilité intégrée.

Comment fonctionnent Details et Summary

L'élément details sert de conteneur pour le contenu pliable, tandis que l'élément summary fournit le libellé interactif qui bascule la visibilité. Lorsqu'un utilisateur clique sur le summary ou le sélectionne par focus et appuie sur Entrée ou Espace, le contenu à l'intérieur de details se déploie ou se replie. Le navigateur gère automatiquement tout le suivi d'état, les interactions au clavier et l'animation.

Voici un exemple basique de la structure du balisage. L'élément summary doit être le premier enfant de details. Tout contenu suivant summary à l'intérieur de l'élément details devient la région pliable. Vous pouvez y placer des paragraphes, des listes, des images, ou même des éléments interactifs imbriqués au sein de la divulgation.

Par défaut, le navigateur affiche un triangle de divulgation à côté du texte du summary. Cet indicateur visuel communique aux utilisateurs l'état d'extensibilité et se met à jour automatiquement lorsque le contenu s'ouvre ou se ferme.

Accessibilité intégrée

L'un des arguments les plus solides en faveur de l'utilisation des éléments natifs details et summary est la base d'accessibilité qu'ils fournissent. Les éléments exposent les rôles et états ARIA appropriés aux technologies d'assistance sans aucun attribut supplémentaire. Les lecteurs d'écran annoncent l'état de divulgation, permettent la navigation au clavier et communiquent la nature interactive du summary en tant que bouton.

Le modèle prend en charge une opérabilité complète au clavier dès le départ. Les utilisateurs peuvent appuyer sur Tab pour donner le focus au summary, puis l'activer avec Entrée ou Espace. L'élément summary reçoit un rôle implicite de bouton, ce qui le rend focalisable et interactif de la manière attendue. Cela signifie que vous n'avez pas besoin d'ajouter tabindex, role, ou des gestionnaires keydown personnalisés pour atteindre une conformité d'accessibilité de base.

Possibilités de stylisation

Bien que le style par défaut du navigateur convienne au prototypage, vous pouvez personnaliser considérablement l'apparence via CSS. Le triangle de divulgation peut être masqué ou remplacé par des icônes personnalisées en utilisant le pseudo-élément ::marker ou en stylisant directement l'élément summary et en masquant l'indicateur par défaut.

Vous pouvez animer l'ouverture et la fermeture à l'aide de transitions CSS sur l'élément details, bien que les animations de hauteur complètes nécessitent traditionnellement de petites solutions de contournement en JavaScript, car l'animation vers height: auto n'est pas directement prise en charge. Les requêtes de conteneur CSS vous permettent d'adapter de manière responsive les composants de divulgation en fonction de la taille de leur conteneur, ce qui est utile lors de la création de composants de système de design.

Quand utiliser la divulgation native

L'implémentation native excelle pour les besoins simples d'extension et de repli comme les FAQ, la documentation d'aide ou les sections de contenu complémentaire. Elle se dégrade gracieusement dans les navigateurs plus anciens en affichant le contenu déployé par défaut. Cependant, pour les scénarios complexes nécessitant l'ouverture simultanée de plusieurs sections, un comportement d'accordéon personnalisé, ou une intégration étroite avec la gestion d'état du framework, vous pourriez encore avoir besoin d'une solution basée sur JavaScript.

Pour la plupart des sites web et applications axés sur le contenu, commencer avec les éléments natifs details et summary représente un choix pragmatique. Vous gagnez en justesse sémantique, en accessibilité et en réduction de la taille du bundle JavaScript sans sacrifier l'expérience utilisateur que les gens attendent des interfaces pliables.

Pour aller plus loin : https://micaavigliano.com/en/blog/all-you-need-is-details