Skip to Main Content

Accordéon

Les accordéons sont des listes d’en-têtes superposés à la verticale qui permettent aux utilisateurs de cacher ou de révéler du contenu et d’obtenir un aperçu général de l’information à laquelle ils peuvent accéder.

Utilisez-le quand :

  • Il y a beaucoup de contenu sur la page et le défilement doit être réduit parce qu’il n’y a pas assez d’espace (par exemple, sur un appareil mobile);
  • vous devez regrouper quelques renseignements connexes.
  • vous voulez que les utilisateurs aient un contrôle accru sur la façon dont ils consultent le contenu de la page.

Ne l’utilisez pas quand :

  • Ill n’y a pas suffisamment de contenu pour justifier l’utilisation d’accordéons ou il n’est pas logique de cacher le contenu à tous les utilisateurs;
  • l’utilisateur doit voir la totalité ou la plupart des renseignements sur la page.

Composant interactif

Intégration des bibliothèques

Utilisez le code ci-dessous pour ajouter cet élément à votre projet. Téléchargez la dernière version de la bibliothèque pour implémenter facilement notre ensemble complet d’éléments.

Angular HTML

Angular

Étape 1. Installer

Effectuez la commande suivante pour installer ce composant.

npm i [NPM-PLACE-HOLDER]/ds-accordions

Étape 2. Importer

Importer les éléments suivants dans votre dossier app.module.ts.

import { DsAccordionsModule } from 'ds-accordions';

D’extrait de code

<cpc-ds-accordions 
    [showToggleLink] = "true"
    collapseText = "Masquer tout"
    expandText = "Afficher tout"
    [accordionContents] = "accordionContents"
></cpc-ds-accordions>
Propriétés
Nom Type Défaut Description
showToggleLink boolean true

La valeur par défaut est "true" (vrai), ce qui affichera le bouton Expand all (Afficher tout). La valeur "false" (faux) masquera le bouton.

Afficher le bouton Expand all (Afficher tout) et Collapse all (Tout réduire).
collapseText string Masquer tout

Vous pouvez utiliser du texte. Les services linguistiques traiteront le texte en anglais ou en français.
expandText string Afficher tout

Vous pouvez utiliser du texte. Les services linguistiques traiteront le texte en anglais ou en français.
accordionContents array  

L’objet tableau contient deux clés : en-tête et contenu.

Le contenu doit se trouver dans une balise <p>.

accordionContents: AccordionContents[] = [ { heading: 'Heading 1', contents: `<p>Content here….</p> <p>Content here….</p>` }, { heading: 'Heading 2', contents: `<p>Content here…</p>` }, ]

HTML

Étape 1: Importer CSS

Importez l’URL suivante dans votre thème ou votre page.

<link type="text/css" href="[CSS-PLACE-HOLDER]" rel="stylesheet">

Étape 2 : Importer le fichier JavaScript et initialiser le composant

<script src="[JS-PLACE-HOLDER]"></script> 
<script>initAccordion();</script>

D’extrait de code

