Organiser les contenus avec des accordéons et des détails

Séparer réponse essentielle et complément

La réponse principale, les limites d’une offre et les instructions nécessaires pour agir peuvent rester visibles. Réserver les panneaux aux détails évite d’obliger chacun à deviner où se trouve une condition importante. Vérifiez la page avec une personne qui ne connaît pas les titres retenus.

Chaque intitulé doit annoncer le contenu : « Documents à préparer » est plus utile que « Informations ». Si deux panneaux répondent à la même question, fusionnez-les ou précisez leur différence. Pour comparer plusieurs options, laissez les sections ouvertes ensemble ou proposez une présentation qui facilite la lecture côte à côte.

Choisir un élément natif ou un accordéon composé

HTML details et summary fournit une ouverture de contenu native. Un accordéon composé peut suivre le modèle W3C avec des commandes nommées et un état ouvert ou fermé communiqué. Ne rendez pas une icône seule responsable de l’ouverture : le titre doit former une cible utilisable.

Le choix doit tenir compte des liens vers une réponse, de la recherche dans la page et de l’impression. Testez ces usages dans les navigateurs visés. Si une destination arrive dans un panneau fermé, organisez l’ouverture ou offrez un lien vers une section visible qui permet de retrouver la réponse.

Conserver des états compréhensibles

Quand plusieurs sections sont ouvertes, le lecteur doit comprendre lesquelles restent affichées. Lorsqu’une seule ouverture est autorisée, vérifiez qu’ouvrir un autre panneau ne provoque pas un saut de lecture inattendu. Évitez de déplacer automatiquement le focus vers le contenu pour un simple complément.

Une FAQ éditoriale peut utiliser ces panneaux, mais les questions et réponses doivent toujours correspondre au texte publié. Préparez également le cas d’une réponse longue, d’un lien dans le panneau et d’un titre traduit sur deux lignes. Le repli visuel ne dispense ni du contrôle des faits ni de la maintenance des réponses.

Exemple : préparer une première demande

Exemple pédagogique : une page de service montre la prestation et les conditions essentielles. Trois compléments expliquent les documents, le déroulement et les questions après envoi. Le lecteur ouvre « Documents à préparer », copie une liste puis revient au formulaire. La recette vérifie qu’un lien envoyé par courriel permet de retrouver cette liste et que son ouverture ne fait pas perdre la position de lecture.