retour vers le site AccessiWeb

Guide AccessiWeb


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

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é ?

Carte d'identité

  • Critère AccessiWeb : 11.3
  • Niveau AccessiWeb : argent
  • Point(s) de contrôle WCAG 1.0 correspondants (Priorité 2 de WAI) : 10.2, 12.3

revenir en haut de la page

Comprendre

Bénéfices pour les utilisateurs

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

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.

revenir en haut de la page

Comment mettre en oeuvre

Qui est concerné ?

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é.

revenir en haut de la page

Illustrations

Un formulaire dont les intitulés de champs sont ambigus

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.

Un formulaire dont les intitulés de champs sont clairs

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.

revenir en haut de la page

Références

Autres fiches à consulter

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 11.2 Fiche suivante : fiche 11.4

Guide AccessiWeb (version 2.1, 30 août 2006) | Conditions d'utilisation | Contact