Accessibilité du Web : Des formulaires accessibles

Durée = 5:40 min Niveau = débutant / expert Handicap concerné = visuel

Description

Un formulaire peut être accessible aux personnes utilisant des aides techniques pour accéder au Web. Il s’agira pour le développeur de se conformer à quelques recommandations. Isabelle nous explique dans ce petit film les difficultés qu’elle rencontre avec un formulaire non accessible…

Tutoriel vidéo

Traduction espagnole réalisée par Lucas Bride Traduction chinoise réalisée par Lianhui Zhou Traduction anglaise réalisée par Ruth Woodrow

 

Contribuez à la traduction

Contribuez à la diffusion de cette vidéo pédagogique à l’international en traduisant les sous titres de cette vidéo :

  1. Téléchargez le fichier sous titres français, espagnol, chinois ou anglais au format SRT
  2. Envoyez par email le fichier sous titres au format SRT traduit à l’équipe Access-Key

 

Sous titres

Voici les sous titres en version texte de la vidéo pédagogique sur les images-liens (notez que le texte en italique correspond à la voix de la synthèse vocale utilisée par Isabelle):

Isabelle: démonstration d’un formulaire non accessible

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 et 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.

Isabelle: démonstration d’un formulaire accessible

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.

Tutoriel: créer un formulaire accessible

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.

Logo de l'Université Nice Sophia Antipolis  Logo de l'Université de Haute Alsace    Logo de la Fondation Orange