Accordéons

Passer à la directive principale


        
        <h2>Pièces d’identité acceptées</h2>
<div class='ontario-accordions__container'>
    <div class='ontario-accordion__controls'>
        <button class='ontario-accordion__button--expand-all' aria-expanded='false'>
            <span class='ontario-accordion--expand-open-all'>Afficher tous</span>
            <span class='ontario-accordion--expand-close-all'>Masquer tous</span>
        </button>
    </div>
    <div class='ontario-accordion' id='accordion-1'>
        <h3 class='ontario-accordion-heading'>
            <button class='ontario-accordion__button' id='accordion-button-id-1' aria-controls='accordion-content-1' aria-expanded='false' data-toggle='ontario-collapse'>
                <span class='ontario-accordion__button-icon--close'>
                    <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                        <use href="#ontario-icon-chevron-up"></use>
                    </svg>
                </span>
                <span class='ontario-accordion__button-icon--open'>
                    <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                        <use href="#ontario-icon-chevron-down"></use>
                    </svg>
                </span>
                Citoyens canadiens
            </button>
        </h3>
        <section class='ontario-accordion__content' id='accordion-content-1' aria-labelledby='accordion-button-id-1' aria-hidden='true' data-toggle='ontario-expander-content'>
            <ul>
                <li>passeport (canadien ou autre)</li>
                <li>carte de citoyenneté canadienne avec photo</li>
                <li>certificat sécurisé de statut d’Indien (délivré à partir du 15&nbsp;décembre&nbsp;2009 par Affaires autochtones et Développement du Nord Canada</li>
                <li>carte-photo de l’Ontario</li>
            </ul>
        </section>
    </div>
    <div class='ontario-accordion' id='accordion-2'>
        <h3 class='ontario-accordion-heading'>
            <button class='ontario-accordion__button' id='accordion-button-id-2' aria-controls='accordion-content-2' aria-expanded='false' data-toggle='ontario-collapse'>
                <span class='ontario-accordion__button-icon--close'>
                    <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                        <use href="#ontario-icon-chevron-up"></use>
                    </svg>
                </span>
                <span class='ontario-accordion__button-icon--open'>
                    <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                        <use href="#ontario-icon-chevron-down"></use>
                    </svg>
                </span>
                Résidents permanents
            </button>
        </h3>
        <section class='ontario-accordion__content' id='accordion-content-2' aria-labelledby='accordion-button-id-2' aria-hidden='true' data-toggle='ontario-expander-content'>
            <ul>
                <li>Carte de résident permanent (CRP)</li>
                <li>Fiche d’établissement (IMM 1000)</li>
                <li>Confirmation de résidence permanente (IMM 5292) accompagné d’un passeport valide du pays d’origine</li>
                <li>Carte-photo de l’Ontario</li>
            </ul>
        </section>
    </div>
    <div class='ontario-accordion' id='accordion-3'>
        <h3 class='ontario-accordion-heading'>
            <button class='ontario-accordion__button' id='accordion-button-id-3' aria-controls='accordion-content-3' aria-expanded='false' data-toggle='ontario-collapse'>
                <span class='ontario-accordion__button-icon--close'>
                    <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                        <use href="#ontario-icon-chevron-up"></use>
                    </svg>
                </span>
                <span class='ontario-accordion__button-icon--open'>
                    <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                        <use href="#ontario-icon-chevron-down"></use>
                    </svg>
                </span>
                Résidents temporaires
            </button>
        </h3>
        <section class='ontario-accordion__content' id='accordion-content-3' aria-labelledby='accordion-button-id-3' aria-hidden='true' data-toggle='ontario-expander-content'>
            <ul>
                <li>Permis d’études/Autorisation d’étude (IMM 1442)</li>
                <li>Permis de travail/Autorisation d’emploi (IMM 1442)</li>
                <li>Fiche du visiteur (IMM 1442)</li>
                <li>Permis de séjour temporaire (IMM 1442)</li>
                <li>Demande de statut de réfugié (IMM 1434)</li>
                <li>Déclaration d’intention de demander le statut de réfugié(e) (IMM 7703) avec photo</li>
                <li>Rapport en vertu de la Loi sur l’immigration (IMM 1442) avec photo</li>
                <li>Carte-photo de l’Ontario</li>
            </ul>
        </section>
    </div>
</div>

<script src='../../scripts/ontario-expand-collapse.js'></script>

Contenu:


                                @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as placeholders;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;

.ontario-accordions__container {
	max-width: globalVariables.$standard-width;
	width: globalVariables.$full-width;
}

.ontario-accordion {
	border-top: 2px solid colours.$ontario-greyscale-20;

	&:last-of-type {
		border-bottom: 2px solid colours.$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: fontSizes.$ontario-font-size-standard-body-text;
	margin-bottom: spacing.$spacing-2;
	color: colours.$ontario-colour-link;
	cursor: pointer;

	&:focus,
	&:hover {
		color: colours.$ontario-colour-link--hover;
		text-decoration: underline;
	}

	&:focus {
		@extend %ontario-focus;
	}

	&:active {
		color: colours.$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: colours.$ontario-colour-link;
	cursor: pointer;
	padding: spacing.$spacing-3 spacing.$spacing-2;
	text-align: left;
	width: globalVariables.$full-width;
	@extend %h4-styles;
	margin-bottom: spacing.$spacing-0;

	.ontario-accordion__button-icon--close,
	.ontario-accordion__button-icon--open {
		margin-right: spacing.$spacing-2;
	}

	.ontario-icon {
		width: 1.75rem;
		height: 1.75rem;
	}

	&:focus,
	&:hover {
		background-color: colours.$ontario-greyscale-5;
		color: colours.$ontario-colour-link--hover;
	}

	&:focus {
		@extend %ontario-focus;
		box-shadow: 0 0 0 4px colours.$ontario-colour-focus inset;
	}

	&:active {
		color: colours.$ontario-colour-link--active;
	}
}

.ontario-accordion__content {
	display: none;
	padding: spacing.$spacing-3 spacing.$spacing-3 spacing.$spacing-6 spacing.$spacing-3;
	margin-left: spacing.$spacing-0;

	@media screen and (min-width: breakpoints.$small-breakpoint) {
		margin-left: spacing.$spacing-6;
	}

	* {
		margin-top: spacing.$spacing-0;
		max-width: globalVariables.$standard-width;
		width: globalVariables.$full-width;
	}

	ul,
	ol {
		max-width: calc(100% - spacing.$spacing-8);
	}

	& > :last-child {
		margin-bottom: spacing.$spacing-0;
	}
}

.ontario-accordion__button-icon--close,
.ontario-expander--active .ontario-accordion__button-icon--open {
	display: none;
}

.ontario-expander--active ~ .ontario-accordion__content,
.ontario-expander--active .ontario-accordion__button-icon--close {
	display: block;
}

.ontario-accordions__container {
	.ontario-h1,
	.ontario-h2,
	.ontario-h3,
	.ontario-h4,
	.ontario-h5,
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: spacing.$spacing-0;
	}
}

URL: /components/raw/accordions/accordions.scss
Chemin du système de fichiers: fractal/components/components/accordions/accordions.scss
Taille: 3.7 KB

Contenu:


                                .ontario-accordion__button--expand-all:focus,.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009adb;outline:4px solid transparent;transition:box-shadow .1s ease-in-out}.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;max-width:48rem}@media screen and (min-width: 40em){.ontario-accordion__button{font-size:1.5rem;letter-spacing:.0313rem;line-height:1.5}}.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-accordion__button-icon--close,.ontario-expander--active .ontario-accordion__button-icon--open{display:none}.ontario-expander--active~.ontario-accordion__content,.ontario-expander--active .ontario-accordion__button-icon--close{display:block}.ontario-accordions__container .ontario-h1,.ontario-accordions__container .ontario-h2,.ontario-accordions__container .ontario-h3,.ontario-accordions__container .ontario-h4,.ontario-accordions__container .ontario-h5,.ontario-accordions__container p,.ontario-accordions__container h1,.ontario-accordions__container h2,.ontario-accordions__container h3,.ontario-accordions__container h4,.ontario-accordions__container h5,.ontario-accordions__container h6{margin:0}

