Formulaires accessibles

par | Déc 6, 2016

Ce petit article se propose de vous donner quelques éléments pour créer un formulaire accessible à partir des exemples d’un champ de type texte et des boutons radio.

Qu’est-ce que l’accessibilité web ?

La notion d’accessibilité en informatique concerne les utilisateurs non voyants (ou mal voyants). Ceux-ci sont également utilisateurs de l’outil informatique et pour accéder au contenu se servent d’outils servant d’intermédiaire. Le plus fréquent est le lecteur d’écran : un logiciel qui se charge d’oraliser ce qui se trouve à l’écran. Parmi les plus utilisés on retrouve Jaws ou NVDA.

Il faut toutefois se méfier de l’appellation : contrairement à ce que pourrait laisser penser leur nom ces logiciels ne lisent pas réellement ce qui se trouve à l’écran. Dans le cas qui nous intéresse ici, à savoir une page web, le logiciel va lire le code source html de la page et créer un arbre à partir de la structure de la page (le DOM). Ceci permettra ensuite à l’utilisateur de naviguer dans cette page comme il le souhaite au moyen de raccourcis clavier : par titres de même niveau, par champ de formulaire, …

Lors du remplissage d’un formulaire, l’utilisateur va passer d’un champ à l’autre en utilisant la touche TAB. Il est important qu’à tout moment il puisse savoir où il se trouve.

Un champ texte

Créer un champ texte et indiquer à l’utilisateur ce qu’il doit contenir n’est pas bien compliqué mais surtout est possible de plusieurs manières. La plus rapide est la suivante :

<p>Entrez votre nom : <input type="texte" name="nom"></p>

dont voici le résultat :

Entrez votre nom :

Pour un utilisateur voyant, il n’y a pas de problème. En revanche le lecteur d’écran, lui, ne comprend pas que « entrez votre nom » est lié champ. Si l’utilisateur navigue par champ de formulaire il entendra uniquement « input type texte » (ou quelque chose d’approchant) et n’aura aucune idée de ce qu’il faut mettre.

Ajouter un label

Pour que le lecteur d’écran puisse comprendre que « Entrez votre nom » est l’intitulé du champ texte il faut utiliser la balise html <label>. Ceci n’est toutefois pas suffisant. Il faut également préciser de quoi ceci est le label. Ceci nécessite un peu plus de travail : il faut ajouter un identifiant (unique évidemment) au champ texte puis préciser dans la balise label avec le paramètre for l’identifiant du champ concerné.

Le résultat final est donc :

<label for="champNom">Entrez votre nom : </label><input type="texte" name="nom" id="champNom">

Si le résultat à l’écran reste le même, le lecteur d’écran lui va maintenant lier le label et le champ et produira un résultat du type « input type texte entrez votre nom ».

Les boutons radio

Le principe sera toujours le même pour les autres types d’entrées de formulaire : donner un identifiant à l’entrée et la lier au label. Ainsi pour un bouton radio:

<label for="monBouton">Bouton 1</label><input type="radio" name="lebouton" id="monBouton" value="1">

Ceci permet le lier le bouton à sa valeur et l’utilisateur sais ce qu’il valide. Il reste toutefois à lier une liste de boutons à la valeur qu’ils sont censés représenter. Pour ceci, une bonne solution est d’utiliser le couple de balises <fieldset> et <legend>, cette dernière donne la légende du contenu de son élément parent de type <fieldset>. Voici un exemple :

<fieldset>

<legend>Etes vous satisfait ?</legend>

<label for="monBoutonOui">Oui</label><input type="radio" name="leboutonoui" id="monBoutonOui" value="oui">

<label for="monBoutonNon">Non</label><input type="radio" name="leboutonnon" id="monBoutonNon" value="non">

</fieldset>

Qui donne :

Etes vous satisfait ?

Autres types de champ

Les mêmes principes doivent être appliqués pour les autres types de champ : toujours lier les champs de saisie avec la description de leur contenu au moyen de <label for=id> et lorsqu’il y a des groupes d’éléments, utiliser <fieldset> et <legend>.