4.1.6 Les champs obligatoires sont annoncés dans leur label

Lorsque les champs obligatoires sont indiqués dans un formulaire, ceci doit être fait de manière à ce que cette information soit accessible à tous.

Pourquoi?

Si les champs obligatoires ne sont pas indiqués d'une manière lisible par tous, cela pourrait occasionner une perte de temps pour certains utilisateurs qui devront répéter la procédure de soumission du formulaire chaque fois qu'il est incomplet.

En pratique

Ajoutez le mot "obligatoire" ou une astérisque (*) dans l'intitulé d'un champ pour indiquer qu'il est obligatoire. Veillez à ce que cette indication se trouve dans l'élément label. C'est la seule manière pour qu'un lecteur d'écran puisse annoncer les champs obligatoires. C'est la meilleure manière de procéder.

Si vous déviez de l'utilisation de obligatoire ou (*) à l'intérieur du label pour identifier les champs obligatoires, il y d'autres méthodes permises:

  • Si tous les champs sont obligatoires vous pouvez le mentionner une seule fois en haut du formulaire.
  • Vous pouvez également regrouper les champs obligatoires au moyen de fieldset et indiquer au moyen de legend que ces champs sont obligatoires.
  • Si vous utilisez une autre méthode pour indiquer les champs obligatoires nous vous demandons de donner un mot d'explication à ce sujet en début de formulaire.
  • Il est permis d'utiliser des couleurs et des icônes mais veillez à rester en accord avec l'ensemble des directives afin que les visiteurs aveugles ou les utilisateurs d'un navigateur ancien ou mobile puissent également faire la distinction.

Exemples d'indication par utilisation de CSS uniquement (incorrect)

<label for="email" class="obligatoire">Adresse email</label>
label.obligatoire {
 background-color: yellow;
}
<label for="email" class="obligatoire">Adresse email</label>
label.obligatoire:after { 
 content: " (*)"; 
}

Exemple d'indication à l'extérieur du label (incorrect)

<label for="email">Adresse email</label> (*)  
<input type="text" id="email"></input>

Exemple d'indication à l'intérieur du label (correct)

<label for="email">Adresse email (obligatoire)</label>  
<label for="email">Adresse email (*)</label>

Exemple d'utilisation de fieldset et legend (permis)

comment tester

  1. Pour chaque formulaire, vérifiez si les champs obligatoires sont indiqués.
    • Oui : allez à la question 2
    • Non : il n'y a plus rien à vérifier.
  2. Désactivez les feuilles de style. Est-ce que les champs obligatoires sont toujours indiqués?
    • Non: il faut corriger le formulaire
    • Oui : Allez à la question 3
  3. Est-ce que la distinction entre champs obligatoires et optionnels est faite de manière textuelle dans le label?
    • Oui : allez à la question 4
    • Non : allez à la question 6
  4. Oui: Est-ce que le mot utilisé dans le label est "obligatoire" ou "*"?
    • Oui : le formulaire est conforme
    • Non : allez à la question 5
  5. Est-ce que l'utilisation d'un autre mot est annoncée au dessus de la page?
    • Oui : le formulaire est conforme
    • non : il faut corriger le formulaire
  6. Est-ce la distinction entre champs obligatoires et facultatifs est faite par l'utilisation de fieldset avec l'attribut legend?
    • Oui : le formulaire est conforme
    • non : il faut corriger le formulaire