Cours HTML / Créer un contenu dépliable avec details et summary

details et summary créent un contenu que les utilisateurs peuvent développer et réduire sans écrire de JavaScript. Ils conviennent pour des explications optionnelles, des instructions plus longues ou des réponses que les lecteurs pourraient vouloir révéler à la demande.

Créer un panneau dépliable simple

<details>

  <summary>Voir les heures d’ouverture</summary>

  <p>Nous ouvrons du lundi au vendredi, de 9 h à 18 h.</p>

</details>

Mettez le code dans le body d'un document HTML et ouvrez-le dans un navigateur. Au départ, seul « Voir les heures d'ouverture » apparaît. Activez ce texte avec un pointeur ou le clavier pour révéler le paragraphe ; activez-le à nouveau pour le refermer. Mettez le summary d'abord à l'intérieur de details. Le navigateur fournit l'état de dépliage de base et l'interaction ; vous n'avez pas besoin d'un script uniquement pour l'ouvrir et le fermer.

Le marqueur et les bordures peuvent sembler différents selon les navigateurs ou après le style CSS. Ce qui importe, c'est que l'étiquette reste claire, que le contenu s'ouvre et se ferme, et que le focus clavier reste visible.

Afficher le contenu initialement

Ajoutez l'attribut open lorsque le panneau doit être affiché ouvert au départ. Les utilisateurs peuvent toujours le fermer et le rouvrir. La règle de présence booléenne est également démontrée avec checked dans Syntaxe HTML.

<details open>

  <summary>Informations de livraison</summary>

  <p>Les délais d’arrivée varient selon la zone.</p>

</details>

open est un attribut booléen. Écrire open="false" laisse toujours l'attribut présent et ouvre le panneau au départ. Supprimez complètement l'attribut pour démarrer fermé. Ne cachez pas une condition que tout le monde doit lire comme s'il s'agissait d'une information supplémentaire facultative.

Choisissez des intitulés utiles

Plusieurs éléments details peuvent apparaître ensemble, mais chaque summary doit identifier ce qu'il révèle. Répéter « Plus d'informations » rend les éléments difficiles à distinguer. Une question fréquemment posée peut correspondre à ce modèle, mais si sa réponse est courte et immédiatement utile, un texte visible ordinaire peut être plus rapide pour les lecteurs.

Testez le résultat avec un clavier et sur un écran étroit. La référence de details sur MDN décrit sa structure et ses attributs.

Vérifiez le fonctionnement du clavier et l'état initial

1. Rouvrez le fichier et comparez l’exemple fermé sans open à l’exemple ouvert avec open.
2. Appuyez sur Tab pour accéder au résumé et vérifiez son indicateur de focus. Gardez ce résumé de base en texte plutôt que d'y placer des liens ou des boutons concurrents.
3. Utilisez Entrée et Espace séparément pour l'ouvrir et le fermer. Si vous ajoutez du CSS, répétez le test pour vous assurer que le focus reste visible.

HTML fournit le mécanisme natif de dépliage, mais ajouter d'autres interactions peut introduire un comportement de focus qui nécessite encore des tests. La référence au résumé de MDN décrit ses conditions d'utilisation.

Si cela ne fonctionne pas

Vérifiez que summary se trouve à l'intérieur de details et que les balises de fermeture sont présentes. Si vous avez stylisé le contrôle, assurez-vous que la zone cliquable et l'indicateur de focus visible n'ont pas été supprimés. Un panneau dépliable oblige les lecteurs à effectuer une action supplémentaire, il est donc préférable de la réserver aux contenus réellement optionnels ou longs plutôt que de l'utiliser uniquement pour un effet visuel. Étendez la revue du focus et de l'interaction avec la petite page dans Bases de l'accessibilité : Titres, Liens, Images et Clavier.