Présents
sur de nombreux sites, les formulaires peuvent constituer un
obstacle pour certains internautes handicapés qui ne pourront
les utiliser. Explications.
Un formulaire mal construit ne pourra pas être employé
et validé par vos visiteurs, qu'ils soient handicapés
ou non. Afin de clarifier la compréhension et la construction
correcte des formulaires, trois étapes sont donc à mettre
en place :
1 - utiliser les balises de regroupement de champs;
2 - associer les étiquettes aux champs de formulaire;
3 - minimiser les contrôles par des scripts côté client.
1 - Le regroupement des champs. Il faut s'efforcer
de sectoriser au maximum l'information en la regroupant
par thèmes, en utilisant l'attribut "fieldset" pour
regrouper tous les champs de même nature. Par exemple
: sur un formulaire d'inscription, mettez tous les champs
concernant l'état civil dans le même "fieldset". Il
convient ensuite d'identifier les différentes zones
de regroupement à l'aide de la balise "legend". Par
exemple :
<fieldset>
<legend>État civil</legend><br>
Nom : <input type = "text" id = "nom"
name = "nom">
Prénom : <input type = "text" id
= "prenom" name = "prenom">
</fieldset>
2 - Association des étiquettes
aux champs de formulaires. Afin d'améliorer la compréhension
des formulaires, il faut rattacher les étiquettes aux
champs correspondants. Cet attachement se fait par l'intermédiaire
de la balise "label" :
<label for = "name"> Nom</label><input
type = "text" name = "name" id =
"name">
La balise label permettra de faire le lien entre le
champ "name" et l'étiquette "nom". Il faut, de plus,
placer l'étiquette juste avant le champ de formulaire,
et de préférence sur la même ligne. Il est aussi conseillé
de ne mettre qu'un seul champ de formulaire par ligne.
Placez le libellé de l'étiquette dans le champ de formulaire
lui- même, ce qui permettra aux utilisateurs de loupe
d'écran, de synthèse vocale et de plage braille de naviguer
de champ en champ sans avoir à se déplacer sur l'étiquette,
et donc sans perdre du temps dans la navigation. Si
une telle solution est adoptée, il est conseillé de
prévoir un mécanisme automatique d'effacement du libellé
:
<input type = "text" name = "prenom"
id = "prenom" value = "saisissez votre
prénom" onfocus = this.value =''>
Cette utilisation de JavaScript n'est
pas gênante car les utilisateurs désactivant les scripts
auront la même information mais devront effacer eux-
même le texte du champ.
3 - Scripts de validation des formulaires. Lors
de la validation des formulaires, les contrôles de champs
s'effectuent la plupart du temps par JavaScript, ce
qui permet d'accélérer le traitement. Ces contrôles
côté client deviennent inefficaces et inutiles si JavaScript
est désactivé ou non supporté par le navigateur. Ceci
peut donc entraîner des erreurs de saisie et par conséquent
un mauvais traitement de l'information côté serveur.
Si vous souhaitez effectuer un contrôle JavaScript de
vos formulaires coté client, cela ne pose pas de problème
mais pensez alors à mettre en place un mécanisme de
validation côté serveur si le client ne supporte pas
les scripts. Exemple de mise en place de la double validation
(cotés client et serveur) :
<input type = "text" name = "prenom"
id = "prenom" value = "saisissez votre
prénom" onfocus = this.value =''><script
type = "text/javascript" language = "javascript">document.write('<input
type = "hidden" name = "validation_js"
value = "1">');</script>
<noscript><input type = "hidden"
name = "validation_js" value = "0"></noscript>
Il ne vous reste plus ensuite qu'à
contrôler au niveau du serveur la valeur du paramètre
validation_js. Si elle est à 0, cela signifie
que les scripts côté client ne sont pas supportés
et qu'il faut rediriger le traitement de l'information
vers un contrôle de saisie côté serveur. Enfin, pour
que cette technique soit opérationnelle, il faut que
la validation par javascript soit conditionnée par la
clause "onsubmit" du formulaire et non par une action
de clic sur le bouton de validation du formulaire :
<form name = "form" action = "traitement.php"
method = "post" onsubmit = "validation_javascript()">
Attention : n'oubliez pas de bloquer l'envoi des données
après contrôle si elles sont erronées.
