Étiquettes

Mettez toujours une étiquette pour indiquer à l’utilisateur comment utiliser chaque élément du formulaire.

  • 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/1-variables/fonts.variables' as fonts;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
@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/typography.variables';

.ontario-label {
	cursor: pointer;
	color: colours.$ontario-colour-black;
	font-family: fonts.$ontario-font-raleway-modified;
	font-size: 1.1875rem;
	font-weight: fontWeights.$ontario-font-weights-bold;
	line-height: lineheight.$ontario-line-height-7;
	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;
	max-width: 38.75em;
	white-space: normal;
	width: globalVariables.$full-width;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		font-size: 1.125rem;
		line-height: lineheight.$ontario-line-height-8;
	}
}

.ontario-label--large {
	font-size: 1.75rem;
	letter-spacing: 0.02rem;
	line-height: lineheight.$ontario-line-height-1;
	max-width: 26.25em;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		font-size: 1.4375rem;
		line-height: lineheight.$ontario-line-height-5;
	}
}

h1 {
	.ontario-label--heading {
		@extend %h1-styles;
		display: inline-block;
		margin: spacing.$spacing-0;
	}
}

.ontario-label__flag {
	font-family: fonts.$ontario-font-open-sans;
	font-size: fontSizes.$ontario-font-size-standard-body-text;
	font-weight: fontWeights.$ontario-font-weights-normal;

	&:before {
		content: '\a0';
	}
}
  • URL: /components/raw/labels/labels.scss
  • Chemin du système de fichiers: fractal/components/components/forms-and-inputs/labels/labels.scss
  • Taille: 2.2 KB
  • Contenu: 
    h1 .ontario-label--heading{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway Modified","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}h1 .ontario-label--heading{font-size:2rem;letter-spacing:.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){h1 .ontario-label--heading{font-size:2.5rem;letter-spacing:.04rem;line-height:1.2}}.ontario-label{cursor:pointer;color:#1a1a1a;font-family:"Raleway Modified","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.1875rem;font-weight:700;line-height:1.5;margin:0 0 1rem 0;max-width:38.75em;white-space:normal;width:100%}@media screen and (max-width: 40em){.ontario-label{font-size:1.125rem;line-height:1.56}}.ontario-label--large{font-size:1.75rem;letter-spacing:.02rem;line-height:1.2;max-width:26.25em}@media screen and (max-width: 40em){.ontario-label--large{font-size:1.4375rem;line-height:1.39}}h1 .ontario-label--heading{display:inline-block;margin:0}.ontario-label__flag{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}
  • URL: /components/raw/labels/labels.css
  • Chemin du système de fichiers: fractal/components/components/forms-and-inputs/labels/labels.css
  • Taille: 1.2 KB

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

Quand utiliser cette composante

Employez toujours des étiquettes pour les éléments de saisie d’un formulaire comme des :

Les hyperliens n’ont pas besoin d’étiquettes, qu’ils soient façonnés sous forme de boutons, d’icônes ou d’hyperliens réguliers.

Exemple

Étiquette : Numéro de plaque d’immatriculation (obligatoire). Texte d’indication : par exemple, AAAA111. Champ de saisie de texte vide.

Emploi des étiquettes en tant que titres

S’il y a un seul élément de formulaire dans la page (p. ex. la page n’affiche qu’une étiquette demandant le numéro de plaque d’immatriculation et une saisie de texte), faites de l’étiquette le titre de la page en l’insérant dans la catégorie h1.

Exemple

Diagramme d’une page de formulaire qui affiche le placement de l’étiquette comme titre h1, le texte d’indication, le champ de saisie de texte et le bouton principal pour passer à la page suivante.

Code HTML

<h1 class="ontario-label">
    <label class="ontario-label ontario-label--heading" for="licence-plate-number">
        Entrez votre numéro de plaque d’immatriculation<span class="ontario-label__flag">(obligatoire)</span>
    </label>
</h1>

Pratiques exemplaires

À faire :

  • Aligner à gauche les étiquettes, les saisies de texte et le texte d’indication.
  • Toujours employer un attribut « pour » qui relie l’étiquette à une saisie particulière – il s’agit d’une exigence liée à l’accessibilité.
  • Veiller à placer les étiquettes à proximité du champ auquel elles sont associées.
  • Utiliser le formatage « grande étiquette » lorsque vous devez faire ressortir visuellement l’étiquette d’un élément de formulaire particulier par rapport à d’autres éléments du formulaire dans la page – consultez les ensembles de champs pour de plus amples renseignements.
  • Toujours préciser entre parenthèses si une réponse est facultative ou obligatoire à la fin de l’étiquette.
    • Ajouter (obligatoire) près des questions auxquelles l’utilisateur doit répondre pour poursuivre.
    • Ajouter (facultative) près des questions auxquelles l’utilisateur n’a pas à répondre pour poursuivre.

À faire :

Partie intitulée Inscrire vos coordonnées. Nom (obligatoire), adresse courriel (obligatoire) et numéro de téléphone (facultatif), avec trois champs de saisie de texte vides sous chaque étiquette.

À ne pas faire :

  • Employer des étiquettes pour des éléments interactifs autres que des éléments de saisie de formulaire (comme des boutons).
  • Placer des étiquettes à l’intérieur de saisies de texte. Il s’agit d’une pratique nuisant à l’accessibilité.

Spécifications des étiquettes

Type de composante Spécif. pour mobiles Spécif. pour ordinateurs
Étiquette normale Text Couleur du texte : #1A1A1A
Arrière-plan : #FFFFFF
Police :  Raleway Modified
Taille : 18px
Hauteur de ligne : 1.56
Épaisseur : 700
Espacement : 0.03rem		 Text Couleur du texte : #1A1A1A
Arrière-plan : #FFFFFF
Police :  Raleway Modified
Taille : 19px
Hauteur de ligne : 1.5
Épaisseur : 700
Espacement : 0.025rem
Grande étiquette Text Couleur du texte : #1A1A1A
Arrière-plan : #FFFFFF
Police :  Raleway Modified
Taille : 23px
Line Height: 1.39
Épaisseur : 700
Espacement : 0.02rem		 Text Couleur du texte : #1A1A1A
Arrière-plan : #FFFFFF
Police :  Raleway Modified
Taille : 28px
Line Height: 1.43
Épaisseur : 700
Espacement : 0.02rem

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