retour vers le site AccessiWeb

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 ?

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

Valeur ajoutée pour le site

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.

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

Formulaire validé en Javascript

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.

Formulaire validé coté serveur

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

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 11.6 Fiche suivante : fiche 11.8

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