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 '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as placeholders;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
@use '@ontario-digital-service/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.8 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

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 :

/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.