URL: /components/raw/accordions/accordions.css
Chemin du système de fichiers: fractal/components/components/accordions/accordions.css
Taille: 3.2 KB

Principe directeur : Commencer simplement.

Quand utiliser cette composante

Les accordéons sont une solution efficace pour dissimuler une partie du contenu et orienter l’attention des utilisateurs vers le contenu qui les concerne.

Utilisez les accordéons dans les circonstances suivantes :

Les utilisateurs doivent choisir du contenu, mais une seule option s’applique à leur situation.

Informations mutuellement exclusives
Vous voulez inclure du contenu qui concerne la plupart des utilisateurs, mais dont seuls quelques-uns ont besoin (p. ex., de l’information supplémentaire non requise pour accomplir la tâche principale).

Informations complémentaires ou secondaires

Avant d’utiliser cette composante, visualisez votre contenu sans accordéon. Si les accordéons allègent la page, ils dissimulent aussi des renseignements. Quand la majorité du contenu d’une page est masqué, les utilisateurs peuvent avoir l’impression qu’il ne s’y trouve rien d’important.

Plutôt que d’utiliser un accordéon, il pourrait être souhaitable :

de simplifier et de raccourcir le contenu;
de répartir le contenu sur plusieurs pages;
de séparer le contenu à l’aide de titres;
d’utiliser la fonction de navigation dans la page pour permettre aux utilisateurs de passer rapidement à une section précise.

