Où placer les cases à cocher et les boutons radios ?

10 commentaires ↓

#1 Goulven le 10.15.09 à 12:17

Les boutons radio et cases à cocher doivent être à gauche de leur label pour y être visuellement connecté. C’est la solution généralement retenue, et par conséquent celle qu’il faut reprendre car les utilisateurs s’attendent à ce qu’ils fonctionnent pareil sur tous les sites.

Mais c’est vrai que sur un formulaire aussi aéré et avec les labels à gauche des champs, ça fait un peu bizarre…

Dans ce cas, je proposerai au client quelque chose inspiré de l’article [Pretty accessible forms] (http://www.alistapart.com/articles/prettyaccessibleforms)

#2 Nico le 10.15.09 à 12:17

Bonjour Vincent, j’opterais plutôt pour la seconde solution, les label étant proposés avant les input, les synthèses vocales pourront mieux retranscrire l’information.

#3 neolao le 10.15.09 à 12:26

à droite

#4 La Blonde le 10.15.09 à 12:38

Dans certains cas les labels des cases à cocher ou boutons radios peuvent être assez longs et passer sur plusieurs lignes. Dans ce cas je trouve que c’est plus lisible lorsque le label est à droite.

#5 Rik le 10.15.09 à 14:07

Ma solution préférée est la première avec un petit changement : aligner les radios sur les champs. Donc un petit décalage à droite.

J’invente rien, je me base sur les menus Apple. Par exemple, ils feraient plutôt :

Nom     : _________
Je suis : x un homme
          x une femme

#6 Prélude le 10.15.09 à 15:55

Je fais comme Rik, je rajoute le terme « sexe » à gauche en premier label et je place les labels (cliquables) à droite « homme » et « femme ». Voir sur une seule ligne (avec un bon espace)

#7 Xavier le 10.15.09 à 20:51

Bonjour Vincent,

Je n’ai pas vraiment de préjugés sur la droite ou la gauche cela dépend souvent de la taille des contenus des labels et de la mise en forme du formulaire. Aujourd’hui l’utilisateur est autonome sur le média internet et en voit de toute les couleurs alors droite ou gauche je ne pense pas qu’il y est grande différence sur le choix d’une réponse.

#8 Shemu le 10.16.09 à 15:19

2 cas :

1. Si on utilise le raccourci clavier de Jaws pour obtenir une extraction du formulaire, il n’y a aucune différence entre les deux exemples.
2. Si on lit simplement le contenu de la page avec Jaws, il lit pour le 1er exemple : > Bouton radio non coché "Homme" (1 sur 2); Homme et pour le 2ème exemple > Homme deux points; Bouton radio non coché "Homme deux points" (1 sur 2);

Bref, aucune différence fondamentale. L’axe principal d’accessibilité est de bien lié les labels au champs de formulaires.

#9 Vincent le 10.16.09 à 15:55

Marrant, ça me semble tellement plus logique d’avoir tous les labels sur la gauche moi. Plus cohérent.

Rik : ce que je reproche pour le coup à cette approche (pourtant très chouette), c’est que tu places au final le <legend> parmis les <label>, d’une part ça ne me semble pas « logique », de l’autre c’est un peu relou à skinner.

#10 STPo le 10.19.09 à 22:07

C’est plus cohérent d’un point de vue technique, oui, mais c’est tout. Je serais d’avis de prendre un peu de hauteur par rapport à l’obligation de coller systématiquement à la logique HTML (dans la mesure où ça ne pose pas de souci d’accessibilité, ce qui semble être le cas).

Visuellement, dans l’exemple « Nom » qualifie la valeur qui va être entrée dans l’input text qui suit au même titre que « Sexe » qualifie celle qui va être envoyée par le formulaire par le choix d’un des input radio : pour moi, c’est logiquement équivalent, c’est juste que pour le sexe la « value » envoyée est limitée à deux choix (au lieu d’une infinité pour le texte).

Bref, je trouve la première solution plus lisible et logique « humainement » parlant, surtout skinnée comme le propose Rik (et comme on le fait habituellement). Le reste c’est seulement de la cuisine interne !

Laisser un commentaire