Contenu extensible et réductible
Le style de présentation « Agrandir et Réduire » vise à comprimer le contenu pour faciliter la recherche d’un sujet.
Approbateur de contenu
Approbateur de contenu
Votre demande doit comprendre :
- La maquette en format Microsoft Word.
- Indiquez dans votre maquette les endroits que vous voulez pouvoir agrandir ou réduire en :
- Indiquez "ajouter agrandir/réduire ici" à l’aide de la fonction commentaires.
- Étiquetez chaque nouvelle section pouvant être développée ou réduite en y ajoutant un en tête, suivi du texte normal du contenu de la section.
- Les sous sections du contenu seront codées comme s’inscrivant dans la partie pouvant être développée/réduite. Veuillez garder les sous sections à un seul niveau.
- Le surlignement en gris du texte sélectionné à l’aide de la fonction "ombrage" peut également être un indicateur visuel utile.
Fonction « Agrandir /Réduire » standard
Un
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem atque perferendis cumque eum tenetur voluptatibus expedita magnam non iste velit. Voluptate, vel ea, debitis possimus architecto eos atque. Expedita, facere.
Deux
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor corporis iusto illo laborum nesciunt voluptatem mollitia quisquam quia, nisi vel, impedit corrupti non laboriosam magnam, debitis. Enim architecto, dolorum pariatur!
Trois
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum aliquam reprehenderit deleniti vel, voluptates quo nostrum quibusdam minus! In cumque illum, debitis beatae aliquid repellat soluta, nisi molestias blanditiis ipsum.
Éditeur de contenu
Éditeur de contenu
Le style de présentation Agrandir/Réduire (détails/résumé) vise à comprimer le contenu afin de faciliter la recherche d’un sujet. Il existe deux options : la première permet de laisser les sections agrandies, peu importe le nombre de sections ouvertes; la deuxième (en accordéon) ne permet de conserver qu’une section ouverte à la fois. Des boutons permettant d’agrandir et de réduire toutes les sections, de même qu’un champ de filtre permettant de réduire le contenu aux éléments contenant un mot clé ou une phrase, sont également disponibles avec cette méthode.
- Exemples de contenu à agrandir/réduire
Étapes pour créer du contenu à agrandir/réduire
La fonction agrandir/réduire est souvent utilisée pour comprimer un contenu trop long. Il est préférable de permettre à l’utilisateur d’ouvrir toutes les sections en cliquant sur un bouton. Un filtre est également utile pour trouver un mot clé ou une phrase dans le contenu.
L’une des règles relativement au contenu à agrandir/réduire est qu’il n’est pas censé y avoir d’en têtes dans les sections. Cela s’explique par le fait qu’un logiciel de lecture d’écran ne pourra pas les détecter s’ils sont dissimulés. Codez les sous sections comme des sections à agrandir/réduire imbriquées. Encouragez le client à se limiter à un seul niveau.
Utilisez une balise « div » ainsi que le code "details elements" pour délimiter toute la section à agrandir/réduire. Il s’agira d’une cible pour les boutons « Agrandir tout » et « Réduire tout » Les boutons sont ajoutés à l’aide d’une fonction d’inclusion pour assurer l’uniformité du code dans l’ensemble du site.
- Code de boutons « Agrandir tout/réduire tout » :
<!--#include virtual="/includes/sp-es_prv/wet4/en/expand_bttns_only_EN.html" -->
<!--#include virtual="/includes/sp-es_prv/wet4/fr/expand_bttns_only_FR.html" -->
L’intégration du filtre fonctionne mieux sur une liste, alors ajoutez la classe "wb filter" à la liste non ordonnée.
<ul class="list-unstyled wb-filter">
Code
<div id="details-elements">
<!--#include virtual="/includes/sp-es_prv/wet4/en/expand_bttns_only_EN.html" -->
<ul class="list-unstyled wb-filter">
<li>
<details open=""><summary>Example 1</summary>
...
</details>
</li>
<li>
<details><summary>Example 2</summary>
...
</details>
</li>
</ul> </div> Détails/sommaire, code « polyfill » (contenu à agrandir/réduire)