# Guide AccessiWeb

vous êtes ici : Accueil > Fiches AccessiWeb : Formulaires > Fiche 11.2

## Fiche 11.2 : Les textes associés aux champs de formulaires donnent-ils leur fonction exacte ?

Sommaire de la fiche :

- Carte d'identité
- Comprendre

- Comment évaluer
- Comment mettre en oeuvre

- Illustrations
- Références

### Carte d'identité

- Critère AccessiWeb : 11.2
- Niveau AccessiWeb : argent
- Point(s) de contrôle WCAG 1.0 correspondants (Priorité 2 de WAI) : 12.3

revenir en haut de la page

### Comprendre

#### Bénéfices pour les utilisateurs

- Bénéfice 1 :
  Pour un utilisateur aveugle : si celui-ci utilise un logiciel de revue d'écran tel que Jaws couplé à un afficheur Braille, il aura la possibilité de passer de champ en champ à l'aide de la touche tabulation. L'intitulé du champ apparaîtra généralement sur l'afficheur Braille, à côté du curseur. Si cet intitulé est suffisamment explicite quant à la fonction du champ, l'utilisateur saura immédiatement de quelle manière il devra le renseigner.
- Bénéfice 2 :
  Pour une personne malvoyante : si celle-ci utilise un logiciel d'agrandissement, la disposition du formulaire peut s'en trouver modifiée. Il est donc important que chaque champ soit rapidement repérable par son intitulé. A ce titre, et dans la mesure du possible, éviter les notes associées à un intitulé et renvoyant plus bas dans la page.
- Bénéfice 3 :
  Pour les personnes ayant des difficultés d'apprentissage de la lecture : la clarté d'un intitulé de champ en facilitera la compréhension immédiate.

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  Même si le traitement des formulaires est aujourd'hui largement automatisé, un bon marquage des champs de formulaire entre dans une démarche qualité et facilite la maintenance du code, surtout si celui-ci est dépourrvu de commentaires.
- Bénéfice 2 :
  De plus, un formulaire dont les champs sont correctement nommés pourra servir de modèle (ou template) pour d'autres pages du site.

revenir en haut de la page

### Comment évaluer

#### Par le code source

1. Pour chaque formulaire et chaque champ de formulaire présent sur la page, repérer les intitulés qui leurs sont associés.
2. Vérifier leur pertinence.

#### Par l'utilisation d'outils

Pour une liste complète des outils utilisés pour évaluer l'accessibilité des pages web, et un résumé de leurs principales fonctionnalités, reportez-vous à la page Outils d'aide à l'évaluation.

##### Evaluer avec la barre AccessiWeb (version 1.0) :

1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "11. Formulaires" de la Barre AccessiWeb, activer le critère 11.2.
3. La page s'affiche avec les balises et attributs des formulaires si présents et renseignés.
4. Vérifier que les textes associés aux champs de formulaires donnent leur fonction exacte.
   Note : Pour revenir à la page initiale, recharger la page en cliquant sur la touche F5.

##### Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :

1. Dans "Structure", cliquer sur "Fieldset/Labels".
2. Les balises et attributs des formulaires apparaissent sur la page si présents et renseignés.
3. Vérifier que les textes associés aux champs de formulaires donnent leur fonction exacte.

##### Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.0.2 en français) :

Méthode 1 :

1. Activer l'option "Voir Source" du menu "Voir Source".
2. Une nouvelle fenêtre apparaît et affiche le code source.
3. Vérifier que les textes associés aux champs de formulaires donnent leur fonction exacte.

Méthode 2 :

1. Activer l'option "Informations sur les formulaires" du menu "Form.".
2. Deux tableaux ("Formulaire" et "Eléments") apparaissent pour chaque formulaire présent sur la page.
3. Pour chaque formulaire, dans le tableau "Eléments", vérifier la présence dans l'en-tête "Type" d'éléments comme "text", "textarea", "checkbox" et vérifier que textes associés, dans la colonne "Label" donnent la fonction exacte de chaque champ de formulaire.

##### Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :

1. Au chargement de la page contenant le formulaire, se placer sur le premier champ en appuyant sur la touche F (version 5), puis valider pour entrer en mode "formulaire".
2. Se déplacer de champ en champ avec la touche tabulation et écouter l'intitulé prononcé par la synthèse vocale. Si chacun d'eux est explicite par lui-même, sans avoir besoin de procéder à un contrôle visuel, le critère est alors respecté.

revenir en haut de la page

### Comment mettre en oeuvre

#### Qui est concerné ?

Les personnes en charge de la partie éditoriale doivent veiller au respect de ce critère.

#### Implémentation

L'intitulé d’un champ de formulaire est primordial afin qu'un utilisateur puisse le remplir convenablement. En effet, lorsqu'un formulaire se compose de plusieurs champs, que ce soit d’un champ d’édition, d’une liste déroulante, d’une case à cocher, d’un bouton radio ou d’un bouton de validation, ceux-ci doivent être accompagnés d’un intitulé qui indique clairement à quoi ils se rapportent.

La première démarche consiste à analyser les champs et leur intitulé un par un, en les isolant de leur contexte. Si plusieurs champs ont une fonction proche, par exemple un champ de recherche simple et un champ de recherche avancée, il faut définir des intitulés qui permettent de les distinguer aisément les uns des autres. Dans la majorité des cas, l'intitulé d'un champ est représenté par le texte situé à proximité.

Dans le cas particulier des boutons, cet intitulé est restitué en premier lieu par la valeur de l'attribut `value`, et éventuellement celle de l'attribut `alt`.

Syntaxe générale :
Cas d'un champ classique :

[nom_du_champ] : [type_du_champ]

Cas d'un bouton :

<input type="submit/reset/button" value="[nom_du_champ]" />

ou

<input type="image" alt="[nom_du_champ]" value="[nom_du_champ]" />

#### Exemple de mauvaise pratique

Dans l'extrait de code qui suit, les intitulés et les listes déroulantes correspondantes sont présentés dans des cellules de tableau séparées. Lors d'une lecture linéaire, l'utilisateur lira comme intitulé de champ, pour les deux listes : "faites votre choix". Ceci n'est pas explicite et ne permet pas de les distinguer l'un de l'autre.

le premier bouton, en bas à gauche du tableau est de type "reset", c'est-à-dire qu'il permet de remettre les champs de formulaire à leur valeur initiale. L'intitulé qui lui est associé est la valeur de l'attribut `value` : "cancel". Cet intitulé n'est pas explicite au beau milieu d'un formulaire rédigé en français.

Le second bouton, en bas à droite, est de type "image". Il ne comporte pas d'alternative textuelle. Aussi, des lecteurs d'écran ou des navigateurs vocaux afficheront le nom du fichier source en guise de nom, c'est-à-dire "images/prev_arrow.gif". Ce qui n'indique en rien à l'utilisateur à quoi sert ce bouton.

<form action="#" method="post">
<table width="100%">
<tr>
<td>Ville de départ :</td>
<td>Ville d'arrivée :</td>
</tr>
<tr>
<td>
faites votre choix :
<select>
<option>Paris</option>
<option>Lyon</option>
<option>Rennes</option>
</select>
</td>
<td>
faites votre choix :
<select>
<option>Paris</option>
<option>Lyon</option>
<option>Rennes</option>
</select>
</td>
</tr>
<tr>
<td><input type="reset" name="reset" value="cancel" /></td>
<td><input type="image" src="images/prev_arrow.gif" name="script_de_validation" /></td>
</tr>
</table>
</form>

#### Exemple de bonne pratique

En reprenant l'exemple précédent, et en rapprochant les champs de leurs intitulés respectifs, ceux-ci deviennent explicites et pertinents. La mension "faites votre choix" peut éventuellement être utilisées comme première valeur des éléments de liste, comme indiqué dans l'extrait de code ci-dessous.

