Formulaires

Bonne utilisation

Points de conformité :

Contexte du formulaire :

• Avant d'inclure des zones d'entrée pour le formulaire, présentez un énoncé d'une ligne à propos de l'utilisation du formulaire en suivant le format suivant :
  • Utilisez ce formulaire pour…
• Cela assurance l'utilisateur que le formulaire qu'il remplit est le bon

Boutons :

• Au moment de placer des boutons Soumettre et Effacer à la fin du formulaire, ne les placez pas l'un à côté de l'autre
• Leurs fonctions sont directement opposées, et cela pourrait causer une erreur involontaire de la part d'un utilisateur en raison de la proximité du placement

Barre de progrès :

• Lorsque le formulaire s'étend sur plusieurs écrans ou pages, présentez une barre de progrès pour indiquer à l'utilisateur à quel stade du processus d'achèvement il se situe

Bonne utilisation

Points de conformité :

• Abrégez le texte des étiquettes jusqu'au strict minimum
• Utilisez la majuscule initiale, par exemple, utilisez « Nom de famille » et non « Nom de Famille »
• Utilisez des étiquettes en tout temps
  • Les lecteurs d'écran ont de la difficulté avec les formulaires si une étiquette n'est pas incluse pour chaque saisie
  • Pour cacher l'étiquette, utilisez la classe .wb-inv
• Utilisez des abréviations standards reconnues, et vérifiez les abréviations auprès d'utilisateurs non experts
• Formulez un énoncé au lieu de poser une question
  • Par exemple, utilisez « Nom de l'enfant » au lieu de « Quel est le nom de l'enfant? »
• Utilisez du texte d'étiquette unique sur une page donnée afin de respecter les normes d'accessibilité
• Placez « (requis) » à la fin de l'étiquette de zone si l'information est requise. Consultez : Validation de formulaires (external link)

Conception de l'option d'alignement 1 :

• Placez l'étiquette au-dessus de la zone de saisie. Conformément à la publication Web form design: Filling in the blanks (disponible en anglais seulement) (external link), il s'agit de la mise en page recommandée
  • Cette mise en page permet aux utilisateurs de saisir à la fois les étiquettes et les zones de saisie d'un seul coup d'œil. Bien qu'il s'agisse de la plus simple des mises en page, les utilisateurs peuvent traiter l'information dix fois plus vite que si l'information est alignée à gauche. Cela est montré dans l'« Option d'alignement 3 − Alignement à gauche ». Cette solution utilise plus d'espace vertical, mais n'a pas d'incidence sur l'expérience de l'utilisateur. Si elle ne convient pas à la mise en page particulière dont vous avez besoin, il est aussi acceptable d'utiliser l'« Option d'alignement 2 − Alignement à droite »

Conception de l'option d'alignement 2 :

• Placez les objets de formulaire côte à côte seulement s'il faut réduire l'espace vertical
  • Alignez à droite les étiquettes côte à côte avec les objets de forme. Cette solution est préférable aux étiquettes alignées à gauche. Des études sur le suivi du regard montrent que cela crée une association claire entre l'étiquette et la zone. Cela réduit le nombre de fixations de l'utilisateur (l'œil qui saute d'un point à un autre) de près de moitié. Ainsi, les mouvements oculaires réduits et l'association claire permettent de réduire la fatigue oculaire et d'améliorer la cognition. Cela se traduit par une accélération de 50 % du taux d'achèvement des formulaires

Mauvaise utilisation

Points de conformité :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
• N'utilisez pas le deux-points à la fin d'une étiquette de zone de saisie
• N'utilisez pas d'abréviations, à moins ce que tout absolument nécessaire pour des raisons d'espace
• N'abrégez pas les mots essentiels. Par exemple, utilisez « Cmpte restreint », et non « Compte restrt »

Conception de l'option d'alignement 3 :

• N'alignez pas à gauche une étiquette de la zone de saisie, pour les raisons citées

Bonne utilisation

Points de conformité :

• On l'utilise pour créer une case de texte simple qui permet la saisie d'une seule ligne de texte
• Déclarez correctement le type pour établir complètement le style de la zone de saisie
• Enveloppez les boutons par .input-group-btn dans les groupes de saisie
  • Cela est requis, puisque l'on ne peut pas écraser les styles par défaut des navigateurs

Mauvaise utilisation

Points de conformité :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
• Ne mélangez pas directement des groupes de formulaires avec des groupes de saisie
  • Au lieu de cela, imbriquez le groupe à l'intérieur du groupe de formulaires

Code

// Zone de saisie :
<input type="text" class="form-control" placeholder="(texte substituable)" />

// Zone de saisie avec un bouton de recherche :
<label for="btngrp-search2" class="wb-inv">Recherche</label>
  <div class="input-group">
    <input type="text" class="form-control" id="btngrp-search2" placeholder="(texte substituable)" />
    <span class="input-group-btn">
     <button class="btn btn-default" type="button">Recherche</button>
    </span>
  </div>

Bonne utilisation

Points de conformité :

• Utilisez .form-control pour créer un espace à structure libre qui permet à l'utilisateur de taper du contenu
• Changez l'attribut rows="*" pour refléter le nombre de rangées par défaut à afficher
• Limitez le nombre de rangées pour correspondre à la quantité de renseignements que désire(nt) le(s) destinataire(s)

Mauvaise utilisation

Points de conformité :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
• Ne l'utilisez pas lorsque les utilisateurs doivent inscrire une réponse précise prédéfinie

Code

<textarea class="form-control" rows="3"></textarea>

Bonne utilisation

Points de conformité :

• Utilisez .checkbox pour que les utilisateurs puissent choisir un ou plusieurs ensembles prédéfinis d'options
• Utilisez .checkbox-inline pour faire apparaître les cases à cocher sur la même ligne

Mauvaise utilisation

Points de conformité :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
• Ne l'utilisez pas si les utilisateurs doivent inscrire une réponse détaillée

Code

// Cases à cocher par défaut :
<div class="checkbox">
   < for="defaultCheck1" label><input id="defaultCheck1" type="checkbox" value="">Option 1</label>
</div>

// Cases à cocher incorporées :
<div class="checkbox-inline">
   < for="inlineCheck1" label><input id="inlineCheck1" type="checkbox" value="">Option 1</label>
</div>

Bonne utilisation

Points de conformité :

• Utilisez .radio pour que les utilisateurs ne puissent choisir qu'un seul ensemble prédéfini d'options
• Utilisez .radio-inline pour faire apparaître les boutons radio sur la même ligne

Mauvaise utilisation

Points de conformité :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
• Ne l'utilisez pas si les utilisateurs doivent sélectionner plus d'une option

Code

// Boutons radio :
<div class="radio">
   < for="radio1" label><input id="radio1" type="radio" name="optradio">Option 1</label>
</div>

// Boutons radio incorporés :
<div class="radio-inline">
   < for="inlineRadio1" label><input id="inlineRadio1" type="radio" name="optradio">Option 1</label>
</div>

Bonne utilisation

Points de conformité :

• Utilisez .form-control pour créer une liste de sélection, de laquelle l'utilisateur peut sélectionner une seule option
• Ajoutez multiple pour montrer plusieurs options en même temps
• Placez l'option de sélection la plus probable en tant que texte par défaut de la liste déroulante

Mauvaise utilisation

Points de conformité :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
• Ne l'utilisez pas pour les éléments non liés

Code

// Liste déroulante avec vue à une seule option :
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

// Liste déroulante avec vue à plusieurs options :
<select multiple="multiple" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>