FICHE 6

LES FORMULAIRES

 

1.Rappel des recommandations 5 et 10 des WCAG 1.0 :

Il n'y a pas de recommandation spécifique aux formulaires dans les WCAG mais plusieurs points de contrôle traitent des formulaires.

Points de contrôle : 10.2 (Priorité 2) ; 12.4 (Priorité 2) ; 9.4 (Priorité 3) ; 9.5 (Priorité 3) ; 10.4 (Priorité 3)

Raisons de cette recommandation

Un formulaire construit de façon incorrecte entraîne des difficultés de compréhension et de navigation.

2. Ce qu'il faut faire

La règle générale

Veiller à organiser logiquement les éléments d'un formulaire, les identifier clairement et s'assurer que la technologie utilisée pour la validation est accessible avec tous les navigateurs.

Accéder au formulaire grâce au clavier

  • Spécifier l'ordre de circulation avec la touche TABULATION
    Il est possible de spécifier l'ordre de tabulation au sein des éléments (par ordre, "champ2", "champ1", "submit") avec "tabindex".
Exemple :

<FORM action="submit" method="post">
<INPUT tabindex="2" type="text" name="champ1">
<INPUT tabindex="1" type="text" name="champ2">
<INPUT tabindex="3" type="submit" name="submit">
</FORM>

Donner un nom explicite aux contrôles des formulaires

Utiliser la balise "LABEL" (reliée aux champs correspondant grâce aux attributs "for" et "id", voir exemple ci-dessous).

Exemple :

<LABEL for="firstname">First name : </LABEL>
<INPUT type="text" id="firstname" tabindex="1">
  • Fournir des raccourcis clavier pour les formulaires
    L'exemple suivant spécifie "ALT + U" comme raccourci (utilisation d'"accesskey").
    Ce raccourci amène directement au champ de saisie où l'utilisateur peut saisir le texte.

Exemple :

<FORM action="submit" method="post">
<LABEL for="user" accesskey="U">name</LABEL>
<INPUT type="text" id="user">
</FORM>

Grouper les contrôles des formulaires

Grouper l'information lorsque c'est naturel et approprié. Quand les contrôles de formulaire peuvent être groupés en unités logiques, utiliser l'élément "FIELDSET " et donner un nom à ces unités avec l'élément " LEGEND ".

Exemple :

<FORM action="http://somesite.com/adduser" method="post">
<FIELDSET>
<LEGEND>Personal information</LEGEND>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname" tabindex="1">
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname" tabindex="2">
...more personal information...
</FIELDSET>
<FIELDSET>
<LEGEND>Medical History</LEGEND>
...medical history information...
</FIELDSET>
</FORM>

exemple de formulaire

L'information est groupée grâce à l'élément "FIELDSET"

Validation des formulaires

Eviter la vérification ou la validation d'un ou plusieurs éléments d'un formulaire (champ de saisie ou bouton de validation par exemple) à l'aide de JavaScript. Il est préférable de mettre en place des mécanismes de vérification et de validation directement au niveau du serveur.

Permettre la validation d'un champ de saisie par la touche entrée (focus sur le bouton de validation).

  • Formulaires validés côté client par JavaScript / Formulaires validés côté serveur par CGI (PHP, ASP…)

