Guide AccessiWeb

1. Accueil
2. Mode d'emploi
3. Structure d'une fiche
4. Fiches AccessiWeb
   • 1) Images
   • 2) Cadres
   • 3) Couleurs
   • 4) Multimédia
   • 5) Tableaux
   • 6) Liens
   • 7) Code exécutable
   • 8) Eléments obligatoires
   • 9) Structuration de l'information
   • 10) Présentation de l'information
   • 11) Formulaires
   • 12) Navigation
   • 13) Consultation
5. Glossaire
6. Aide à l'évaluation
   • Liste d'outils
   • Manuel Code Source
   • Manuel WAT [Internet Explorer]
   • Manuel Web Dev [Firefox]
7. Référentiel AccessiWeb
   • AccessiWeb v1.1 [Général]
   • AccessiWeb v1.1 [Déployé]
   • AccessiWeb v1.0
8. Tables de correspondance
   • AW v1 vers AW v1.1 [Général]
   • AW v1.1 [Général] vers AW v1.1 [Déployé]
   • AW v1.1 [Général] vers WCAG 1.0
   • AW v1.1 [Général] vers UWEM 1.0
   • AW v1.1 [Déployé] vers UWEM 1.0
   • AW v1.1 [Général] vers WCAG 2.0
   • AW v1.1 [Général] vers mobileOK Basic 1.0
   • AW v1.1 [Général] vers RGAA
9. Moteur de recherche
10. Références
11. Remerciements
12. Plan du guide

vous êtes ici : Accueil > Fiches AccessiWeb : Formulaires > Critère 11.1

Critère 11.1 : Dans chaque formulaire, l'intitulé de chacun de ses champs a-t-il une balise label avec ses attributs correspondants id et for ?

revenir en haut de la page

Carte d'identité du critère 11.1 [niveau AccessiWeb : Argent]

revenir en haut de la page

Comprendre

Comprendre le critère

Bénéfices pour les utilisateurs

• Bénéfice 1 :
  La balise label associée aux attributs id et for permet permet aux personnes navigant à l'aide d'un lecteur d'écran ou d'un navigateur vocal d'identifier sans ambiguïté à quel texte associé correspond le champ du formulaire. 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. Les personnes ayant des difficultés de lecture tireront également profit de cette fonctionnalité, 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

revenir en haut de la page

Comment évaluer

Note : de manière générale, il est conseillé de faire l'évaluation d'un critère via l'analyse de son code source. Ce procédé d'évaluation par le code source est détaillé ci-après quand il est possible : procédé d'évaluation en 3 étapes via le ou les tests associés au critère. Les procédés d'évaluation par différents outils sont donnés en complément de l'évaluation par le code source.

Par le code source

1. Sélectionner le(s) élément(s) à tester : ouvrir le code source de la page Web et sélectionner le code associé à tous les éléments suivants (exemple de code source : <label for="identifiant_du_champ"> [nom du champ] </label> <input [...] id="identifiant_du_champ" />) :
   • balise label et balise input
   • balise label et balise textarea
   • balise label et balise select
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 11.1.a [Argent] : Pour chaque champ de formulaire (balises input, textarea et select), son intitulé a-t-il une balise label ?
   • Test 11.1.b [Argent] : Pour chaque champ de formulaire (balises input, textarea et select) ayant une balise label, la technique permettant de le lier à son intitulé (balise label avec attribut for et balises input/textarea/select avec attribut id) est-elle présente ?
   • Test 11.1.c [Argent] : Pour chaque champ de formulaire (balises input, textarea et select), l'identifiant utilisé par l'attribut id est-il unique ?
   
   
3. Valider le critère : le critère est validé si vous répondez oui à tous les tests applicables précédents.

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 d'outils Accessibilité du Web pour Internet Explorer (version 2.0 beta en français) :

• Pour le test 11.1.a [Argent] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Structure" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mettre en valeur les Fieldset / Labels".
  3. Vérifier que pour chaque champ de formulaire (balises input, textarea et select), son intitulé a une balise label.
  4. Si c'est le cas, le test est validé.
  
  
• Pour le test 11.1.b [Argent] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Structure" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mettre en valeur les Fieldset / Labels".
  3. Vérifier que pour chaque champ de formulaire (balises input, textarea et select) ayant une balise label, la technique permettant de le lier à son intitulé (balise label avec attribut for et balises input/textarea/select avec attribut id) est présente.
  4. Si c'est le cas, le test est validé.
  
  
• Pour le test 11.1.c [Argent] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Structure" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mettre en valeur les Fieldset / Labels".
  3. Vérifier que pour chaque champ de formulaire (balises input, textarea et select), l'identifiant utilisé par l'attribut id est unique.
  4. Si c'est le cas, le test est validé.

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

• Pour le test 11.1.a [Argent] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  3. Une nouvelle fenêtre apparaît contenant le code source de la page.
  4. En faisant une recherche sur le mot label (ctrl + f), vérifier que pour chaque champ de formulaire (balises input, textarea et select), son intitulé a une balise label.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 11.1.b [Argent] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  3. Une nouvelle fenêtre apparaît contenant le code source de la page.
  4. En faisant une recherche sur le mot label (ctrl + f), vérifier que pour chaque champ de formulaire (balises input, textarea et select) ayant une balise label, la technique permettant de le lier à son intitulé (balise label avec attribut for et balises input/textarea/select avec attribut id) est présente.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 11.1.c [Argent] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  3. Une nouvelle fenêtre apparaît contenant le code source de la page.
  4. En faisant une recherche sur le mot label (ctrl + f), vérifier que pour chaque champ de formulaire (balises input, textarea et select), l'identifiant utilisé par l'attribut id est unique.
  5. Si c'est le cas, le test est validé.

revenir en haut de la page

Comment mettre en oeuvre

Avertissement : les informations du paragraphe "Comment mettre en oeuvre" sont données à titre indicatif. Les contenus des sous-paragraphes Implémentation et Exemple de bonne pratique ne présentent pas tous les codes d'implémentation.

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, la valeur de l'attribut for de la balise label ne correspond pas à la valeur de l'attribut id dans la balise input :

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

Exemple de bonne pratique

Dans cet extrait de code, la valeur de l'attribut for de la balise label est identique à la valeur de l'attribut id dans la balise input :

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

revenir en haut de la page

Illustrations

Avertissement : le contenu du paragraphe "Illustrations" est donné à titre indicatif. Il ne présente pas tous les cas possibles.

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

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

revenir en haut de la page

Références

• html techniques for WCAG 1.0 (section 11.3) : forms labels
• html techniques for WCAG 1.0 (section 1.2 : Structural grouping
• WAI Curriculum (section 12.4) : Associate labels explicitly with their controls
• WebAIM : Creating accessible forms
• Plongez dans l'accessibilité : Expliciter les éléments de formulaire

revenir en haut de la page