Bénéfice 1 :
Si l'espace est trop grand entre un champ de formulaire et son intitulé, les personnes malvoyantes qui utilisent un zoom d'écran pour agrandir la page, par exemple, ne savent plus à quel texte est rattaché le champ de saisie.
Dans le cas d'un formulaire classique et relativement simple associant horizontalement un texte à son champ de saisie, des études ergonomiques précisent que la distance entre le champ de saisie et le texte associé ne doit pas être supérieure à deux espaces.
Bénéfice 2 :
Le fait de rapprocher le plus possible les champs de formulaire et leurs intitulés, permet aux personnes souffrant d'un handicap cognitif d'identifier plus aisément l'utilité ou la fonction de chacun des champs.
Valeur ajoutée pour le site
Il n'y a pas d'élément d'information pour cette rubrique.
Ce critère n'est pas évaluable par l'étude du code source.
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) :
Ce critère n'est pas évaluable par la barre AccessiWeb.
Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
Ce critère n'est pas évaluable par la barre d'accessibilité AIS version 1.2 pour IE.
Evaluer avec la Barre d'Outils Web Developper pour Firefox (version
1.0.2 en français) :
Ce critère n'est pas évaluable par la barre d'outils Web Developer version 1.0.2 pour Firefox.
Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :
Ce critère n'est pas évaluable par le lecteur d'écran Jaws.
Le graphiste doit veiller au respect de ce critère.
Implémentation
L'intitulé des champs de formulaire (champ de saisie, menu déroulant/liste, boutons radios), doit être adjacent à ceux-ci. Il est recommandé de mettre au maximum 2 espaces entre l'intitulé et le champ.
Exemple de mauvaise pratique
La difficulté de lecture d'un formulaire est généralement liée à une mauvaise disposition des champs et de leur intitulé (un intitulé à cheval sur plusieurs champs, par exemple). Cela peut aussi provenir d'une mauvaise structuration des informations à remplir ne suivant pas un ordre logique. Le plus fréquemment utilisé est, par exemple, du général au particulier. Enfin, il peut s'agir d'un regroupement inapproprié des données ayant un rapport direct entre elles.
Exemple de bonne pratique
Pour une bonne compréhension d'un formulaire, il est donc important de regrouper visuellement les éléments ayant un rapport entre eux, de structurer logiquement les informations, et de lier visuellement les champs et leur intitulé.
Cette image montre un formulaire dont les boutons-radio à cocher précèdent leur texte descriptif. Les personnes qui lisent la page de manière linéaire ne peuvent pas savoir à quoi est associé chaque bouton-radio. De plus, l'intitulé du bouton de validation est représenté par une flèche, ce qui ne rend pas explicite.
Cette image montre le même formulaire que précédemment. Cette fois, les boutons-radio sont placés après leur intitulé. Une personne lisant de manière linéaire, lira d'abord l'intitulé, puis le bouton-radio et saura à quoi il se rattacfhe. Le bouton de validation a été renommé "Lancer la recherche". Sa fonction devient donc explicite.