Instructions du formulaire

Aperçu : Instructions du formulaire

Les instructions du formulaire aident les utilisateurs à comprendre la façon de remplir le formulaire et d’utiliser les commandes individuelles du formulaire. Indiquer les saisies, les formats de données et les autres renseignements pertinents requis.

Instructions générales

Fournir les instructions du formulaire au-dessus du formulaire avant la balise <form> d’ouverture. Indiquer toute saisie obligatoire et facultative, les formats de données autorisés, les limites de temps et toute instruction générale qui s’appliquent à l’ensemble du formulaire.

Voici des exemples d'instructions pour un formulaire :

• Tous les champs marqués « obligatoire » doivent être remplis.
• Les dates doivent toutes être entrées selon le format aaaa/mm/jj (comme dans 2022/01/05).
• Vous trouverez de l’aide supplémentaire immédiatement après chaque champ

Instructions incluses

Des instructions incluses sont fournies à l’intérieur ou à l’extérieur de l’étiquette de commande du formulaire. De courtes instructions peuvent être insérées dans l’étiquette avec le nom de la commande. Les instructions longues devraient être à l’extérieur de l’étiquette et être associées à la commande par l’aria-describedbyattribut aria-describedby.

Fournir des instructions dans les étiquettes

Les agents utilisateurs prennent en charge sans difficulté les instructions fournies dans les étiquettes, mais celles-ci devraient être réservées aux instructions plus courtes. Associer l’attribut for de l’étiquette à l’attribut id de la commande du formulaire.

<label for="employee-id">Employee ID (XX-1234)</label> 
<input type="text" name="employee-id" id="employee-id">

Fournir des instructions à l’extérieur des étiquettes

Utiliser ARIA pour fournir des instructions à l’extérieur des étiquettes. Associer tout texte descriptif du formulaire à l’élément pertinent du formulaire en utilisant l’attribut aria-labelledby ou aria-describedby.

<label for="health-card">Carte assurance maladie</label>
<input type="text" id="health-card" aria-labelledby="health-card hc-format" name="health-card">
<span id="hc-format">1234-567-890-XX</span>

<div class="form-group">
   <label for="password1">Mot de passe</label>
   <div>
      <input type="password" id="password1" aria-describedby="passDesc" name="password1">
      <div id="passDesc">Doit contenir au moins huit caractères, une lettre majuscule et un caractère spécial<</div>
   </div>
</div>

Texte d’espace réservé

Le texte de l'attribut placeholder fournit des instructions ou un exemple du format de données requis à l'intérieur des champs de formulaire qui n'ont pas encore été modifiés par l'utilisateur.

Le texte d’espace réservé ne remplace pas les étiquettes. Les technologies d’assistance comme les lecteurs d’écran ne traitent pas le texte d’espace réservé comme des étiquettes.

HTML

Début du code

<div>
   <label for="search">Recherche</label> 
   <input type="text" name="search" id="search" placeholder="e.g., cours sur l’accessibilité">
</div>
<div>
   <label for="email">Courriel</label> 
   <input type="email" name="email" id="email" placeholder="jane.doe@gmail.com" autocomplete="email">
</div>

Fin du code

Styliser l’espace réservé

Dans de nombreux navigateurs, la couleur d’attribut placeholder réservé échoue au test de contraste, ce qui empêche de nombreuses personnes de voir distinctement. La couleur de l’espace réservé peut être stylisée à l’aide de CSS.

L’extrait de code ci-dessous établit la couleur d’avant-plan à un gris moyen (no hex 767676) sur fond blanc, ce qui satisfait tout juste à l’exigence minimale de rapport de contraste de 4,5:1.

<div>
   <label for="search">Recherche de cours</label>  
   <input type="text" name="search" id="search" placeholder="e.g., cours sur l’accessibilité">
</div>
<div>
   <label for="fname">Prénom</label>  
   <input type="text" name="fname" id="fname">
</div>
<div>
   <label for="lname">Nom de famille</label>  
   <input type="text" name="lname" id="lname">
</div>
<div>
   <label for="email">Courriel</label>  
   <input type="text" name="email" id="email" placeholder="jane.doe@gmail.com"> 
</div>

::-webkit-input-placeholder { 
   color: #767676 !important; 
   opacity: 1;
}
:-moz-placeholder { 
   /* Firefox 18- */ 
   color: #767676  !important;
   opacity: 1;
}
::-moz-placeholder {  
   /* Firefox 19+ */ 
   color: #767676 !important;
   opacity: 1;
}
:-ms-input-placeholder { 
   color: #767676  !important; 
   opacity: 1;
}

Les instructions relatives aux groupes

En "mode focus", lors de la tabulation dans le formulaire, les utilisateurs de lecteurs d'écran mettent le focus sur les contrôles de formulaire et entendent leurs étiquettes et descriptions. Le texte d'un élément non focalisable n'est pas pris en compte, sauf s'il est associé par programme à un contrôle de formulaire en tant qu'étiquette ou description.

<fieldset>
   <legend class="required"> 
       Renseignements d’ouverture de session (Requis)
   </legend>
   <label for="username" class="required">Nom d’utilisateur</label>
   <input type="text" id="username" required autocomplete="username">
   
   <label for="password2" class="required">Mot de passe</label>
   <input type="password" id="password2" required autcomplete="current-password">
   
   <label for="email" class="required">Courriel</label>
   <input type="email" id="email" required autcomplete="email">
   
   <label for="phone" class="required">Téléphone</label>
   <input type="tel" id="phone" required auto-complete="tel-national">
</fieldset>

label.required:before, 
legend.required:before {
   content: "* ";
   margin-left: -0.665em;
   color: #d3080c;
   font-weight: 700;
}

<fieldset>
   <legend> 
   Créer un compte d’utilisateur
   </legend>
   <p>
      <label for="username">Nom d’utilisateur</label>
      <input type="text" id="username">
   </p>
   <p>Les mots de passe doivent correspondre.</p>
   <p>
      <label for="password3">Mot de passe</label>
      <input type="password" id="password3">
   </p>
   <p>
      <label for="retype">Retapez votre mot de passe</label>
      <input type="password" id="retype">
   </p>
   <p>
      <label for="email">Courriel</label>
      <input type="email" id="email">
   </p>
   <p>
      <label for="phone">Téléphone<label>;j
      <input type="tel" id="phone">
   </p>
</fieldset>

<fieldset>
   <legend>Créer un compte d’utilisateur</legend>
   <p>
   Les champs Nom d'utilisateur et Mot de passe <span id="specialchar">ne doivent PAS contenir de caractères spéciaux.</span>
   </p>
   <p>
      <label for="username">Nom d’utilisateur</label>
      <input type="text" id="username" aria-describedby="specialchar">
   </p>
   <p>
      <label for="password4">Mot de passe</label>
      <input type="password" id="password4" aria-describedby="specialchar">
   </p>
   <p>
      <label for="email">Courriel</label>
      <input type="email" id="email">
   </p>
   <p>
      <label for="phone">Téléphone</label>
      <input type="tel" id="phone">
   </p>
</fieldset>

<p>Choisissez les comptes source et destination ci-dessous pour effectuer votre virement de fonds:</p> 
<form action="/action.php" method="get">[…]</form>

Ressources WCAG connexes