<div class="ds-accordions__container">
    <div class="accordion__controls">
        <button id="accordion-actions" class="ds-accordion__button--expand-all by-keyboard" aria-expanded="false">
            <span class="accordion--expand-open-all">Expand all</span>
            <span class="accordion--expand-close-all">Collapse all</span>
        </button>
    </div>
    <div class="ds-accordion" id="accordion-1">
        <button class="ds-accordion__button by-keyboard" id="accordion-button-id-1" aria-controls="accordion-content-1" aria-expanded="false" data-toggle="collapse">
            <h2>Heading</h2>
            <div class="accordion__button-icon--open"></div>
        </button>
        <div role="region" class="ds-accordion__content" id="accordion-content-1" aria-labelledby="accordion-button-id-1" aria-hidden="true" data-toggle="expander-content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet felis vel augue pulvinar pulvinar. Aliquam faucibus molestie faucibus. Suspendisse a ex pharetra, laoreet massa nec, auctor augue. Sed sit amet urna in quam feugiat aliquet. Fusce pulvinar ornare nulla, et porttitor ipsum aliquet ut. Pellentesque feugiat sodales mattis. Aliquam elementum sollicitudin lacus, eget tempus ex pulvinar eu. Quisque eu lacus a eros elementum placerat. Ut gravida lacinia enim, scelerisque facilisis massa fermentum ut. Nulla sollicitudin enim at elit lobortis, ac commodo mauris convallis. Curabitur felis est, suscipit quis felis in, feugiat sodales tortor.
            </p>
            <p>
                Maecenas sed rutrum eros. Integer lobortis euismod turpis, vel interdum massa fermentum id. Nunc libero enim, molestie eu dictum quis, aliquam ac nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed scelerisque tortor. Pellentesque ullamcorper pellentesque efficitur. Vivamus at aliquam orci. Cras a mauris porttitor mi condimentum viverra eget sit amet mauris. Nam dolor arcu, imperdiet vitae pellentesque sed, dignissim ac urna.
            </p>
        </div>
    </div>
    <div class="ds-accordion" id="accordion-2">
        <button class="ds-accordion__button by-keyboard" id="accordion-button-id-2" aria-controls="accordion-content-2" aria-expanded="false" data-toggle="collapse">
            <h2>Heading</h2>
            <div class="accordion__button-icon--open"></div>
        </button>
        <div role="region" class="ds-accordion__content" id="accordion-content-2" aria-labelledby="accordion-button-id-2" aria-hidden="true" data-toggle="expander-content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet felis vel augue pulvinar pulvinar. Aliquam faucibus molestie faucibus. Suspendisse a ex pharetra, laoreet massa nec, auctor augue. Sed sit amet urna in quam feugiat aliquet. Fusce pulvinar ornare nulla, et porttitor ipsum aliquet ut. Pellentesque feugiat sodales mattis. Aliquam elementum sollicitudin lacus, eget tempus ex pulvinar eu. Quisque eu lacus a eros elementum placerat. Ut gravida lacinia enim, scelerisque facilisis massa fermentum ut. Nulla sollicitudin enim at elit lobortis, ac commodo mauris convallis. Curabitur felis est, suscipit quis felis in, feugiat sodales tortor.
            </p>
            <p>
                Maecenas sed rutrum eros. Integer lobortis euismod turpis, vel interdum massa fermentum id. Nunc libero enim, molestie eu dictum quis, aliquam ac nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed scelerisque tortor. Pellentesque ullamcorper pellentesque efficitur. Vivamus at aliquam orci. Cras a mauris porttitor mi condimentum viverra eget sit amet mauris. Nam dolor arcu, imperdiet vitae pellentesque sed, dignissim ac urna.
            </p>
        </div>
    </div>
    <div class="ds-accordion" id="accordion-3">
        <button class="ds-accordion__button by-keyboard" id="accordion-button-id-3" aria-controls="accordion-content-3" aria-expanded="false" data-toggle="collapse">
            <h2>Heading</h2>
            <div class="accordion__button-icon--open"></div>
        </button>
        <div role="region" class="ds-accordion__content" id="accordion-content-3" aria-labelledby="accordion-button-id-3" aria-hidden="true" data-toggle="expander-content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet felis vel augue pulvinar pulvinar. Aliquam faucibus molestie faucibus. Suspendisse a ex pharetra, laoreet massa nec, auctor augue. Sed sit amet urna in quam feugiat aliquet. Fusce pulvinar ornare nulla, et porttitor ipsum aliquet ut. Pellentesque feugiat sodales mattis. Aliquam elementum sollicitudin lacus, eget tempus ex pulvinar eu. Quisque eu lacus a eros elementum placerat. Ut gravida lacinia enim, scelerisque facilisis massa fermentum ut. Nulla sollicitudin enim at elit lobortis, ac commodo mauris convallis. Curabitur felis est, suscipit quis felis in, feugiat sodales tortor.
            </p>
            <p>
                Maecenas sed rutrum eros. Integer lobortis euismod turpis, vel interdum massa fermentum id. Nunc libero enim, molestie eu dictum quis, aliquam ac nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed scelerisque tortor. Pellentesque ullamcorper pellentesque efficitur. Vivamus at aliquam orci. Cras a mauris porttitor mi condimentum viverra eget sit amet mauris. Nam dolor arcu, imperdiet vitae pellentesque sed, dignissim ac urna.
            </p>
        </div>
    </div>
</div>

Lignes directrices

Types d’accordéon et variations

Accordéon standard

L’accordéon standard est la base de tous les autres types d’accordéons et de leurs variations.

Bouton afficher tout/masquer tout

Le bouton permettant de développer/contracter tout est une variante facultative utilisée pour modifier un accordéon.

Il permet à l’utilisateur de faire ce qui suit :

  • Ouvrir ou fermer le corps de tous les accordéons en même temps.
  • Réduire rapidement la quantité de contenu affiché à l’écran.
  • Rechercher l’ensemble du contenu sur la page pour obtenir des renseignements précis.

