Construire des formulaires accessibles en identifiant correctement les champs.

Ce que j’ai fait :

• lire l’article Formulaires(lien externe) du Guide de l’intégrateur
• lire l’article Formulaires(lien externe) du Guide du concepteur
• lire l’article Rendre accessible les champs de formulaire(lien externe) d’Orange
• lire l’article Placeholder, l’attribut maudit(lien externe) de Laurent Denis
• lire l’article Placeholder et accessibilité(lien externe) du blog d’Atalan

Ce que j’ai appris

Les formulaires, un élément incontournable du web

Les formulaires sont, à mon sens, un des éléments les plus complexes à mettre en oeuvre sur un site web. Qui ne s’est pas déjà retrouvé en difficulté à remplir un formulaire ? :

• Dois-je indiquer mon nom et mon prénom sur ce champ, ou juste mon nom ?

• Dans quel format dois-je donner cette date ?

• Pourquoi ma validation ne marche pas ? J’ai beau cliquer sur le bouton, il ne se passe rien !

Nous avons tous et toutes déjà vécu ces situations et elles sont d’autant plus frustrantes que les formulaires sont généralement indispensables pour effecter des actions telles que faire un achat, compléter les informations d’un profil ou encore contacter un service. L’enjeu d’accessibilité de ces formulaires est donc extrêmement important : tout le monde doit pouvoir accéder aux mêmes informations et réaliser les actions souhaitées.

L’identification des champs

Les lecteurs d’écran permettent, grâce à des raccourcis clavier, de naviguer de champ en champ, et les outils de synthèse vocale proposent d’accéder aux différents champs par leur nom. Associer un champ de formulaire à une étiquette - c’est à dire un intitulé - est donc indispensable pour indiquer clairement à l’internaute le nom du champ sur lequel il ou elle se trouve et lui permettre de remplir au mieux le formulaire.

L’étiquette de champ permet d’indiquer à l’internaute quelle donnée est attendue pour remplir le champ (un nom, une date, une adresse…). Pour être valide, une étiquette doit :

• être pertinente

• être correctement reliée à son champ

• être visuellement accolée au champ

Renseigner une étiquette pertinente

L’étiquette permet de faciliter la compréhension des données attendues dans un formulaire. Elle explicite le rôle d’un champ, ainsi que la nature des données attendues :

• le type de données (un nom, une date, une adresse…)

• le format des données (une date au format jour/mois/année)

• le poids ou le format d’un fichier

Il n’est pas nécessaire d’écrire de grandes phrases, mieux vaut rester concis afin que l’internaute comprenne au mieux ce qu’on attend de lui ou d’elle. Par exemple :

• Nom

• Prénom

• Téléphone (ex : +33612345678)

Il est important de prévoir des étiquettes identiques pour les champs présents plusieurs fois dans la page et dont la fonction est identique. Par exemple, sur un site de voyage, les étiquettes Ville de départ et Ville d'arrivée doivent être les mêmes sur le formulaire de voyage par train et le formulaire de voyage par avion.

Relier correctement l’étiquette à son champ

Plusieurs techniques permettent de relier une étiquette à son champ.

Labelliser avec la balise <label> et les attributs for et id

Le première méthode à privilégier est la relation HTML (HyperText Markup Language) entre un champ et son étiquette grâce à la balise <label> et aux attributs for et id. Un label est dit “explicite” lorsqu’il possède un attribut “for” dont la valeur correspond à la valeur de l’attribut “id” du champ qui lui est associé, comme c’est le cas avec l’exemple suivant :

<label for="prenom">Prénom</label>
<input type="text" id="prenom" />

Un label est dit “implicite” lorsqu’il inclut directement le champ en tant qu’élément enfant. Par exemple :

<label>
  Prénom
  <input type="text" />
</label>

Néanmoins, ce type de code peut poser des problèmes de restitution par les technologies d’assistance. Mieux vaut donc préciser la relation grâce aux attributs for et id.

<label for="prenom">
  Prénom
  <input type="text" id="prenom" />
</label>

Ce type de labellisation permet à tous les utilisateurs et utilisatrices d’accéder au même niveau d’information et il facilite la manipulation en agrandissant la surface de clic du champ (en cliquant sur l’étiquette, le curseur se place automatiquement dans le champ).