le bouton en bas à gauche, de type "reset", permettant de remettre tous les champs à leur valeur initiale, possède un intitulé explicite, représenté par la valeur de l'attribut `value`. Cette valeur est "effacer tous les champs".

Le bouton, en bas à droite, permettant de soumettre le formulaire, possède une alternative textuelle pertinente en guise d'intitulé de champ, représentée par le contenu de l'attribut `alt`.

<form action="#" method="post">
<table width="100%">
<tr>
<td>Ville de départ :<br />
<select>
<option selected="selected">Faites votre choix :</option>
<option>Paris</option>
<option>Lyon</option>
<option>Rennes</option>
</select>
</td>
<td>Ville d'arrivée :<br />
<select>
<option selected="selected">Faites votre choix :</option>
<option>Paris</option>
<option>Lyon</option>
<option>Rennes</option>
</select>
</td>
</tr>
<tr>
<td><input type="reset" name="reset" value="Effacer tous les champs" /></td>
<td><input type="image" src="images/prev_arrow.gif" alt="lancer votre recherche"
name="script_de_validation" /></td>
</tr>
</table>
</form>

revenir en haut de la page

### Illustrations

Note : pour lire les extraits sonores au format mp3 proposés sur ce guide, vous devez disposer d'un lecteur capable de lire ce type de fichier. Les enregistrements ont été réalisés à partir soit de la synthèse vocale utilisée par Jaws, soit celle utilisée par Home Page Reader. Pour plus d'informations sur le téléchargement de lecteurs de fichiers mp3, consulter le paragraphe Lecteurs multimédia de la page Outils d'aide à l'évaluation de ce guide.

Des intitulés de champs de formulaire peu explicites (format mp3, 158 ko)

Voici ce que lit Jaws lorsque l'utilisateur passe de champ en champ avec la touche "tabulation" :
"Entrée, mode formulaire actif. Zone de liste déroulante faites votre choix, Paris. Tab, zone de liste déroulante, faites votre choix, Paris. Tab, bouton cancelle. Tab, bouton image preuvaro."

Des intitulés de champ de formulaire explicites (format mp3, 190 ko)

Voici ce que lit Jaws lorsque l'utilisateur passe de champs en champ avec la touche "tabulation" :
"Entrée, mode formulaire actif. Zone de liste déroulante, ville ded départ, faites votre choix (1 de 4). Tab, zone de liste déroulante, ville d'arrivée, faites votre choix (1 de 4). Tab, bouton effacer tous les champs. Tab, bouton lancer votre recherche."

Note : pour lire les extraits sonores au format mp3, proposé sur ce guide vous devez disposer d'un lecteur capable de lire ce type de fichier. Pour plus d'informations sur le téléchargement de lecteurs de fichiers mp3, consulter la page mode d'emploi de ce guide.

revenir en haut de la page

### Références

#### Autres fiches à consulter

- Fiche 1.1 : Chaque élément graphique possède-t-il une alternative textuelle ?
- Fiche 1.2 : Pour chacune des images de la page ayant une alternative, les textes dans l'attribut ALT sont-ils appropriés par rapport au contexte dans lequel l'image se trouve ?
- Fiche 1.4 : Pour chacune des images de la page, les textes dans l'attribut ALT font-ils moins de 60 caractères ?
- Fiche 1.9 : Il convient de remplacer un texte sous forme d'image par un texte mis en forme. Cette règle est-elle respectée ?
- Fiche 11.3 : Est-ce que la disposition des champs de formulaire par rapport aux textes qui leur sont associés ne pose aucune ambiguïté ?
- Fiche 11.6 : Dans un formulaire, le commentaire du bouton SUBMIT est-il pertinent ?

#### Autres ressources

- html techniques (section 11.2 and 11.3) : Grouping form controls
- Plongez dans l'accessibilité (jour 28) : Expliciter les éléments de formulaire

revenir au sommaire de la fiche

revenir en haut de la page

Guide AccessiWeb (version 2.1, 30 août 2006) | Conditions d'utilisation | Contact