Accordéons

Utilisez des accordéons pour qu’il soit possible d’afficher ou de masquer certaines sections sur des pages complexes.

  • Contenu:
    @import "../../../theme/assets/styles/sass/variables-import";
    @import "../../../theme/assets/styles/sass/tools/focus.placeholder";
    
    .ontario-accordions__container {
        max-width: $standard-width;
        width: $full-width;
    }
    
    .ontario-accordion {
        border-top: 2px solid $ontario-greyscale-20;
    
        &:last-of-type {
            border-bottom: 2px solid $ontario-greyscale-20;
        }
    }
    
    .ontario-accordion__controls {
        display: flex;
        justify-content: flex-end;
    }
    
    .ontario-accordion__button,
    .ontario-accordion__button--expand-all {
        background: none;
        border: 0;
        box-sizing: border-box;
    }
    
    .ontario-accordion__button--expand-all {
        font-size: 1rem;
        margin-bottom: $spacing-2;
        color: $ontario-colour-link;
        cursor: pointer;
    
        &:focus,
        &:hover {
            color: $ontario-colour-link--hover;
            text-decoration: underline;
        }
    
        &:focus {
            @extend %ontario-focus;
        }
    
        &:active {
            color: $ontario-colour-link--active;
            text-decoration: underline;
        }
    }
    
    .ontario-accordion--expand-close-all {
        display: none;
    }
    
    .ontario-accordion__controls--active {
        .ontario-accordion--expand-close-all {
            display: block;
        }
    
        .ontario-accordion--expand-open-all {
            display: none;
        }
    }
    
    .ontario-accordion__button {
        display: flex;
        align-items: flex-start;
    
        color: $ontario-colour-link;
        cursor: pointer;
        padding: $spacing-3 $spacing-2;
        text-align: left;
        width: $full-width;
        @extend %h4-styles;
        margin-bottom: 0;
    
    
        .ontario-accordion__button-icon--close,
        .ontario-accordion__button-icon--open {
            margin-right: $spacing-2;
        }
    
        .ontario-icon {
            width: 1.75rem;
            height: 1.75rem;
        }
    
        &:focus,
        &:hover {
            background-color: $ontario-greyscale-5;
            color: $ontario-colour-link--hover;
        }
    
        &:focus {
            @extend %ontario-focus;
            box-shadow: 0 0 0 4px $ontario-colour-focus inset;
        }
    
        &:active {
            color: $ontario-colour-link--active;
        }
    }
    
    .ontario-accordion__content {
        display: none;
        padding: $spacing-3 $spacing-3 $spacing-6 $spacing-3;
        margin-left: 0;
    
        @media screen and (min-width: $small-breakpoint) {
            margin-left: $spacing-6;
        }
    
        * {
            margin-top: 0;
            max-width: $standard-width;
            width: $full-width;
        }
    
        ul,
        ol {
            max-width: calc(100% - 3rem);
        }
    
        & > :last-child {
            margin-bottom: 0;
        }
    }
    
    .ontario-expander--active {
        .ontario-accordion__content,
        .ontario-accordion__button-icon--close {
            display: block;
        }
    
        .ontario-accordion__button-icon--open {
            display: none;
        }
    }
    
    .ontario-accordion__button-icon--close {
        display: none;
    }
    
  • URL: /components/raw/accordions/accordions.scss
  • Chemin du système de fichiers: fractal/components/components/accordions/accordions.scss
  • Taille: 2.8 KB
  • Contenu:
    .ontario-accordion__button{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.ontario-accordion__button{font-size:1.25rem;letter-spacing:.03rem;line-height:1.5;margin:0 0 .75rem 0}@media screen and (min-width: 40em){.ontario-accordion__button{font-size:1.5rem;letter-spacing:.0313rem;line-height:1.5}}.ontario-accordion__button:focus,.ontario-accordion__button--expand-all:focus{box-shadow:0 0 0 4px #009adb;outline:4px solid transparent;transition:box-shadow .1s ease-in-out}.ontario-accordions__container{max-width:48rem;width:100%}.ontario-accordion{border-top:2px solid #ccc}.ontario-accordion:last-of-type{border-bottom:2px solid #ccc}.ontario-accordion__controls{display:flex;justify-content:flex-end}.ontario-accordion__button,.ontario-accordion__button--expand-all{background:none;border:0;box-sizing:border-box}.ontario-accordion__button--expand-all{font-size:1rem;margin-bottom:.5rem;color:#06c;cursor:pointer}.ontario-accordion__button--expand-all:focus,.ontario-accordion__button--expand-all:hover{color:#00478f;text-decoration:underline}.ontario-accordion__button--expand-all:active{color:#002142;text-decoration:underline}.ontario-accordion--expand-close-all{display:none}.ontario-accordion__controls--active .ontario-accordion--expand-close-all{display:block}.ontario-accordion__controls--active .ontario-accordion--expand-open-all{display:none}.ontario-accordion__button{display:flex;align-items:flex-start;color:#06c;cursor:pointer;padding:.75rem .5rem;text-align:left;width:100%;margin-bottom:0}.ontario-accordion__button .ontario-accordion__button-icon--close,.ontario-accordion__button .ontario-accordion__button-icon--open{margin-right:.5rem}.ontario-accordion__button .ontario-icon{width:1.75rem;height:1.75rem}.ontario-accordion__button:focus,.ontario-accordion__button:hover{background-color:#f2f2f2;color:#00478f}.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009adb inset}.ontario-accordion__button:active{color:#002142}.ontario-accordion__content{display:none;padding:.75rem .75rem 2rem .75rem;margin-left:0}@media screen and (min-width: 40em){.ontario-accordion__content{margin-left:2rem}}.ontario-accordion__content *{margin-top:0;max-width:48rem;width:100%}.ontario-accordion__content ul,.ontario-accordion__content ol{max-width:calc(100% - 3rem)}.ontario-accordion__content>:last-child{margin-bottom:0}.ontario-expander--active .ontario-accordion__content,.ontario-expander--active .ontario-accordion__button-icon--close{display:block}.ontario-expander--active .ontario-accordion__button-icon--open{display:none}.ontario-accordion__button-icon--close{display:none}
  • URL: /components/raw/accordions/accordions.css
  • Chemin du système de fichiers: fractal/components/components/accordions/accordions.css
  • Taille: 2.7 KB

Principe directeur : Commencer simplement.

Quand utiliser cette composante

Visualisez d’abord votre contenu sans accordéon. Plutôt que d’utiliser un accordéon, il pourrait être souhaitable de :

  • simplifier et raccourcir le contenu;
  • diviser le contenu sur plusieurs pages;
  • garder le contenu sur une seule page divisée par en-têtes;
  • utiliser une liste de liens comme table des matières (« Dans cette page »), que les utilisateurs pourront utiliser pour accéder rapidement aux différentes sections

Les accordéons sont une solution efficace dans certains cas :

  • Pour donner un aperçu de plusieurs sections connexes.
  • Pour présenter des catégories bien distinctes.
  • Pour présenter du contenu qui ne concerne pas la plupart des utilisateurs (p. ex. un supplément d’information non requis pour accomplir la tâche principale).

Quand éviter cette composante

Les accordéons ne conviennent pas au contenu essentiel pour tous les utilisateurs. Ils masquent le contenu, qu’il est alors impossible de trouver avec la fonction de recherche du navigateur (CTRL+F). Certains utilisateurs ne les remarqueront pas ou n’en comprendront pas le fonctionnement.

Si la plupart des utilisateurs auront besoin du contenu pour accomplir la tâche principale, présentez tout le contenu sans accordéon, même si cela rend la page longue. Si les utilisateurs devront afficher la majorité des sous-sujets pour trouver réponse à leurs questions ou pour obtenir tous les renseignements nécessaires, un accordéon n’est pas la solution.


Pratiques exemplaires

À faire :

  • utiliser des étiquettes d’accordéon claires qui :
    • emploient un langage concis et descriptif
    • feront en sorte que les utilisateurs connaîtront la nature du contenu avant de l’afficher
    • distingueront clairement les différentes sections
    • ne sont ni vagues, ni génériques (p. ex. « Ressources supplémentaires »)

À ne pas faire :

  • afficher automatiquement le contenu des accordéons
  • masquer des sections de formulaires dans des accordéons

Formulaires

Les accordéons sont réservés aux pages de contenu. Pour présenter dans un formulaire un texte d’indication qu’il est possible d’afficher ou de masquer, utilisez plutôt un élargisseur d’indication.


Spécifications techniques

Notes techniques

L’accordéon nécessite le code JavaScript suivant :

Accessibilité

Bouton de l’accordéon

On emploie un bouton comme contrôle de l’accordéon afin que les utilisateurs puissent le sélectionner à l’aide de la touche de tabulation du clavier et qu’il soit trouvable par les lecteurs d’écran. Le bouton doit être doté de trois attributs pour répondre aux exigences d’accessibilité :

  • Un id qui correspond à la valeur aria-labelledby du contenu de l’accordéon, pour associer le contenu au bouton.
  • Un attribut aria-expanded initialement configuré à « false », qui bascule à « true » lorsque le contenu de l’accordéon est affiché.
  • • Un attribut aria-controls qui est associé à l’identifiant du conteneur, pour indiquer que le bouton exerce un contrôle et agit sur le contenu de l’accordéon.

Conteneur de l’accordéon

Le conteneur de l’accordéon doit être doté de trois attributs pour répondre aux exigences d’accessibilité :

  • Un id qui correspond à l’attribut aria-controls de son bouton.
  • Un attribut aria-hidden initialement configuré à « true », qui bascule à « false » lorsque le contenu est affiché.
  • Une valeur aria-labelledby qui correspond au bouton de l’accordéon.

Liens vers le contenu de l’accordéon

Le script ontario-collapse-expand.js permet aussi de créer des liens qui ouvriront des sections précises de l’accordéon. Pour ce faire, les liens doivent avoir le nom de classe ontario-accordion-link et une valeur href associée à un id ajouté au conteneur ontario-accordion en question.


Pour nous joindre

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.