Yanous ! Accessibilité : Des formulaires.

[Pour accéder au sommaire général du mag-portail]

Des formulaires.
Présents sur de nombreux sites, les formulaires peuvent constituer un obstacle pour certains internautes handicapés qui ne pourront les utiliser. Explications.

Article réalisé en collaboration avec Illisite.

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>

Nom : Prénom :

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

Nom

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.