Page d’accueil Ontario.ca
English

Système de conception pour l'Ontario

Texte d’indication

Rédigez un texte d’indication clair et concis pour orienter les utilisateurs lorsqu’ils remplissent les formulaires.

  • 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/1-variables/typography.variables' as typography;
@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/font-sizes.variables' as fontSizes;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;

.ontario-hint {
	color: colours.$ontario-greyscale-70;
	display: inline-block;
	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;
	width: globalVariables.$full-width;
	max-width: globalVariables.$standard-width;

	// This is a fix to prevent auto-detection of phone numbers in Firefox & Safari on iPhone devices
	a[x-apple-data-detectors] {
		color: inherit;
		cursor: none;
		text-decoration: none;
	}
}

.ontario-hint-expander__container {
	max-width: globalVariables.$standard-width;
}

.ontario-hint-expander__button {
	color: colours.$ontario-colour-link;
	cursor: pointer;
	background: none;
	border: none;
	display: flex;
	font-family: typography.$ontario-font-open-sans;
	font-weight: fontWeights.$ontario-font-weights-normal;
	font-size: fontSizes.$ontario-font-size-standard-body-text;
	text-align: left;
	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;
	padding: spacing.$spacing-0 spacing.$spacing-1 spacing.$spacing-0 spacing.$spacing-0;

	&-icon--close {
		display: none;
		margin-right: spacing.$spacing-1;
	}

	&-icon--open {
		display: inline-block;
		margin-right: spacing.$spacing-1;
	}

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

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

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

.ontario-hint-expander__content {
	border-left: 4px solid colours.$ontario-greyscale-20;
	color: colours.$ontario-colour-black;
	background-color: colours.$ontario-greyscale-5;
	display: none;
	padding: spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-4 (spacing.$spacing-4 + spacing.$spacing-1);
	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-1;

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

	& img {
		width: globalVariables.$full-width;

		@media screen and (min-width: breakpoints.$small-breakpoint) {
			width: 50%;
		}
	}
}

.ontario-hint-expander__content.ontario-expander__content--opened {
	display: block;
}

.ontario-hint-expander__container.ontario-expander--active {
	.ontario-hint-expander__button-icon--close {
		display: inline-block;
	}

	.ontario-hint-expander__button-icon--open {
		display: none;
	}
}

.ontario-input + .ontario-hint-expander__container {
	margin-top: calc(-1 * spacing.$spacing-5) !important;
}

.ontario-checkboxes__item .ontario-hint-expander__container,
.ontario-radios__item .ontario-hint-expander__container {
	margin-left: spacing.$spacing-2;
}

.ontario-checkboxes__label + .ontario-hint-expander__container,
.ontario-radios__label + .ontario-hint-expander__container {
	margin-top: spacing.$spacing-3;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		margin-top: spacing.$spacing-4;
	}
}
  • URL: /components/raw/hint-text/hint-text.scss
  • Chemin du système de fichiers: fractal/components/components/form/hint-text/hint-text.scss
  • Taille: 3.8 KB
  • Contenu: 
    .ontario-hint-expander__button:focus,.ontario-hint-expander__button:active{box-shadow:0 0 0 4px #009adb;outline:4px solid transparent;transition:box-shadow .1s ease-in-out}.ontario-hint{color:#4d4d4d;display:inline-block;margin:0 0 1rem 0;width:100%;max-width:48rem}.ontario-hint a[x-apple-data-detectors]{color:inherit;cursor:none;text-decoration:none}.ontario-hint-expander__container{max-width:48rem}.ontario-hint-expander__button{color:#06c;cursor:pointer;background:none;border:none;display:flex;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;font-size:1rem;text-align:left;margin:0 0 1rem 0;padding:0 .25rem 0 0}.ontario-hint-expander__button-icon--close{display:none;margin-right:.25rem}.ontario-hint-expander__button-icon--open{display:inline-block;margin-right:.25rem}.ontario-hint-expander__button:hover{color:#00478f}.ontario-hint-expander__button:active{color:#002142}.ontario-hint-expander__content{border-left:4px solid #ccc;color:#1a1a1a;background-color:#f2f2f2;display:none;padding:1rem 1rem 1rem 1.25rem;margin:0 0 1rem .25rem}.ontario-hint-expander__content *:last-child{margin-bottom:0}.ontario-hint-expander__content img{width:100%}@media screen and (min-width: 40em){.ontario-hint-expander__content img{width:50%}}.ontario-hint-expander__content.ontario-expander__content--opened{display:block}.ontario-hint-expander__container.ontario-expander--active .ontario-hint-expander__button-icon--close{display:inline-block}.ontario-hint-expander__container.ontario-expander--active .ontario-hint-expander__button-icon--open{display:none}.ontario-input+.ontario-hint-expander__container{margin-top:-1.5rem !important}.ontario-checkboxes__item .ontario-hint-expander__container,.ontario-radios__item .ontario-hint-expander__container{margin-left:.5rem}.ontario-checkboxes__label+.ontario-hint-expander__container,.ontario-radios__label+.ontario-hint-expander__container{margin-top:.75rem}@media screen and (max-width: 40em){.ontario-checkboxes__label+.ontario-hint-expander__container,.ontario-radios__label+.ontario-hint-expander__container{margin-top:1rem}}
  • URL: /components/raw/hint-text/hint-text.css
  • Chemin du système de fichiers: fractal/components/components/form/hint-text/hint-text.css
  • Taille: 2.1 KB

Principe directeur : Aider l’utilisateur à réussir au premier essai

Quand utiliser cette composante

Utilisez le texte d’indication pour aider les utilisateurs à compléter les champs des formulaires. Soyez concis – n’utilisez l’élargisseur d’indication qu’en dernier lieu, pour l’information moins importante ou plus complexe.

  • Si l’information est très importante et que tous ou presque tous les utilisateurs en auront besoin, incorporez-la dans l’étiquette du champ.
  • Si l’information est relativement importante et que plusieurs utilisateurs en auront besoin, insérez un texte d’indication qui sera visible par défaut.
  • Si l’information est moins importante et que seulement une faible proportion des utilisateurs en auront besoin, insérez-la dans l’élargisseur d’indication.

Texte d’indication

Utilisez le texte d’indication uniquement lorsque vous devez :

  • expliquer la raison pour laquelle vous posez une question donnée;
    • Exemple : « Nous enverrons un courriel seulement en cas de problème avec votre commande ».
  • fournir des éclaircissements;
    • Exemple : « Par exemple, A1A 1A1 ».
  • dire à l’utilisateur où trouver l’information que vous lui demandez.
    • Exemple : « Vous trouverez le montant des impôts exigibles à la ligne 435 de votre avis de cotisation ».

Élargisseur d’indication

L’élargisseur d’indication affiche ou masque du texte d’indication à l’aide d’un bouton à bascule.

Avant d’opter pour cette composante, essayez plutôt de clarifier l’étiquette du champ ou de simplifier le texte d’indication.

Utiliser l’élargisseur d’indication lorsque :

  • le texte d’indication est long et la plupart des utilisateurs n’en auront pas besoin;
  • vous voulez proposer à l’utilisateur une image utile, comme l’emplacement d’un numéro de permis.
    • Attention, il faudra aussi ajouter du texte pour expliquer l’image.

L’élargisseur d’indication est une fonctionnalité à réserver aux formulaires : pour les pages de contenu standards, recourez plutôt à un bloc accordéon.

Rédiger un lien clair

Lorsque vous rédigez le texte du lien pour le bouton à bascule de l’élargisseur d’indication :

  • employez un langage concis et descriptif;
  • assurerez-vous que le bouton indique à l’utilisateur ce qu’il va voir avant qu’il clique :
    • Par exemple, si l’élargisseur d’indication montre l’image d’un numéro de permis encerclé, un bon texte de lien serait « Où trouver mon numéro de permis? ».

Spécifications techniques

À faire :

  • Aligner le texte d’indication à gauche.
  • Placer le texte d’indication sous l’étiquette de champ correspondante.
  • Utiliser un identifiant unique qui relie le texte d’indication à une saisie particulière.
  • Insérer un message masqué dans l’étiquette qui indique aux lecteurs d’écran qu’il est possible d’élargir le texte d’indication.

À ne pas faire :

  • Placer le texte d’indication à l’intérieur du champ de saisie de texte, car cette pratique nuit à l’accessibilité.
  • Insérer des photos ou plus de deux phrases dans le texte d’indication (recourir plutôt à l’élargisseur).
  • Insérer des sauts de ligne manuels (balises <br>).
  • Placer les élargisseurs d’indication les uns dans les autres.
  • Utiliser plus d’un élargisseur d’indication par étiquette.
  • Ajouter des éléments de formulaire (comme une case d’option ou une boîte de texte) dans l’élargisseur d’indication.

Fiche technique

L’élargisseur d’indication nécessite le code JavaScript suivant :

Pour que ce code fonctionne avec Javascript, les attributs de la structure, des classes et du basculement de données de l’élargisseur d’indication doivent être insérés ou écrits comme il est indiqué dans l’exemple.

Accessibilité

Pour que les élargisseurs d’indication suivent une séquence logique, ils devraient être placés après l’élément associé du formulaire (et donc en contexte pour l’utilisateur).

Puisque l’information dans l’élargisseur d’indication est placée après l’élément du formulaire, il faut ajouter un message dans l’étiquette associée (visible que pour les lecteurs d’écran) pour indiquer à l’utilisateur que du contexte additionnel suivra. Exemple : <span class="ontario-show-for-sr">Des renseignements supplémentaires sur (nom de l’étiquette) suivront au prochain élément</span>

Bouton de l’élargisseur d’indication

On emploie un bouton comme contrôle de l’élargisseur d’indication afin que l’utilisateur puisse le sélectionner à l’aide de la touche Tab de son clavier, et pour qu’il soit trouvable par les lecteurs d’écran. Le bouton doit être doté de trois attributs pour répondre aux exigences en matière d’accessibilité :

  • Un id qui correspond à la valeur aria-labelledby du contenu de l’élargisseur d’indication, pour associer le contenu au bouton.
  • Un attribut aria-expanded initialement configuré à « false », qui bascule à « true » lorsque le contenu de l’élargisseur d’indication est élargi.
  • 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’élargisseur d’indication.

Contenu de l’élargisseur d’indication

Le contenu de l’élargisseur d’indication doit être doté de trois attributs pour répondre aux exigences en matière 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 de l’élargisseur d’indication est élargi et devient visible.
  • Une valeur aria-labelledby qui correspond au bouton de l’élargisseur d’indication.

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