Instructions de formulaire

Silktide repère les champs de formulaire qui pourraient nécessiter une explication, comme les champs de texte libre, et vous demande de déterminer si chacun d’eux a besoin d’instructions décrivant ce qu’il faut saisir. Les champs qui nécessitent des instructions doivent y être associés dans le code, et pas seulement placés à proximité.

Pourquoi est-ce important?

Une étiquette seule n’est souvent pas suffisante. « Date » ne vous indique rien sur le format attendu, qui varie selon le pays; « Référence » ne précise pas lequel de vos trois numéros de référence est requis. Les visiteurs qui devinent mal reçoivent un message d’erreur — ou pire, leur soumission est acceptée avec de mauvaises données.

Associer l’instruction dans le code est tout aussi important que de la rédiger : un indice simplement placé visuellement près du champ est invisible pour un utilisateur de dont le focus est sur le champ de saisie.

Comment corriger le problème

Pour chaque champ signalé, déterminez si un visiteur pourrait ne pas savoir quoi saisir. Si c’est le cas :

Ajoutez une description et associez-la au champ à l’aide de l’attribut aria-describedby :

<!-- L’indice est annoncé lorsque le champ reçoit le focus -->
<label for="date">Date</label>
<input type="text" id="date" aria-describedby="date-hint">
<p id="date-hint">Format : jour/mois/année, p. ex. 28/07/2026</p>

Vous pouvez aussi utiliser plutôt un type de champ conçu à cette fin. <input type="date"> offre aux visiteurs un sélecteur de date dans leur propre langue, sans qu’aucune explication soit nécessaire — privilégiez cette option lorsqu’un type approprié existe.

Si le champ se comprend de lui-même — une boîte « Rechercher » ou un champ « Message » dans un formulaire de contact — aucune instruction n’est nécessaire; le résultat.

Comment Silktide effectue cette vérification

Repérez les contrôles de formulaire pour lesquels des instructions pourraient être utiles : les éléments <textarea> et les champs <input> de type text, email, file, number, password ou range. Les boutons, les cases à cocher, les boutons radio et les menus déroulants sont ignorés, car une étiquette suffit normalement dans ces cas.
Ignorez les champs qui ne sont pas visibles pour les utilisateurs voyants, ainsi que les champs injectés par des widgets tiers connus, tels que les formulaires masqués que les scripts de suivi et de traduction ajoutent pour leur propre usage.
Ignorez les champs auxquels une description est déjà associée — un attribut aria-describedby pointant vers du texte réel non vide, ou un attribut aria-description non vide.
Signalez chaque champ restant pour examen : une personne détermine s’il nécessite réellement des instructions.

Résolution de problèmes

Mon champ comporte un indice juste en dessous

La proximité visuelle n’est pas une association. À moins que l’indice ne soit associé au champ avec aria-describedby (ou aria-description), les ne l’annoncent pas, et Silktide signale le champ. L’ajout de l’attribut résout les deux problèmes.