Le bouton permettant de développer/contracter tout rend la navigation plus facile. Ce type de bouton est particulièrement pertinent pour les pages avec de nombreux accordéons (ou les accordéons avec un grand nombre d’en-têtes).

Règles relatives aux accordéons

Les accordéons ne doivent jamais :

  • Masquer des renseignements essentiels ou des messages d’erreur;
  • Être imbriqués (cela augmente la charge cognitive pour les utilisateurs);
  • Comporter des étiquettes imprécises dans les en-têtes puisque le contenu est caché;
  • Être ouverts par défaut;
  • Fermer un autre accordéon sur la page lorsqu’ils sont ouverts;
  • Réorienter ou déplacer la position de l’accordéon sur la page lorsqu’elle est ouverte ou fermée.

Placement

Placez les accordéons à l’intérieur du contenu principal ou des barres latérales.

Contenu connexe

Listes

Menus déroulants

Lignes directrices générales À faire et à ne pas faire

Lignes directrices générales

Le contenu utilisé dans un menu en accordéon dépendra entièrement du contexte. Créez des étiquettes d’en-tête du menu en accordéon (comme indiqué dans l’état réduit) descriptives, claires et concises. Les utilisateurs doivent être en mesure de comprendre rapidement ce qui se trouve à l’intérieur de chaque section. Les étiquettes d’en-tête du menu en accordéon doivent comporter une majuscule au premier mot.

Les étiquettes d’en-tête du menu en accordéon permettent d’accéder au contenu de l’onglet. Ces étiquettes doivent être claires et concises. Les utilisateurs peuvent ainsi prévoir le contenu des en-têtes des menus en accordéon.

  Lignes directrices Exemples
Longueur recommandée 1 ligne (ordinateur de bureau) Exécution, suivi et livraison des commandes
Saut de ligne Essayez de l’éviter pour l’affichage sur les ordinateurs de bureau et limitez-vous à 2 lignes pour l’affichage sur les appareils mobiles J’attends la livraison d’un article. Où puis-je trouver le numéro de repérage qui y est associé?
Formulation Il peut s’agir de phrases complètes formulées comme en-têtes, selon le contexte J’ai égaré le numéro de repérage de mon article. Postes Canada peut-elle m’aider?
Majuscule Majuscule en début de phrase, sans point Outils d’expédition

Exemples de codes

Section de base

Télécharger les fichiers

Angulaire

Télécharger les fichiers

À faire et à ne pas faire

Majuscules et minuscules

Utilisez une majuscule en début de phrase. Les utilisateurs peuvent ainsi trouver le contenu dont ils ont besoin en consultant les en-têtes du menu en accordéon. Évitez de mettre une majuscule à la première lettre de chaque mot ou de mettre uniquement des majuscules.

  • Comment repérer un colis en ligne
  • Comment Repérer Un Colis En Ligne

Architecture de l’information

N’utilisez pas les menus en accordéon pour cacher des renseignements importants ou des messages d’erreur.

État de livraison

  • Après avoir saisi votre numéro de repérage dans l’outil Repérage, la page des résultats du repérage indiquera l’état d’avancement de l’envoi.

État de livraison

  • Des feux de brousse retardent la livraison du courrier et des colis à destination de l’Australie.

Compléter les autres en-têtes du menu en accordéon

Formulez les en-têtes du menu en accordéon afin qu’elles soient harmonisées. En regardant les en-têtes, le lecteur peut ainsi avoir une bonne idée de la façon dont le contenu connexe a été divisé.

  • | Exécution, suivi et livraison des commandes | État de livraison | Outils d’expédition |
  • | Exécution, suivi et livraison des commandes | Comment puis-je faire le suivi d’un colis? | Outils d’expédition |

Lignes directrices

Halo de saisie

Les en-têtes en accordéon sont conçus pour être des boutons. Pour la saisie via le clavier, le halo doit demeurer autour de l’ensemble de l’en-tête en accordéon, qu’il soit déployé ou refermé. Par contre, le halo ne doit pas s’étendre au contenu.

Hiérarchisation des cibles via la tabulation

Si le bouton « Développer/Réduire tout » est présent, la cible de saisie doit d’abord être sur ce bouton. Sinon, elle se placera sur le premier en-tête figurant dans l’accordéon.

Tous les éléments pouvant être ciblés dans l’accordéon doivent être inclus dans la hiérarchisation des cibles pour la page. L’activation de la touche de tabulation doit faire déplacer la cible vers le prochain élément dans l’accordéon (la combinaison des touches « Maj+Tab » fera l’inverse). Par exemple, si l’utilisateur commence par le premier élément de l’accordéon, la cible se déplacera ensuite vers l’élément suivant, et ainsi de suite jusqu’au bas. Si l’utilisateur sélectionne le dernier élément de l’accordéon, la touche de tabulation déplacera la cible vers la prochaine cible en dehors de l’accordéon.

