vendredi 06 juin 2003
par Bleizig

Labels et formulaires accessibles

En travaillant sur la version 3.0, j'ai découvert un article paru chez Accessify sur l'importance de l'utilisation de la balise label afin d'améliorer non seulement l'accessibilité des formulaires mais aussi leur utilisabilité.

Pour le moment, vous connaissez peut-être seulement leur mission principale qui est d'associer clairement une légende aux divers éléments d'un formulaire. En effet, si, sur un navigateur traditionnel, la disposition de ces légendes est évidente et renseigne clairement sur la nature des éléments du formulaire, elle peut se révéler un vrai calvaire pour un internaute utilisant un navigateur audio. Voici un exemple de rendu par le navigateur Jaws avec le recours aux balises label :

"Edit: First Name"
"Edit: Middle Name"
"Edit: Last Name"
"Edit: Title"
"Edit: Sex"

Et sans les balises [label :

"Edit"
"Edit"
"Edit"
"Edit"
"Edit"

Ainsi donc, la règle à suivre est simple : à chaque élément de formulaire doit être associée une balise label qui renseigne clairement sur la fonction de cet élément. Autrement, l'utilisateur demeure dans le noir.

L'aspect des label qui m'était inconnu jusqu'à présent concerne l'utilisabilité des formulaires : en utilisant cette balise, vous rendez le libellé d'un champ de formulaire cliquable. Un clic de souris et voilà le champ activé. Cette fonctionnalité s'avère encore plus intéressante pour les boîtes à cocher et boutons radio ; plus besoin maintenant de pointer le curseur exactement sur le tout petit carré ou rond. Cliquer sur la légende suffit ! Bien pratique pour les utilisateurs qui ne maîtrisent pas parfaitement la souris ou encore ceux dont la vue baisse. Ainsi l'auteur de l'article conseille de rendre cette fonctionnalité évidente en transformant le curseur de souris en main quand l'utilisateur passe au dessus des légendes.

label {cursor:pointer;}

Pour ceux qui auraient tendance à penser que le "cursor: pointer;" devrait être réservé aux hyperliens, voici à ce sujet les propos de l'auteur :

Note that some people will argue (correctly) that this goes against usability principles, in that the hand suggests a link (I agree). However, I would argue that as long as your link style is different (and consistently so) from your label style, this should not be a problem. People will very quickly learn that the result of clicking on text above the field sets the focus to that field.

Si vous voulez avoir une idée du résultat, jettez un oeil du côté du formulaire de contact de ce site. Vous comprendrez tout de suite.

Bleizig | 2003.06.06 @ 16:12