Formulaires

Étiquettes

11.1 [A] Tout champ de formulaire possède une étiquette.

L’étiquette peut être :

un élément <label> associé au champ de formulaire ;
une propriété aria-label ;
un élément référencé par une propriété aria-labelledby ;
un attribut title.

Exemple HTML :

<label for="nom">Nom</label>
<input id="nom" name="nom" type="text" />

Contraintes :

le champ de formulaire (<input>) possède un attribut id="nom" unique ;
l’attribut for="nom" de l’étiquette (<label>) fait référence à l’attribut id du champ de formulaire.

11.2 [A] L’intitulé des champs est pertinent.

L’intitulé du champ correspond au type de donnée attendu.

11.3 [AA] L’intitulé des champs est cohérent.

Les champs de même nature ont un intitulé cohérent, par exemple : « adresse 1 », « adresse 2 »… ou « adresse », « complément d’adresse »…

L’intitulé d’un champ ayant la même fonction (la zone de saisie d’un formulaire de recherche, par exemple) est le même sur toutes les pages…

11.4 [A] L’étiquette est accolée au champ.

Si le champ est une case à cocher ou un bouton radio, l’étiquette se trouve immédiatement après le champ ; sinon l’étiquette se trouve immédiatement avant le champ (soit au-dessus, soit à gauche).

Champs regroupés

11.5 [A] Si nécessaire, les informations de même nature sont regroupées (<fieldset>)

11.6 [A] Chaque regroupement de champs comprend une légende (<legend>).

11.7 [A] Cette légende est pertinente.

Exemple HTML :

<fieldset>
  <legend>Quel est votre philosophe préféré ?</legend>
    <input type="radio" name="philosophe"
      id="philosophe-1"
      value="Socrate"/>
  <label for="philosophe-1">Socrate</label>
  <input type="radio" name="philosophe"
    id="ph2"
    value="Platon"/>
  <label for="philosophe-2">Platon</label>
  <input type="radio" name="philosophe"
    id="philosophe-3"
    value="Aristote"/>
  <label for="philosophe-3">Aristote</label>
</fieldset>

Listes de choix

11.8 [A] Si nécessaire, les éléments (<option>) des listes de choix (<select>) sont regroupés au moyen d’un élément <optgroup> possédant un attribut label pertinent.

Exemple HTML :

<label for="choix">Que préférez-vous ?</label>
<select id="choix" name="Choix">
  <optgroup label="Fruits">
    <option value="abricots">abricots</option>
    <option value="poires">poires</option>
    <option value="pommes">pommes</option>
  </optgroup>
  <optgroup label="Légumes">
    <option value="carottes">carottes</option>
    <option value="concombres">concombres</option>
  </optgroup>
</select>

Boutons

11.9 [A] L’intitulé des boutons est pertinent.

L’intitulé d’un bouton peut être :

la valeur de l’attribut value des éléments <input type="reset" />, <input type="submit" /> ou <input type="button" /> ;
la valeur de l’attribut alt de l’élément <input type="image" /> ;
le contenu de l’élément <button /> ;
la valeur de la propriété aria-label ou la valeur de l’élément référencé via une propriété aria-labelledby ;
la valeur de l’attribut title.

Contrôle de saisie

11.10 [A] Le contrôle de saisie est implémenté de manière pertinente.

Indication des champs obligatoires

Les champs obligatoires peuvent être indiqués :

par un attribut required ;
par une propriété aria-required ;
dans l’étiquette (élément <label>, propriété aria-label, élément référencé par la propriété aria-labelledby, attribut title) ;
par un texte situé avant le champ de formulaire ;
par un texte situé dans un élément référencé par aria-describedby.

Toute indication de champ obligatoire au moyen d’un attribut ou d’une propriété ARIA est accompagnée d’une indication visuelle explicite.

Indication du type de données et/ou du format de saisie

Si nécessaire, le type de donnée et/ou le format des données peut être indiqué :

par l’utilisation d’un champ correspondant à un type de données (tel, url, email, date, time, number, range, color…) ;
dans l’étiquette (élément <label>, propriété aria-label, élément référencé par la propriété aria-labelledby, attribut title) ;
par un texte avant le champ de formulaire ;
par un texte référencé par la propriété aria-describedby.

Toute indication de champ obligatoire au moyen d’un attribut HTML ou d’une propriété ARIA est accompagnée d’une indication visuelle explicite.

Signalement des erreurs de saisie

Les erreurs de saisie peuvent être signalées :

par le navigateur (par l’utilisation d’un champ d’un type générant automatiquement un message d’erreur) ;
par l’état aria-invalid ;
par un message dans l’étiquette (élément <label>, propriété aria-label, élément référencé par la propriété aria-labelledby, attribut title) ;
par un message apparaissant avant le champ de formulaire ;
par un message apparaissant dans un élément référencé par la propriété aria-describedby.

Toute indication d’erreur de saisie au moyen d’un attribut HTML, d’un état ou d’une propriété ARIA est accompagnée d’une indication visuelle explicite.

Suggestions facilitant la correction des erreurs de saisie

11.11 [AA] Si nécessaire, des suggestions facilitant la correction des erreurs de saisie sont données.

Préciser le type de données et/ou le format de saisie ; donner des exemples de valeurs attendues.

Contrôle des données

11.12 [AA] Les données à caractère financier, juridique ou personnel peuvent être vérifiées et corrigées avant soumission, et récupérées en cas de suppression.

11.13 [AAA] Toutes les données peuvent être vérifiées et corrigées avant soumission, et récupérées en cas de suppression.

L’utilisateur peut :

corriger les données après saisie dans un champ ;
vérifier (et corriger) toutes les données saisies avant soumission du formulaire.

Une étape supplémentaire de confirmation peut être proposée avant soumission du formulaire.

L’utilisateur est averti avant suppression des données, et peut récupérer les données supprimées (ou annuler la suppression).

Aide à la saisie

11.14 [AAA] Une aide à la saisie est proposée.

11.15 [AAA] Cette aide est pertinente.

Une aide à la saisie est proposée :

des indications sont données avant le formulaire – ou avant chaque champ de formulaire ;
une indication est donnée dans l’étiquette du champ (élément <label>, propriété aria-label ou aria-labelledby, attribut title) ;
un lien renvoie vers une page d’aide ;
un assistant est proposé…

Toute indication donnée au moyen d’un attribut HTML ou d’une propriété ARIA est accompagnée d’une indication visuelle explicite.

Pour les champs de type « texte », les aides suivantes peuvent être proposées :

un correcteur orthographique ;
des suggestions de saisie via une propriété aria-describedby.