# Guide AccessiWeb

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

## Fiche 11.1 : La balise LABEL et les attributs correspondants (ID, FOR) sont-ils présents ?

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.1
- Niveau AccessiWeb : bronze
- Point(s) de contrôle WCAG 1.0 correspondants (Priorité 2 de WAI) : 10.2, 12.4

revenir en haut de la page

### Comprendre

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

- Bénéfice 1 :
  Dans le cas d'une page en HTML, la balise `LABEL` associée aux attributs `id` et `for` permet de relier directement le champ de saisie au texte qui lui est associé. Cela permet aux personnes navigant à l'aide d'un lecteur d'écran ou un navigateur vocal de définir sans ambiguïté à quel texte associé correspond le champ de saisie. En effet, lorsqu'ils passent de champ en champ en appuyant sur la touche "tabulation", la synthèse vocale annonce l'intitulé du champ courant.
- Bénéfice 2 :
  Si la balise `LABEL` est présente, l'activation d'un élément du formulaire est rendue possible par un simple clic sur le contenu de l'intitulé. Cette activation par le biais de la balise `LABEL` offre un confort d'utilisation non négligeable aux utilisateurs ayant une vision réduite ou une mobilité limitée des membres supérieurs. En particulier sur les cases à cocher ou les boutons radio qui, du fait de leur taille réduite, sont difficiles à atteindre de manière précise avec la souris.

#### Valeur ajoutée pour le site

Il n'y a pas d'élément d'information pour cette rubrique.

revenir en haut de la page

### Comment évaluer

#### Par le code source

1. Vérifier que chaque élément du formulaire possède un texte associé.
2. Une fois le texte associé identifié, s'assurer que celui-ci est encadré de la balise `LABEL`.
3. Vérifier que la valeur de l'attribut `for` de la balise `LABEL` correspond à la valeur de l'attribut `id` de l'élément du formulaire.

#### 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.1.
3. La page s'affiche avec les balises et attributs des formulaires si présents et renseignés.
4. Vérifier que la balise `LABEL` est présente ainsi que ses attributs `ID` et `FOR`.
   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) :

Méthode 1 :

1. Aller dans le menu "Structure", puis l'option "Fieldset/Labels".
2. Les balises et attributs des formulaires apparaissent sur la page si présents et renseignés.

Méthode 2 :

1. Sélectionner le champ de saisie ainsi que son texte associé avec la souris.
2. Cliquer sur le menu "Source", puis sur l'option "Voir le code source de la sélection [Nouvelle fenêtre]".
3. Vérifier que la balise `LABEL` est présente ainsi que ses attributs `id` et `for`.

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

Méthode 1 :

1. Activer l'option "Afficher les détails du formulaire" du menu "Form.".
2. Chaque formulaire de la page est entouré d'un liseret rouge et le code de chaque élément du formulaire est affiché.
3. Pour chaque formulaire, vérifier que la balise `LABEL` est présente ainsi que ses attributs `id` et `for`.

Méthode 2 :

1. Activer l'option "Voir Source" du menu "Voir Source".
2. Une nouvelle fenêtre apparaît et affiche le code source.
3. Pour chaque formulaire, vérifier que la balise `LABEL` est présente ainsi que ses attributs `id` et `for`.

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

Jaws ne permet pas de détecter la présence systématique de la balise `LABEL` et de ses attributs. En effet, le lecteur d’écran associe parfois des champs à du texte situé à côté du champ mais qui n’est pas forcément relié à ce champ. Néanmoins, une fois que l’utilisation de la balise `LABEL` a été implémentée, Jaws peut être un moyen de vérifier si les champs et leurs étiquettes sont lus correctement.

1. Afin de vérifier si les champs et leur intitulé sont correctement associés, il faut tout d'abord s'assurer que Jaws est bien configuré (voir la partie sur la configuration de Jaws).
2. Rechercher ensuite le premier champ de formulaire à l'aide de la touche F et se déplacer dans le formulaire avec la touche TAB. Si un LABEL est présent, il sera lu par Jaws.

revenir en haut de la page

### Comment mettre en oeuvre

#### Qui est concerné ?

Ce critère est implémenté par le développeur HTML et le rédacteur.

#### Implémentation

La balise `LABEL` est utilisée pour mettre une étiquette à un élément de formulaire.
Elle est donc présente juste avant ou juste après l'élément du formulaire auquel elle est associée. La valeur de l'attribut `for` de la balise `LABEL` doit correspondre à la valeur de l'attribut `id` de l'élément du formulaire (champ, case à cocher,...).
Syntaxe :

<label for="identifiant_du_champ">
[intitulé du champ]
</label>
<input [...] id="identifiant_du_champ" />

#### Exemple de mauvaise pratique

Dans cet extrait de code, le nom du bouton de soumission est donné par la valeur de l'attribut `value`, qui est "OK". Ce qui n'est pas explicite.

<form action=".." method="...">
<label for="recerche">Recherche dans le site</label>
<input type="text" name="recherche" id="recherche" />
<input type="submit" value="OK" />
</form>

#### Exemple de bonne pratique

Ici, le nom du bouton de soumission est donné par la valeur de l'attribut `value` : "Lancer la recherche". Ce qui rend bien compte de la fonction de ce bouton.

<form action="..." method="...">
<label for="recherche">Recherche dans le site</label>
<input type="text" name="q3" id="recherche" value="" />
<input type="submit" value="Lancer la recherche" />
</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.

Un bouton de soumission mal nommé (format mp3, 52 ko)

Voici ce que lit Jaws sur un formulaire dont le bouton n'est pas correctement nommé :
"Mode formulaire activé. Recherche dans le site édition. Tab, okey bouton."

Un bouton de formulaire correctement nommé (format mp3, 58 ko)

Voici ce que lit Jaws sur un formulaire dont le bouton de soumission est correctement nommé :
"Mode formulaire activé. Recherche dans le site,édition. Tab, lancer la recherche bouton."

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 11.2 : Les textes associés aux champs de formulaires donnent-ils leur fonction exacte ?
- 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é ?

#### Autres ressources

- html Techniques (section 11.3) : forms labels
- html Techniques (section 1.2 : Structural grouping
- webaim.org : Creating accessible forms
- html techniques (section 12.4) : Associate labels explicitly with their 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