# Guide AccessiWeb

vous êtes ici : Accueil > Fiches AccessiWeb : Formulaires > Fiche 11.7

## Fiche 11.7 : Le contrôle de saisie des champs du formulaire est-il accessible ?

Sommaire de la fiche :

- Carte d'identité
- Comprendre

- Comment évaluer
- Comment mettre en oeuvre

- Illustrations
- Références

### Carte d'identité

- Critère AccessiWeb : 11.7
- Niveau AccessiWeb : bronze
- Point(s) de contrôle WCAG 1.0 correspondants (Priorité 1 de WAI) : 6.3
- Point(s) de contrôle WCAG 1.0 correspondants (Priorité 2 de WAI) : 6.5

revenir en haut de la page

### Comprendre

#### Bénéfices pour les utilisateurs

- Bénéfice 1 :
  Quelle que soit l'interface utilisée, l'utilisateur aura la possibilité de valider le formulaire.

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  Les actions côté serveur vont réduire la lourdeur du code.

revenir en haut de la page

### Comment évaluer

#### Par le code source

1. Vérifier la présence du Javascript soit dans la balise `FORM` en amont du formulaire, soit dans la balise `IMG` ou `INPUT` en fin de formulaire.
2. Vérifier la présence de scripts Javascript gérant les contrôles de saisie.

#### Par l'utilisation d'outils

Pour une liste complète des outils utilisés pour évaluer l'accessibilité des pages web, et un résumé de leurs principales fonctionnalités, reportez-vous à la page Outils d'aide à l'évaluation.

##### Evaluer avec la barre AccessiWeb (version 1.0) :

1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "11. Formulaires" de la Barre AccessiWeb, activer le critère 11.7.
3. Toutes les actions de la page générées par un javascript sont désactivées.
4. Vérifier que la validation du formulaire est toujours possible.
   Note : pour réactiver les javascripts de la page, cliquer sur le critère 11.7.

##### Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :

1. Dans le menu "Options IE", cliquer sur "activer/désactiver le JavaScript".
2. Vérifier que la validation du formulaire est toujours possible.

##### Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.0.2 en français) :

1. Activer l'option "Désactiver JavaScript" du menu "Désactiver".
2. Vérifier que la validation du formulaire est toujours possible.

##### Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :

Ce critère n'est pas évaluable par le lecteur d'écran Jaws.

revenir en haut de la page

### Comment mettre en oeuvre

#### Qui est concerné ?

Ce critère est implémenté par le développeur HTML.

#### Implémentation

La validation du formulaire et les tests de contrôles se feront à l'aide de scripts dans le langage de développement du site (PHP, ASP, #NET, Perl, Java, etc.)
Aucune implémentation technique pour les autres points, il faut juste réfléchir à un scénario de formulaire en prenant en compte ces contraintes.

- Lorsque la validation d'un formulaire est effectuée par l'intermédiaire de Javascript, il est important de donner une alternative équivalente à ce script pour qu'un utilisateur puisse envoyer l'ensemble des informations du formulaire vers le serveur.
- Lorsqu'un contrôle de saisie est effectué par l'intermédiaire de Javascript sur les champs du formulaire, il faut une alternative par un script serveur pour qu'un utilisateur, quel que soit son navigateur, puisse comprendre qu'il à omis un champs ou commis une erreur.
- Dans le cas d'un contrôle de saisie, il est important de spécifier les champs obligatoires de manière explicite (Exemple : les champs précédés d'une étoile sont tous obligatoires.) et mettre cette mention de préférence au début du formulaire
- Eviter de faire ressortir les champs obligatoires par le seul intermédiaire d'une couleur par exemple.
- En cas d'erreur de saisie, ne pas effacer les champs déjà remplis par l'utilisateur.

#### Exemple de mauvaise pratique

Dans l'extrait de code qui suit, une fonction javascript intégrée à la page html teste la valleur du champ d'édition. Si l'utilisateur ne le remplit pas et valide quand-même, un message d'erreur devrait s'afficher. Or, si le javascript n'est pas activé sur son poste, le message ne s'affichera jamais et l'utilisateur ne saura pas pour quelle raison sa recherche n'a pas fonctionné.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Formulaire de recherche</title>
<script type="text/javascript">
function verifForm ()
{
with (document.forms[0]) {
if ( recherche.value == "" ) {
alert("Veuillez indiquer votre critère de
recherche");
return false;
}
}
return true;
}
</script>
</head>
<body>
<form method="post" action="rechercher.php" onsubmit="return verifForm();">
<p>Texte <input type="text" name="recherche" /></p>
<p><input type="submit" name="Action" value="Valider la recherche" /></p>
</form>
</body>
</html>

#### Exemple de bonne pratique

Sans entrer dans une solution typique d'un langage de programmation ou d'une manière de coder, voici un scénario général de traitement d'erreur qui permet de rendre accessible le contrôle d'erreur :

1. Remplissage du formulaire par l'internaute.
2. Validation avec envoi au serveur des données.
3. Vérification des données transmises par le formulaire
4. Si une erreur est détectée, rechargement chez le client du formulaire avec les données qu'il a saisi. Le développeur prendra soin de transmettre également les champs posant problèmes avec les erreurs rencontrés (longueur du champ, type de données, etc...).
5. Affichage de manière pertinente des erreurs au-dessus du formulaire avec un message clair indiquant le type de l'erreur. Ce scénario peut s'appliquer aussi bien sur une plate-forme utilisant PHP que ASP.

revenir en haut de la page

### Illustrations

Cette copie d'écran sous le navigateur Firefox présente un formulaire avec un champs "Texte" vide et un bouton "Valider la recherche".
On a appuyé sur le bouton de soumission et on voit apparaitre un message dans une fenêtre Javascript précisant qu'il faut indiquer le critère de recherche. En cas de désactivation du Javascript, le message d'erreur n'apparait plus.

Cette copie d'écran présente le résultat de validation d'un formulaire, sous le navigateur Firefox, lorsque les javascripts sont désactivés. Un message d'erreur apparait au-dessus du formulaire contenant un champs "Texte" vide et un bouton "Valider la recherche".
Le message précise directement dans la page à l'internaute qu'il doit indiquer son critère de recherche. Il est également inclus dans une balise `FIELDSET` nommé erreur et apparait en rouge afin de le différencier clairement du reste du formulaire.

revenir en haut de la page

### Références

#### Autres fiches à consulter

- Fiche 7.1 : Si un script nécessite une alternative pour être accessible, l'information donnée par cette alternative est-elle équivalente à l'information fournie par le script ?

#### Autres ressources

- Web Content Accessibility Curriculum (section 1.1) : a text equivalent for scripts
- Web Content Accessibility Curriculum (section 6.3, 6.4 et 6.5) : Ensure that pages are usable when scripts, ... are turned off

revenir au sommaire de la fiche

revenir en haut de la page

Guide AccessiWeb (version 2.1, 30 août 2006) | Conditions d'utilisation | Contact