Quand éviter cette composante

N’utilisez pas les accordéons :

si le contenu est essentiel pour tous les utilisateurs;
pour raccourcir les pages avec beaucoup de contenu;
dans les pages d’aide ou les foires aux questions;
dans les formulaires Web

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

Exemple illustrant que les fonctions CTRL-F et de recherche dans la page ne permettent pas toujours de repérer les mots dans les accordéons fermés.

Si la plupart des utilisateurs ont besoin de l’information sur la page pour accomplir la tâche principale, présentez tout le contenu sans accordéon, avec des liens vers chaque section à l’aide de la fonction de navigation dans la page, même si cela rallonge la page.

Si les utilisateurs doivent afficher la majorité des sous-sujets pour trouver réponse à leurs questions ou pour obtenir tous les renseignements nécessaires, n’utilisez pas d’accordéons.

Autres solutions dans les formulaires Web

Les accordéons sont réservés aux pages de contenu. Il existe des façons de simplifier un formulaire Web sans accordéon :

Utiliser un élargisseur d’indication pour présenter un texte d’indication qu’il est possible d’afficher ou de masquer dans un formulaire Web.
Afficher certaines questions seulement lorsqu’elles s’appliquent à la situation de l’utilisateur.
Diviser les questions de manière à en afficher une par page ou à créer des sections plus petites pour rendre le formulaire moins chargé et aider l’utilisateur à orienter son attention.

Pratiques exemplaires

À faire

Utiliser des étiquettes claires, courtes et descriptives.
Veiller à ce que les utilisateurs connaissent la nature du contenu avant de l’afficher.
Veiller à ce que chaque section se distingue clairement des autres.
Utiliser des étiquettes qui ne soient 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 formulaire Web dans des accordéons.
Intégrer des accordéons à d’autres 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 :

/scripts/ontario-expand-collapse.js

Pour que l’accordéon fonctionne avec ce script, la structure de l’accordéon, les classes et les attributs qui basculent doivent être inclus ou écrits comme indiqué dans l’exemple de cette page.

Le code de l’accordéon a été développé à titre d’exemple pour répondre aux besoins d’une page Web statique (HTML). Vous devrez adapter le code JavaScript aux contraintes de votre projet.

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.

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