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

Sommaire de la fiche :

- Carte d'identité
- Comprendre

- Comment évaluer
- Comment mettre en oeuvre

- Illustrations
- Références

### 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

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

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

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.

revenir en haut de la page

### Références

#### Autres fiches à consulter

- Fiche 5.6 : Dans un tableau de mise en forme, le contenu est-il correctement ordonné ?
- Fiche 9.1 : Est-ce que la structuration de l'information est cohérente par rapport au contexte général du site ?"
- Fiche 10.4 : Des valeurs relatives sont-elles utilisées pour dimensionner les tableaux et définir la taille des polices de caractère ?
- Fiche 10.5 : Si des valeurs absolues sont utilisées, le sont-elles sans conséquence sur l'affichage de l'information ?
- Fiche 11.1 : La balise LABEL et les attributs correspondants (ID, FOR) sont-ils présents ?
- Fiche 11.2 : Les textes associés aux champs de formulaires donnent-ils leur fonction exacte ?
- Fiche 11.4 : La balise FIELDSET est-elle présente pour encadrer des blocs d'information de même nature ?
- Fiche 11.5 : La balise LEGEND est-elle présente pour donner un titre au bloc d'informations encadré par la balise FIELDSET ?
- Fiche 11.8 : Les informations sont-elles organisées dans un ordre logique dans les listes de choix ?

#### Autres ressources

- Web content Accessibility Curriculum (section 10.2) : ensure that the label is properly positioned
- html techniques (section 11.2 and 11.3) : Grouping form controls
- Plongez dans l'accessibilité (jour 28) : Expliciter les éléments de formulaire
- Simply accessible : Search form layout

revenir au sommaire de la fiche

revenir en haut de la page

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