Labelliser avec l’attribut title

On peut également renseigner le libellé d’un champ grâce à l’attribut title. Par exemple :

<input type="text" id="prenom" title="Prénom" />

Toutefois, comme nous l’avons déjà vu, l’attribut title n’étant disponible qu’au survol de la souris, il n’apparaîtra pas dans le cas d’une navigation au clavier ou sur mobile. Son implémentation est donc, dans la mesure du possible, à éviter.

Labelliser avec ARIA (Accessible Rich Internet Applications)

Recourir à l’attribut <label> est parfaitement approprié pour labelliser des formulaires, cependant de nombreux formulaires sont implémentés sous la forme de composants Javascript dynamiques utilisant des éléments <div> ou <p>. La spécification ARIA permet alors d’associer un composant à un autre et de créer une étiquette conforme. Par exemple :

<p id="prenom">Votre prénom</p>
<input type="text" aria-labelledby="prenom" />

Cependant, ce type d’implémentation ne fournira une indication de labellisation qu’aux technologies d’assistance, et pas à tous les internautes. D’autre part, l’attribut aria-labelledby remplace toute autre relation existante : à cause de la priorité de restitution, les étiquettes réalisées avec une balise <label> ou un attribut aria-label ou title seront ignorées. Voici un exemple tiré de l’article Formulaires(lien externe) du Guide de l’intégrateur :

<label for="jfname">Votre nom de jeune fille</label>
<input id="jfname" type="text" aria-labelledby="name" />
<p id="name">Votre nom</p>

Ici, le lecteur d’écran restituera l’étiquette Votre nom, l’étiquette Votre nom de jeune fille sera ignorée.

Accoler visuellement l’étiquette à son champ

Il est important d’accoler visuellement l’étiquette au champ associé, afin que l’internaute puisse facilement faire le lien entre les deux.

Cette recommandation est particulièrement importante pour les internautes se servant d’une loupe d’écran ou du zoom : si une étiquette est trop éloignée de son champ, l’internaute la perdra de vue et ne saura pas quel champ il ou elle remplit.

En général, on positionne l’étiquette juste au-dessus du champ, à gauche pour les langues qui s’affichent de gauche à droite, à droite pour les langues qui s’affichent de droite à gauche. Il est aussi possible d’accoler l’étiquette juste à côté du formulaire, à condition que l’intitulé ne soit pas trop long.

Utiliser l’attribut placeholder avec parcimonie

L’attribut placeholder est fréquemment utilisé dans la conception des formulaires : considéré plus esthétique, il permet notamment d’alléger un formulaire en affichant du texte par défaut dans un champ. Ce texte s’effacera dès lors que internaute commencera à saisir du contenu dans le champ en question. Si l’utilisation du placeholder n’est pas interdite, elle est toutefois soumise à certaines conditions.

L’attribut placeholder ne doit pas être utilisé à la place d’une étiquette de champ. En effet le W3C (World Wide Web Consortium) précise bien The placeholder attribute should not be used as an alternative to a label . L’attribut placeholder ne doit pas fournir d’informations essentielles, qui doivent être données par des étiquettes disponibles en permanence. Un mauvaise utilisation du placeholder peut entraîner plusieurs problèmes :

• fournir des informations sur la nature ou la fonction du champ dans un placeholder, sans autre étiquette, peut être particulièrement frustrant pour l’internaute car ces informations disparaîtront dès lors qu’il ou elle commencera à remplir le champ

• les technologies d’assistance ne restituent pas toutes de manière uniforme cet attribut

• la couleur par défaut du placeholder n’est pas suffisamment contrastée

Le placeholder doit donc fournir uniquement des exemples de valeur ou de saisie facultatives, en complément des informations essentielles données par les étiquettes. Voici un exemple tiré de l’article Placeholder et accessibilité(lien externe) du blog d’Atalan :

<label for="sports">Votre sport préféré</label>
<input type="text" id="sports" placeholder="Football, Tennis, Rugby...">

Implémenté de cette manière, et en corrigeant son contraste pour le rendre plus accessible, le placeholder peut être utilisé dans les formulaires.

Le blog d’Atalan évoque également la technique du placeholder “simulé” consistant à superposer une balise <label> visuellement sur le champ.