Étiquettes de champs

Silktide vérifie que chaque champ de formulaire et bouton de vos pages possède un nom que les logiciels peuvent lire. Les personnes qui ne peuvent pas voir le formulaire s'appuient sur ces noms pour savoir ce qui est demandé dans chaque champ.

Un visiteur voyant détermine la signification d'un champ grâce au texte situé à proximité. Cette association visuelle n'a aucune signification dans le code : le nom doit être associé au champ lui-même, le plus souvent à l'aide d'un élément <label> en .

<!-- Problème : le texte ressemble à une étiquette, mais n'est pas associé au champ -->
<p>Nom complet</p>
<input type="text">

Pourquoi est-ce important ?

Un annonce chaque champ par son lorsque le visiteur parcourt un formulaire. Un champ sans nom est annoncé simplement comme « zone d'édition » : le visiteur doit deviner quoi saisir à partir du contexte, et cela devient rapidement impossible dans un formulaire plus long. Les champs sans étiquette sont l'une des raisons les plus fréquentes pour lesquelles un formulaire ne peut pas être rempli sans la vue, ce qui entraîne des pertes d'inscriptions, de commandes et de demandes.

Comment corriger le problème

Associez un <label> à chaque champ, soit en le liant par son ID, soit en l'entourant :

<!-- Lié par ID -->
<label for="name">Nom complet</label>
<input type="text" id="name">

<!-- Ou en entourant le champ -->
<label>Nom complet <input type="text"></label>

Les boutons se nomment eux-mêmes grâce à leur texte ou à leur value : aucun élément d'étiquette n'est nécessaire :

<button>Envoyer le message</button>
<input type="submit" value="Envoyer le message">

Lorsqu'une étiquette visible n'est pas pratique, utilisez un attribut tel que aria-label ou aria-labelledby. Notez que cela aide uniquement les : les visiteurs voyants ne le verront pas.

Ne vous fiez pas au texte placeholder comme étiquette : il disparaît dès que le visiteur commence à saisir du texte et n'est pas systématiquement considéré comme un nom.

Comment Silktide effectue cette vérification

Recherchez les contrôles de formulaire sur chaque page : champs de saisie, zones de texte, listes déroulantes et boutons, ainsi que les éléments auxquels un rôle de contrôle de formulaire est attribué avec ARIA (par exemple role="button" ou role="checkbox").
Ignorez les contrôles qui n'ont pas besoin de nom : champs de saisie masqués, champs injectés par des widgets tiers connus (tels que les services , ou les formulaires masqués que les scripts de suivi et de traduction ajoutent pour leur propre usage), et éléments dont le rôle ARIA ne nécessite pas d'étiquette.
Déterminez le nom accessible de chaque contrôle à partir de son étiquette, de ses attributs ARIA, du texte du bouton ou de sa valeur.
Signalez chaque contrôle dont le nom accessible est vide.

Résolution des problèmes

Le champ comporte du texte à côté

Le texte à proximité ne nomme pas un champ, sauf s'il est connecté dans le code : utilisez un <label> avec un attribut for, ou entourez le champ avec l'étiquette.

Le champ est décoratif ou géré par un plugin

Les champs injectés par des widgets que vous ne contrôlez pas peuvent être difficiles à corriger directement. Vérifiez si le plugin propose un paramètre d'accessibilité ou une mise à jour ; si le champ n'a réellement aucune incidence sur les visiteurs, vous pouvez le résultat.