Étiquettes de champs

Silktide vérifie que chaque champ de formulaire et chaque bouton de vos pages possède un nom que les logiciels peuvent lire. Les personnes qui ne peuvent pas voir le formulaire dépendent de ces noms pour savoir ce que chaque champ demande.

Une personne voyante détermine la signification d’un champ à partir du texte qui se trouve à 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 c’est important

Un annonce chaque champ selon son lorsque la personne navigue dans un formulaire. Un champ sans nom est annoncé simplement comme « modifier le texte » : la personne doit deviner quoi saisir à partir du contexte, ce qui devient rapidement impossible dans un long formulaire. Les champs sans étiquette sont l’une des raisons les plus courantes pour lesquelles un formulaire ne peut pas être rempli sans la vue, ce qui entraîne des inscriptions, des commandes et des demandes de renseignements perdues.

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 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 comme aria-label ou aria-labelledby. Notez que cela aide uniquement les : les personnes voyantes ne le verront pas.

Ne vous fiez pas au texte placeholder comme étiquette : il disparaît dès que la personne commence à saisir du texte et n’est pas traité de façon uniforme comme un nom.

Comment Silktide effectue cette vérification

Repérez les contrôles de formulaire sur chaque page : les champs de saisie, zones de texte, listes déroulantes et boutons, ainsi que les éléments auxquels ARIA attribue un rôle de contrôle de formulaire (comme role="button" ou role="checkbox").
Ignorez les contrôles qui n’ont pas besoin d’un nom : les champs de saisie masqués, les champs ajoutés par des widgets tiers connus (comme les services , ou les formulaires masqués que les scripts de suivi et de traduction ajoutent pour leur propre usage), et les éléments dont le rôle ARIA n’exige 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.

Dépannage

Le champ a du texte à côté

Le texte à proximité ne donne pas de nom à un champ à moins d’être 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 une extension

Les champs ajoutés par des widgets que vous ne contrôlez pas peuvent être difficiles à corriger directement. Vérifiez si l’extension offre un paramètre d’accessibilité ou une mise à jour; si le champ n’a réellement aucune incidence sur les personnes qui visitent le site, vous pouvez le résultat.