Les formulaires permettent le plus souvent de récupérer des informations concernant les internautes, en vue de leur envoyer des e-mails ou des courriers postaux (exemple : formulaire d'inscription). Le rôle du script est de vérifier les informations saisies par l'internaute afin de contrôler le format ou le contenu.

Pour cela, il y a deux solutions : valider les champs de saisie sur le poste client ou les valider après soumission sur le serveur.

Sur le poste client (l'ordinateur de l'internaute), le seul moyen de valider les champs est d'utiliser du JavaScript, car ce langage est interprété par les navigateurs les plus courants tels que Internet Explorer ou Netscape. L'avantage de cette solution est d'éviter les allers-retours avec le serveur, la surcharge de celui-ci. Elle permet à l'internaute de remplir correctement et rapidement un formulaire.
Cependant, l'inconvénient principal de ce langage est qu'il n'est pas interprété par certains logiciels, les navigateurs textuels notamment (Lynx, Braillesurf…). Ces derniers sont souvent utilisés par les déficients visuels pour leur simplicité de navigation et de présentation de l'information.
Donc, pour un internaute navigant avec ce type de logiciel, ces formulaires sont inaccessibles car le Javascript n'étant pas interprété, le formulaire ne peut être validé ce qui rend souvent l'inscription impossible.

Côté serveur, on peut aussi vérifier la validité des champs de saisie et renvoyer la page avec les champs non ou mal, remplis ainsi que des indications afin de mieux remplir ces derniers.
L'inconvénient est que cette méthode risque, en cas d'affluence sur le site, de faire ralentir le serveur (dans le cas où un grand nombre de personnes seraient connectées sur le même formulaire, et validant ce dernier au même instant).
Le gros avantage de cette méthode est qu'elle ne pose aucun problème au navigateur puisqu'elle est exécutée sur le serveur.
Ainsi, les informations transmises sont de simples pages HTML qui sont accessibles à tous.

Conclusion : il faut faire les deux. Vérifier les informations sur le serveur même s'il y a une vérification en JavaScript.

Exemple de code source :

Source d'un formulaire validé côté serveur ( code source PHP). Seuls les champs mal remplis sont demandés à nouveau (dans l'exemple, on vérifie si le code postal est bien une suite de chiffres).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML lang="fr">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>Formulaire</TITLE>
<LINK rel="stylesheet" type="text/css" href="my.css">
</HEAD>

<BODY>
<FORM action="formulaire.htm" method="POST" name="formulaire"
enctype="multipart/form-data" title="Formulaire d'inscription">

<TABLE>
<?php if (!$nom) {?>
<TR>
<TD>Nom :</TD>
<TD><INPUT TYPE="TEXT" name="nom"></TD>
</TR>
<?php } else { echo "<INPUT TYPE=\"hidden\" name=\"nom\" value=\"$nom\">";}?>

<?php if (!$prenom) {?>
<TR>
<TD>Prénom :</TD>
<TD><INPUT TYPE="TEXT" name="prenom"></TD>
</TR>
<?php } else { echo "<INPUT TYPE=\"hidden\" name=\"prenom\" value=\"$prenom\">";}?>

<?php if (!$email) {?>
<TR>
<TD>Email :</TD>
<TD><INPUT TYPE="TEXT" name="email"></TD>
</TR>
<?php } else { echo "<INPUT TYPE=\"hidden\" name=\"email\" value=\"$email\">";}?>

<?php if (!$adresse) {?>
<TR>
<TD>adresse :</TD>
<TD><INPUT TYPE="TEXT" name="adresse"></TD>
</TR>
<?php } else { echo "<INPUT TYPE=\"hidden\" name=\"adresse\" value=\"$adresse\">";}?>

<?php if (!$cp || !ereg("^[0-9]{5}$",$cp)) {?>
<TR>
<TD>CP <?php if ($cp!="" && !ereg("^[0-9]{5}$",$cp))
echo "Votre Code Postal doit être composé de 5 chiffres !!!"
?> :
</TD>
<TD><INPUT TYPE="TEXT" name="cp"></TD>
</TR>
<?php } else { echo "<INPUT TYPE=\"hidden\" name=\"cp\" value=\"$cp\">";}?>

<?php if (!$ville) {?>
<TR>
<TD>Ville :</TD>
<TD><INPUT TYPE="TEXT" name="ville"></TD>
</TR>
<?php } else { echo "<INPUT TYPE=\"hidden\" name=\"ville\" value=\"$ville\">";}?>

</TABLE>
<INPUT TYPE="SUBMIT" value="Valider">
</FORM>

</BODY>
</HTML>

Résultat avec Internet Explorer :

exemple de formulaire mal renseigné

Le formulaire est renseigné. Il y a une erreur dans le champ "Code Postal"

message d'erreur

Le message d'erreur est une page HTML simple renvoyée par le serveur.

3. Applications à l'aide des éditeurs HTML

A l'heure actuelle, des attributs HTML comme "legend", "label"… ne sont pas intégrés dans les éditeurs HTML les plus courants. Ils sont à implémenter manuellement, directement dans le code source des pages.

  • Avec Frontpage
    Utiliser l'onglet approprié.
  • Avec Dreamweaver
    F10 pour obtenir le code source de la page.

4.Exemples rencontrés sur les sites évalués

Le site de la Caisse des Allocations Familiales (www.caf.fr) fournit plusieurs bons exemples de formulaires accessibles aussi bien grâce à leur système de validation que dans leur conception visuelle.

retour aux fiches