Guide AccessiWeb

Accueil
Mode d'emploi
Structure d'une fiche
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
Glossaire
Aide à l'évaluation
Référentiel AccessiWeb
Tables de correspondance
Moteur de recherche
Références
Remerciements
Plan du guide

vous êtes ici : Accueil > Fiches AccessiWeb : Formulaires > Critère 11.3

Critère 11.3 : Dans chaque formulaire, chaque intitulé de champ et son champ associé sont-ils accolés ?

Sommaire de la fiche :

Carte d'identité
Comprendre

Comment évaluer
Comment mettre en oeuvre

Illustrations
Références

revenir en haut de la page

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

Test(s) AccessiWeb permettant de vérifier le critère 11.3

Note : le(s) test(s) suivant(s) sont issu(s) de AccessiWeb v1.1 [Déployé].

Test 11.3.a [Argent] : Dans chaque formulaire, chaque intitulé de champ et son champ associé de type radio ou checkbox sont-ils accolés ?
Test 11.3.b [Argent] : Dans chaque formulaire, chaque champ différent des types radio ou checkbox suit-il immédiatement son intitulé ?

Autre(s) fiche(s) AccessiWeb à consulter en relation avec cette fiche

Fiche du critère 11.1 : Dans chaque formulaire, l'intitulé de chacun de ses champs a-t-il une balise label avec ses attributs correspondants id et for ?
Fiche du critère 11.2 : Dans chaque formulaire, l'intitulé de chaque champ est-il pertinent ?

Correspondances avec des critères d'autres référentiels sur l'accessibilité du Web

Référentiel AccessiWeb 1.0 (19/12/2003) [version utilisée dans le Référentiel Accessibilité ADAE 2004] : 11.3 [Argent]
WCAG 1.0 (05/05/1999) : 10.2 [P2]
UWEM 1.0 (05/07/2006) : 10.2_HTML_01 [P2]
WCAG 2.0 (30/04/2008) : 2.4.3 [A]
mobileOK 1.0 (02/11/2006) : 5.7 [mobileOK Pro]
RGAA : pas de correspondance (aucune version datée du RGAA n'est disponible en ligne à la date de publication de ce guide).

revenir en haut de la page

Comprendre

Comprendre le critère

Tous les intitulés de champs des formulaires et leurs champs associés doivent être accolés, c'est-à-dire se suivre immédiatement horizontalement ou verticalement.

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

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

Sélectionner le(s) élément(s) à tester : identifier dans un navigateur graphique les noms de champs et leurs champs associés dans les formulaires.
Appliquer le(s) test(s) suivant(s) :
- Test 11.3.a [Argent] : Dans chaque formulaire, chaque intitulé de champ et son champ associé de type radio ou checkbox sont-ils accolés ?
- Test 11.3.b [Argent] : Dans chaque formulaire, chaque champ différent des types radio ou checkbox suit-il immédiatement son intitulé ?
Valider le critère : le critère est validé si vous répondez oui à tous les tests applicables précédents.

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.3.a [Argent] et le test 11.3.b [Argent] :

Ces tests ne sont pas évaluables par la Barre d'outils Accessibilité du Web (version 2.0 beta).

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.1.4 en français) :

Pour le test 11.3.a [Argent] et le test 11.3.b [Argent] :

Ces tests ne sont pas évaluables par la Barre d'Outils Web Developper (version 1.1.4).

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

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

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

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

html techniques for WCAG 1.0 (section 11.2 and 11.3) : Grouping form controls
WAI Curriculum (section 10.2) : ensure that the label is properly positioned
Plongez dans l'accessibilité : Expliciter les éléments de formulaire
Simply accessible : Search form layout

revenir au sommaire de la fiche

revenir en haut de la page