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.
Pour chaque formulaire et chaque champ de formulaire présent sur la page, repérer les intitulés qui leurs sont associés.
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) :
Sous Internet Explorer, ouvrir la page à analyser.
Dans le menu "11. Formulaires" de la Barre AccessiWeb, activer le critère 11.2.
La page s'affiche avec les balises et attributs des formulaires si présents et renseignés.
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) :
Dans "Structure", cliquer sur "Fieldset/Labels".
Les balises et attributs des formulaires apparaissent sur la page si présents et renseignés.
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 :
Activer l'option "Voir Source" du menu "Voir Source".
Une nouvelle fenêtre apparaît et affiche le code source.
Vérifier que les textes associés aux champs de formulaires donnent leur fonction exacte.
Méthode 2 :
Activer l'option "Informations sur les formulaires" du menu "Form.".
Deux tableaux ("Formulaire" et "Eléments") apparaissent pour chaque formulaire présent sur la page.
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) :
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".
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é.
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.
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.
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.
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.
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."
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.
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 ?