Les formulaires

Étiquettes

Vous devez associer explicitement les étiquettes et les champs correspondants avec l'attribut for, qui reprend le id du champ auquel il est associé :

• Donner un attribut id unique à chaque champ de formulaire.
• Donner à chaque balise <label> un attribut for, qui reprend exactement le contenu de l'attribut id du champ correspondant.

À moins que vous disposiez d'un outil spécialisé, cette association doit généralement être faite manuellement dans le code.

Les WCAG 2.0 considèrent comme une erreur de présenter un numéro de téléphone qui ne serait identifiable que par sa présentation visuelle. Il faut donc une étiquette ou une <legned> de <fieldset> qui soit visible pour tous. On peut utiliser un seul champ à condition d'indiquer clairement le format attendu ou accepter tous les formats en filtrant les caractères inutiles. Si on choisit plutôt d'utiliser plusieurs champs, l'utilisation d'une <legned> de <fieldset> est une bonne pratique à condition d'utiliser un attribut title explicite pour chaque champ.

Exemple de code pour l'association d'une étiquette à un champ

<form method="post" action="unepage.html">
<p> <label for="pnom">Prénom</label> <input id="pnom" name="pnom" type="text" /> </p>
<p> <label for="nomf">Nom de famille</label> <input id="nomf" name="nomf" type="text" /> </p>
</form>

Title

Lorsqu'aucune étiquette n'est visible, vous devez placer la description du champ dans l'attribut title. C'est une des rares situations où les lecteurs d'écran liront le contenu de l'attribut title automatiquement. Il ne faut pas oublier cependant que l'étiquette joue un rôle explicatif pour tous vos visiteurs, et qu'il est donc préférable d'avoir une étiquette pour tout champ dont la fonction pourrait être ambiguë.

Exemple de code pour l'utilisation de title

<form method="post" action="unepage.html">
<p> <input id="recherche" title="Recherche :" name="rech" type="text" /> </p>
</form>

Balises fieldset et legend

Les balises <fieldset> et <legend> sont appropriées pour regrouper un petit nombre de champs de même nature comme un numéro de téléphone ou un groupe de cases à cocher qui répondent à une même question. Il faut cependant éviter d'en abuser en les utilisant pour subdiviser les différentes sections d'un formulaire. Pour ce faire, il vaut mieux utiliser des en-têtes de section car les lecteurs d'écran permettent de ses déplacer facilement d'une section à l'autre mais ne comportent pas de commandes pour aller d'un <fieldset> à l'autre.

Groupes d'options

Lorsque c'est pertinent, les groupes d'options dans un champ de liste doivent être identifiés à l'aide de la balise <optgroup> et de l'attribut "label". Cette identification est visuelle et peut donc aider à la compréhension, mais n'est pas lu par un lecteur d'écran.

Exemple de code pour les groupes d'options

<form action="http://example.com/prog/someprog" method="post">
<label for="food">What is your favorite food?</label> <select id="food" name="food">
<optgroup label="Fruits"> <option value="1">Apples</option> <option value="3">Bananas</option> <option value="4">Peaches</option> <option value="5">...</option> </optgroup>
<optgroup label="Vegetables"> <option value="2">Carrots</option> <option value="6">Cucumbers</option> <option value="7">...</option> </optgroup>
<optgroup label="Baked Goods"> <option value="8">Apple Pie</option> <option value="9">Chocolate Cake</option> <option value="10">...</option> </optgroup>
</select> </form>