Page d’accueil Ontario.ca
English

Système de conception pour l'Ontario

Notre espace de noms npm a changé. Les développeurs doivent mettre à jour leurs projets pour continuer à accéder à nos composantes Web.

Liste des tâches

Utilisez la recherche semi-automatique pour faire des suggestions aux utilisateurs, et pour accélérer et faciliter vos recherches.

  • Contenu: 
    @use 'sass:math';
@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/2-tools/functions/global.functions' as globalFunctions;
@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/font-weights.variables' as fontWeights;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;

.ontario-task-list {
	border-top: globalFunctions.px-to-rem(2) solid colours.$ontario-greyscale-20;
	margin-left: spacing.$spacing-0;
	padding: spacing.$spacing-0;
	max-width: 48rem;

	li:last-child {
		padding-bottom: globalFunctions.px-to-rem(19);
	}
}

.ontario-task {
	border-bottom: globalFunctions.px-to-rem(2) solid colours.$ontario-greyscale-20;
	padding: globalFunctions.px-to-rem(19) spacing.$spacing-0;
	list-style: none;

	&__content {
		display: flex;
		justify-content: space-between;
		align-items: center;

		@media screen and (max-width: breakpoints.$small-breakpoint) {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}
	}

	&__label {
		text-align: left;
		margin: spacing.$spacing-0;
		font-size: globalFunctions.px-to-rem(19);
		font-weight: fontWeights.$ontario-font-weights-semi-bold;
		display: inline-block;

		@media screen and (max-width: breakpoints.$small-breakpoint) {
			margin-bottom: spacing.$spacing-2;
		}

		a {
			text-decoration: none;
			color: inherit;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	&__link {
		display: block;
		text-decoration: none;
		color: colours.$ontario-colour-link;
		font-weight: normal;
	}

	&__hint-text--true {
		margin-bottom: spacing.$spacing-2;
	}

	&--error {
		padding-left: spacing.$spacing-4;
		border-left: globalFunctions.px-to-rem(4) solid colours.$ontario-colour-alert;
		margin-left: globalFunctions.px-to-rem(-2);
	}

	.ontario-hint {
		margin-bottom: spacing.$spacing-0;

		@media screen and (max-width: breakpoints.$small-breakpoint) {
			margin-top: spacing.$spacing-2;
		}
	}
}

.ontario-task__link {
	.ontario-task__label {
		text-decoration: underline;
	}
}

.ontario-task__link:focus {
	outline: none;
	box-shadow: none;

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

.ontario-task:has(.ontario-task__link) {
	&:hover {
		background-color: colours.$ontario-greyscale-5;
	}
}

@mixin link-states {
	&:visited .ontario-task__label {
		color: colours.$ontario-colour-link--visited;
	}
	&:hover .ontario-task__label {
		color: colours.$ontario-colour-link--hover;
	}
	&:active .ontario-task__label {
		color: colours.$ontario-colour-link--active;
	}
}

.ontario-task {
	&--status-completed,
	&--status-inprogress,
	&--status-notstarted,
	&--status-optional,
	&--status-error {
		.ontario-task__link {
			.ontario-task__label {
				color: colours.$ontario-colour-link;
				text-decoration: underline;
			}
			@include link-states;
		}
	}
}

.ontario-badge {
	text-decoration: none;

	.ontario-task-status--not-started & {
		background-color: colours.$ontario-colour-information-light;
	}

	.ontario-task-status--in-progress & {
		background-color: colours.$ontario-colour-information;
		color: colours.$ontario-colour-white;
	}

	.ontario-task-status--error & {
		background-color: colours.$ontario-colour-alert;
		color: colours.$ontario-colour-white;
	}

	.ontario-task-status--complete & {
		background-color: colours.$ontario-colour-white;
		border: globalFunctions.px-to-rem(1) solid colours.$ontario-greyscale-70;
	}

	.ontario-task-status--optional & {
		background-color: colours.$ontario-greyscale-5;
	}

	.ontario-task-status--cannot-start-yet & {
		background-color: colours.$ontario-greyscale-20;
	}
}
  • URL: /components/raw/task-list/task-list.scss
  • Chemin du système de fichiers: fractal/components/components/task-list/task-list.scss
  • Taille: 4.1 KB
  • Contenu: 
    .ontario-task__link:focus .ontario-task__label{box-shadow:0 0 0 4px #009adb;outline:4px solid transparent;transition:box-shadow .1s ease-in-out}.ontario-task-list{border-top:.125rem solid #ccc;margin-left:0;padding:0;max-width:48rem}.ontario-task-list li:last-child{padding-bottom:1.1875rem}.ontario-task{border-bottom:.125rem solid #ccc;padding:1.1875rem 0;list-style:none}.ontario-task__content{display:flex;justify-content:space-between;align-items:center}@media screen and (max-width: 40em){.ontario-task__content{display:flex;flex-direction:column;align-items:flex-start}}.ontario-task__label{text-align:left;margin:0;font-size:1.1875rem;font-weight:600;display:inline-block}@media screen and (max-width: 40em){.ontario-task__label{margin-bottom:.5rem}}.ontario-task__label a{text-decoration:none;color:inherit}.ontario-task__label a:hover{text-decoration:underline}.ontario-task__link{display:block;text-decoration:none;color:#06c;font-weight:normal}.ontario-task__hint-text--true{margin-bottom:.5rem}.ontario-task--error{padding-left:1rem;border-left:.25rem solid #cd0000;margin-left:-0.125rem}.ontario-task .ontario-hint{margin-bottom:0}@media screen and (max-width: 40em){.ontario-task .ontario-hint{margin-top:.5rem}}.ontario-task__link .ontario-task__label{text-decoration:underline}.ontario-task__link:focus{outline:none;box-shadow:none}.ontario-task__link:focus .ontario-task__label{box-shadow:0 0 0 4px #009adb inset}.ontario-task:has(.ontario-task__link):hover{background-color:#f2f2f2}.ontario-task--status-completed .ontario-task__link .ontario-task__label,.ontario-task--status-inprogress .ontario-task__link .ontario-task__label,.ontario-task--status-notstarted .ontario-task__link .ontario-task__label,.ontario-task--status-optional .ontario-task__link .ontario-task__label,.ontario-task--status-error .ontario-task__link .ontario-task__label{color:#06c;text-decoration:underline}.ontario-task--status-completed .ontario-task__link:visited .ontario-task__label,.ontario-task--status-inprogress .ontario-task__link:visited .ontario-task__label,.ontario-task--status-notstarted .ontario-task__link:visited .ontario-task__label,.ontario-task--status-optional .ontario-task__link:visited .ontario-task__label,.ontario-task--status-error .ontario-task__link:visited .ontario-task__label{color:#551a8b}.ontario-task--status-completed .ontario-task__link:hover .ontario-task__label,.ontario-task--status-inprogress .ontario-task__link:hover .ontario-task__label,.ontario-task--status-notstarted .ontario-task__link:hover .ontario-task__label,.ontario-task--status-optional .ontario-task__link:hover .ontario-task__label,.ontario-task--status-error .ontario-task__link:hover .ontario-task__label{color:#00478f}.ontario-task--status-completed .ontario-task__link:active .ontario-task__label,.ontario-task--status-inprogress .ontario-task__link:active .ontario-task__label,.ontario-task--status-notstarted .ontario-task__link:active .ontario-task__label,.ontario-task--status-optional .ontario-task__link:active .ontario-task__label,.ontario-task--status-error .ontario-task__link:active .ontario-task__label{color:#002142}.ontario-badge{text-decoration:none}.ontario-task-status--not-started .ontario-badge{background-color:#e2f0f4}.ontario-task-status--in-progress .ontario-badge{background-color:#1080a6;color:#fff}.ontario-task-status--error .ontario-badge{background-color:#cd0000;color:#fff}.ontario-task-status--complete .ontario-badge{background-color:#fff;border:.0625rem solid #4d4d4d}.ontario-task-status--optional .ontario-badge{background-color:#f2f2f2}.ontario-task-status--cannot-start-yet .ontario-badge{background-color:#ccc}
  • URL: /components/raw/task-list/task-list.css
  • Chemin du système de fichiers: fractal/components/components/task-list/task-list.css
  • Taille: 3.7 KB

Principe directeur: Créer des tableaux accessibles à tout le monde.

À propos de cette composante

La liste des tâches permet d’afficher un ensemble d’étapes. Elle apparaît au début d’un processus de formulaire ou de demande complexe pour aider les utilisateurs à comprendre :

  • les étapes à suivre pour remplir le formulaire;
  • faire le suivi des tâches terminées et en attente;
  • suivre l’ordre requis pour certaines tâches.

Chaque tâche établit clairement les attentes et divise le processus en étapes gérables, ce qui permet aux utilisateurs de se concentrer sur une section à la fois.

La liste des tâches sert en tant queIl faut envisager d’utiliser une liste de tâches lorsqu’un utilisateur :

  • « page d’accueil » à laquelle l’utilisateur revient après avoir terminé chaque tâche;
  • moyen de naviguer vers des sections précises du formulaire qui pourraient devoir être mises à jour, examinées ou remplies plus tard.

Quand utiliser cette composante

Il faut envisager d’utiliser une liste de tâches lorsqu’un utilisateur :

  • a besoin de plusieurs séances pour remplir un formulaire;
  • a besoin de souplesse pour effectuer une tâche dans l’ordre qu’il préfère;
  • devrait connaître toutes les sections à l’avance (par exemple, pour préparer les utilisateurs à obtenir l’information dont ils ont besoin à l’avance).

Quand ne pas utiliser cette composante

Pratique exemplaire : Essayez de simplifier le service avant d’utiliser une liste de tâches.

Pour les formulaires courants qui suivent un processus linéaire, une liste de tâches n’est généralement pas requise.

Pour un formulaire long en plusieurs étapes, utilisez un indicateur d’étape pour indiquer la progression.

Caractéristiques de la composant

Exemple

Exemple des caractéristiques d’une seule ligne de la liste des tâches. Les fonctions comprennent un nom de tâche, un badge de l’état et une étiquette de conseil facultative. Vous devez pouvoir cliquer sur toute la ligne.

Nom de la tâche

Les tâches doivent être courtes et descriptives pour aider les utilisateurs à comprendre l’activité nécessaire à l’exécution de la tâche.

Conseil facultatif

Les conseils fournissent plus de renseignements sur la nature de la tâche. Utilisez des phrases courtes et simples pour faciliter la navigation des utilisateurs de lecteurs d’écran.

Badge de l’état

Les badges de l’état permettent aux utilisateurs de voir rapidement où ils en sont. Chaque tâche doit être associée à un badge de l’état afin d’aider les utilisateurs à comprendre leur progression.

États disponibles

                                                                                                                                                                                             
ÉtatClasse CSSUtilisation
Pas encore commencé`ontario-task-status--not-started`Tâches prêtes à commencer
En cours`ontario-task-status--in-progress`Tâches qui ont été commencées, mais qui n’ont pas été terminées
Terminé`ontario-task-status--completed`Tâches terminées
Ne peut pas commencer`ontario-task-status--cannot-start-yet`Tâches qui exigent que d’autres tâches soient accomplies en premier
Facultatif`ontario-task-status--optional`Tâches facultatives
Erreur`ontario-task-status--error`Erreurs pour la tâche qui se produisent lorsqu’elles sont terminées

Remarque : Il faut attribuer le nom de catégorie d’état approprié à l’élément <li class="ontario-task">. Cela permet de s’assurer que la couleur correspondante du badge est appliquée, tel que défini dans notre CSS.

Le fonctionnement

Aperçu général

Exemple

Le diagramme montre l’enchaînement d’une liste de tâches mise à jour après que chaque page du formulaire a été remplie et que chaque section du formulaire a été examinée.
  1. Présenter la liste des tâches aux utilisateurs au début d’un processus de formulaire ou de demande complexe. L’affichage initial (« page d’accueil ») devrait indiquer toutes les étapes et leur état.
  2. Lorsque l’utilisateur clique sur une tâche admissible, il est dirigé vers les pages du formulaire de tâche.
  3. Une fois que l’utilisateur a atteint la fin du formulaire, la pratique exemplaire consiste à avoir une page de révision de la section du formulaire et de laisser l’utilisateur décider quand une tâche est terminée.
  4. L’utilisateur doit être ramené à la page d’accueil de la liste des tâches une fois qu’il a terminé et les états de la liste des tâches doivent être mis à jour.

Considérations relatives à la liste des tâches

Ordre des tâches

L’ordre dans lequel les tâches et les étapes s’affichent doit être fondé sur ce qui est logique pour l’application. Par exemple, vous pourriez utiliser la première tâche pour poser des questions d’admissibilité afin de filtrer ou de présélectionner les utilisateurs.

Les utilisateurs suivent habituellement l’ordre présenté, alors numérotez les tâches si une séquence particulière est requise.

Dans la mesure du possible, laissez l’utilisateur effectuer les tâches dans n’importe quel ordre afin qu’il puisse remplir les sections dans l’ordre de son choix.

Regroupement des tâches

Pour améliorer l’expérience de l’utilisateur, divisez le formulaire en tâches plus petites afin de rendre le processus plus facile à gérer. Cela les aide à franchir les étapes du formulaire.

Regroupez les tâches dans des listes distinctes et placez-les sous un en-tête.

Exemple

Exemple des caractéristiques d’une composante complète de la liste des tâches. Les fonctions comprennent un en-tête de section, un titre de liste des tâches et une série de tâches.

Laissez l’utilisateur décider quand une tâche est terminée

Il est parfois utile de laisser l’utilisateur indiquer quand il a terminé chaque tâche. Vous pouvez le faire en ajoutant une question obligatoire qui demande s’il a rempli une section.

Exemple

Écran de révision de la section du formulaire contenant les réponses de l’utilisateur et une question lui demandant si l’utilisateur a rempli cette section en utilisant les options « oui » ou « non ».

Marquage des tâches en cours

Une tâche doit avoir le badge d’état « En cours » si un utilisateur :

  • commence une tâche, mais qu’il ne l’accomplit pas (en laissant une page vide accidentellement ou intentionnellement);
  • indique que sa tâche est toujours en cours dans la section de révision.

Pratique exemplairer : Les réponses laissées par l’utilisateur dans le formulaire sont enregistrées. Pour plus de détails, reportez-vous à l’article sur l’enregistrement des données.

Erreurs

Dans certains cas l’état d’erreur apparaîtra pour une tâche.

Par exemple : « L’information saisie ne correspond pas, veuillez revoir les sections marquées d’une erreur. »

Utilisez un badge d’erreur et associez-le à une alerte de page en haut de la page pour diriger les utilisateurs vers la tâche qui doit être corrigée.

Exemple

Texte de remplacement : Une tâche à l’état d’erreur. Une alerte de page au-dessus de la liste des tâches précise l’erreur, et le texte d’accompagnement sous le nom de la tâche précise également l’erreur. L’état du badge est défini sur erreur.

Lorsque l’utilisateur est prêt à soumettre le formulaire

Exemple

Texte de remplacement : Le flux utilisateur montre le passage d’une liste de tâches terminées à l’écran de révision finale du formulaire, puis de l’écran de révision finale du formulaire à un écran de confirmation.

Une fois que toutes les tâches admissibles sont terminées, permettez à l’utilisateur de soumettre le formulaire avec un bouton de soumission.

Si un utilisateur tente de passer en revue et de soumettre un formulaire incomplet, signalez les sections manquantes et ajoutez un lien vers celles-ci avec une alerte de page.

Une fois la demande soumise, la page devrait afficher une révision finale du formulaire afin que les utilisateurs puissent vérifier ou modifier leurs réponses avant de soumettre leur demande.

Un écran de confirmation doit s’afficher une fois que la demande complète a été soumise.

Spécifications techniques

Accessibilité

Il est essentiel de respecter des exigences précises en matière d’accessibilité pour assurer une expérience harmonieuse pour tous.

Considérations sémantiques HTML

Élément de liste

Chaque tâche est entourée d’une balise <li> avec role="group", indiquant aux technologies d’assistance que le contenu fait partie d’un ensemble plus vaste, comme une liste de tâches.

  • aria-labelledby : Doit faire référence à l’identifiant de l’élément d’en-tête (étiquette de tâche) pour assurer une relation claire.
  • aria-describedby : Devrait faire référence à l’identifiant de l’élément <p> du texte d’aide, le cas échéant.

Nom de la tâche

Le nom de la tâche principale est représenté par un élément d’en-tête. Cela assure une hiérarchie sémantique et fournit une étiquette descriptive pour les lecteurs d’écran.

  • Ajouter un id à l’en-tête (par ex., task-label) afin qu’il puisse avoir la référence aria-labelledby dans la balise <li>.

État de la tâche

L’état actuel de la tâche est affiché dans une balise <div> avec role="status". Cela annonce des mises à jour dynamiques de l’état des technologies d’assistance.

  • L’étiquette aria-label sur le badge de l’état doit inclure un texte descriptif (p. ex., « État de la tâche : En cours »).

Enregistrement de données

Lorsque vous mettez en œuvre l’enregistrement automatique dans les composantes de la liste des tâches, envisagez cette approche souple en suivant les recommandations générales pour équilibrer la fonctionnalité, l’expérience utilisateur et la sécurité (selon votre cas d’utilisation particulier).

Pour les utilisateurs connectés :

Pratique exemplaire :

  • L’enregistrement automatique permet d’enregistrer les progrès en toute sécurité en reliant les données aux comptes. Les sauvegardes régulières préviennent la perte de données, et le chiffrement assure la sécurité des renseignements.
  • L’option d’enregistrement manuel permet aux utilisateurs de contrôler, tandis que le contrôle des versions leur permet de restaurer les états précédents. .
  • Les sessions doivent prendre fin après une période d’inactivité afin de protéger les données utilisateur. L’enregistrement automatique peut également mettre à jour les états dans la liste des tâches.

Pour les utilisateurs anonymes :

Pratique exemplaire :

  • Utiliser sessionStorage pour enregistrer temporairement la progression, car elle disparaît lorsque le navigateur est fermé.
  • Évitez d’enregistrer localement les données sensibles afin de réduire les risques pour la sécurité. Si vous devez les enregistrer sur le serveur, anonymisez les données et utilisez des jetons de session qui vont expirer.
  • Avisez clairement les utilisateurs de l’enregistrement automatique, tout en réduisant au minimum les données stockées, puis traitez efficacement les erreurs et respectez les lois sur la protection des renseignements personnels.

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