Si l’utilisateur déploie le contenu de l’en-tête avec le clavier (avec la touche « Retour » ou la barre d’espacement), le halo de saisie devra demeurer sur l’en-tête. Le halo ne s’étendra pas à son contenu. La cible de saisie peut se déplacer dans le contenu de l’en-tête si elle comporte des éléments pouvant être ciblés (par exemple, des liens). La cible se déplacera ensuite vers l’en-tête suivant lorsqu’il n’y a plus d’autres éléments « ciblables » dans le contenu.

Interaction avec le clavier

  • Touche de tabulation : Fait passer la cible du clavier à l’élément interactif suivant.
  • Combinaison des touches « Maj + Tab » : Fait passer la cible du clavier à l’élément interactif précédent.

Lorsque le menu en accordéon est affiché, la cible du clavier passe d’un élément interactif à l’autre dans le menu. Lorsque le menu en accordéon est masqué, la cible du clavier passe directement à l’en-tête du menu suivant ou précédent, selon les touches utilisées.

Si un en-tête en accordéon est mis en évidence :

  • Touche « Entrée » : Affiche le contenu du menu en accordéon s’il était masqué, et le masque s’il était affiché.
  • Barre d’espacement : Affiche le contenu du menu en accordéon s’il était masqué, et le masque s’il était affiché.

Si le bouton « Développer tout/Réduire tout » est mis en évidence :

  • Touche « Entrée » : Modifie l’étiquette du bouton et la visibilité de tout le contenu du menu en accordéon (l’affiche s’il était masqué, le masque s’il était affiché).
  • Barre d’espacement : Modifie l’étiquette du bouton et la visibilité de tout le contenu du menu en accordéon (l’affiche s’il était masqué, le masque s’il était affiché).

Lorsque les en-têtes en accordéon sont affichés un par un, le bouton « Développer tout » devient « Réduire tout », et vice versa.

Utilisation des en-têtes

Un en-tête en accordéon doit constituer un niveau de lecture important dans la page. Cela dit, il doit être sous-jacent à un en-tête de section qui précède l’affichage de l’accordéon. Autrement dit, l’en-tête de départ sera au sommet de la hiérarchie d’affichage, suivi, à un deuxième niveau, par les en-têtes en accordéon.

Autres points à considérer

Ancres de lien

Si une ancre de lien dans une page concerne des informations se trouvant dans le contenu d’un en-tête en accordéon, celle-ci doit être ciblée soit dans l’en-tête pour ce panneau, soit dans le contenu déployé de l’en-tête en question.

Si l’ancre concerne l’ensemble du contenu de l’accordéon, la cible de saisie sera sur le premier élément de l’en-tête en accordéon, et non sur l’ensemble de l’en-tête.

Accordéons utilisés comme contenu secondaire

Lorsqu’un accordéon ne fait pas partie du contenu principal d’une page (par exemple, l’information qu’il contient n’est pas la principale raison pour laquelle un utilisateur accéderait à la page), il peut être considéré comme un « aparté » (un aside). Dans ces cas, il peut être plus pertinent de placer l’ensemble de ce contenu secondaire dans un élément <aside>.

Test

Au moment de tester un menu en accordéon, le testeur doit s’assurer de ce qui suit :

  • Est entièrement accessible au moyen du clavier.
  • Les en-têtes en accordéon ont une fonction de « button ». La touche « Retour » et la barre d’espacement vont activer le déploiement ou la fermeture du contenu de l’en-tête.
  • Le bouton « Développer tout/Réduire tout » annonce son changement d’état par l’entremise du lecteur d’écran lorsqu’il est activé. La touche « Retour » ou la barre d’espacement activera ce même bouton.
  • Les en-têtes en accordéon annoncent leur changement d’état (agrandi/réduit) par l’entremise du lecteur d’écran lorsqu’ils sont activés.
  • Tous les éléments pouvant être ciblés (y compris les en-têtes en accordéon et les boutons « Développer tout/Réduire tout ») laisseront paraître un halo de saisie.
  • Par contre, le lecteur d’écran n’annonce pas le contenu d’un en-tête fermé.
  • Le lecteur d’écran peut naviguer dans le contenu d’un en-tête ouvert et le communiquer à l’utilisateur.

Contenu connexe