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

Critère 11.2 : Dans chaque formulaire, l'intitulé de chaque champ est-il pertinent ?

revenir en haut de la page

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

revenir en haut de la page

Comprendre

Comprendre le critère

Tous les intitulés des champs des formulaires doivent être pertinents.

Bénéfices pour les utilisateurs

• Bénéfice 1 :
  Pour un internaute aveugle qui 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 renseigner le champ.
  
  
• Bénéfice 2 :
  Pour une personne malvoyante qui 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épourvu 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

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.2.a [Argent] : Dans chaque formulaire, l'intitulé de chaque champ est-il pertinent ?
   
   
3. Valider le critère : le critère est validé si vous répondez oui au test applicable précédent.

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.2.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 formulaire, l'intitulé de chaque champ est pertinent
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.2.a [Argent] :

1. Sous Firefox, ouvrir la page à analyser.
2. Dans le menu "Form." de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Afficher les détails du formulaire".
3. Chaque formulaire de la page est entouré d'un liseret rouge et le code de chaque élément du formulaire est affiché.
4. Vérifier que pour chaque formulaire, l'intitulé de chaque champ est pertinent.
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é ?

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

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

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

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

revenir en haut de la page

Références

• html techniques for WCAG 1.0 (section 11.2 and 11.3) : Grouping form controls
• Plongez dans l'accessibilité : Expliciter les éléments de formulaire

revenir au sommaire de la fiche

revenir en haut de la page

---

Guide AccessiWeb (version 3.0, 9 juin 2008) | Conditions d'utilisation | Contact
Copyright © 2008 Association BrailleNet. Tous droits Réservés.