retour vers le site AccessiWeb

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 ?

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

Valeur ajoutée pour le 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

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 11.1 Fiche suivante : fiche 11.3

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