Tip:
Highlight text to annotate it
X
Je vais vous parler d'un problème que l'on rencontre souvent sur internet
à savoir celui des formulaires, pour cela je vais l'illustrer grâce à un exercice
où il faudra cocher des cases.
D'après le tableau Statistiques de Production
sur la période 1946 - 1974, qualifiez la croissance que connaît alors la France ?
Deux réponses sont attendues : Titre - la croissance est rapide - case à cocher, non cochée
Modérée - case à cocher, non cochée
Je fais le tour des cases à cocher pour voir les réponses qu'on me propose
Soutenue - case à cocher, non cochée
hachée - case à cocher, non cochée
Interrompue - case à cocher, non cochée
Forte - case à cocher, non cochée
Négative - case à cocher, moyenne
Case à cocher, vide
Bouton - "Vérifier" bouton
Je vais cocher les réponses "soutenue" et "forte" qui sont les bonnes réponses selon moi
et moyenne - case à cocher - négative
forte - espace - cochée - interrompu - case à cocher - hachée
case à cocher - soutenue - case à cocher - espace - cochée - case à cocher
la croissance est rapide - soutenue cochée
J'ai coché la bonne case d'après ma synthèse, je vais donc vérifier mes réponses
Bouton - vérifier bouton - "Entrée" - réponse incorrecte
Le fait qu'aucune case ne soit associée à un mot, a induit ma synthèse en erreur,
ce qui fait que j'ai coché de mauvaises cases et donc que j'ai des réponses incorrectes
alors que je suis sûre que "soutenue" "forte" étaient les bonnes réponses,
mais je n'ai donc pas coché les bonnes cases.
Dans ce cas précis, l'erreur n'est pas bien grave
mais cela peut avoir des conséquences
beaucoup plus ennuyeuses si l'on veut s'inscrire en ligne à l'université
ou commander un billet de train, on remplit un champ d'édition ou on coche une case
qui n'est pas la bonne et donc la personne non voyante peut être perturbée par cela.
Je vais vous montrer le site d'une mairie dont les formulaires sont accessibles.
Vous allez voir comment cela se passe :
Titre de niveau 3 - renseignements concernant le demandeur de l'acte
Titre : civilité astérisque - bouton radio non coché : Melle - 1 de 3
Melle : cela signifie mademoiselle
entrez - cochez votre formulaire actif - tab, tab. Edition prénom astérisque :
tapez la majuscule Tab - Edition, nom, astérisque : tapez le texte
k,r,e, m,p Tab - Edition prénom astérisque : tapez le texte i, s, a, e,
Comme vous l'avez vu, j'ai pu sans problème remplir les champs d'édition
de formulaire, avec mon nom et mon prénom, tout était clair,
je sais exactement dans quelle zone d'édition je me trouve
et je peux remplir sans problème ce formulaire.
Vous aurez compris que lorsqu'il s'agit de remplir un exercice de cours
et qu'il y a une erreur dans le formulaire ce n'est pas très grave,
mais ce genre d'erreurs peuvent être plus facheux s'il s'agit de remplir
une inscription en ligne pour l'université ou de commander un billet
de train ou d'avion, par exemple. Donc les formulaires sont très importants
et il est vraiment nécessaire qu'ils soient clairs et limpides pour que nous
puissions les remplir sans souci.
Comme ce petit film a pu l'illustrer, un formulaire peut être accessible
aux personnes utilisant des aides techniques spécifiques pour accéder au web.
Il s'agira pour le développeur de se conformer à quelques recommandations.
Dans le cas d'un formulaire en HTML, la balise label associée aux attributs id et for
permet de relier directement le champ de saisie au texte qui lui est associé.
Ainsi, lorsqu'une synthèse vocale sera utilisée en mode formulaire,
elle établira très précisément le lien entre le champ à renseigner
et les informations situées avant ou après celui-ci.
Pour faciliter l'accès au formulaire, il est par ailleurs, recommandé de regrouper
les champs de saisie de même nature au moyen de la balise fieldset.
Associée à la balise fieldset, la balise legend permettra de donner un titre
à chaque bloc d'information et ainsi en faciliter le repérage.
Le parcours au clavier entre les différents champs doit être logique.
Si l'ordre de navigation au clavier ne correspond pas à l'ordre du code source,
il convient d'utiliser l'attribut tabindex et d'y ajouter un ordre de tabulation.
Dans cet exemple, quel que soit l'ordre du code source, la tabulation s'effectuera selon l'ordre :
Votre nom
Société
Votre e-mail
Votre site
Votre adresse.
Lorsque dans un formulaire, la saisie de champ est rendue obligatoire,
il est important de le spécifier de manière explicite.
Expliquer que les champs précédés d'une étoile sont tous obligatoires,
semble être l'une des façons les plus efficaces de le faire.
Recourir à une couleur ou préciser en fin de formulaire quels sont les champs obligatoires
sont des techniques à proscrire car elles ne satisferaient pas l'ensemble des utilisateurs.
La validation est la dernière étape du remplissage d'un formulaire.
Le bouton de validation doit être clairement identifié, notamment lorsqu'il s'agit d'une image.
Il faudra alors commenter cette image par un texte explicite du type envoyer.