Aide à saisir correctement et à corriger les erreurs directement dans le champ d'information.
Progression de la vérification
Comparer les informations et la présentation dans le contexte d'utilisation.
Essayez l'opération, modifiez le statut et continuez à travailler.
Essayez des scénarios spécifiques lorsque vous démarrez, modifiez et terminez des tâches.
La progression est enregistrée automatiquement dans ce navigateur.
GUIDE
Soumettez le formulaire avec une cellule manquante, puis modifiez-le à l'aide du clavier. Gardez l'étiquette visible, décrivez la demande avant de la saisir et placez l'erreur suffisamment près pour savoir exactement quels champs doivent être corrigés.
EXEMPLES
La case intitulée « Email » et l'erreur « Enter email as name@vidu.com » ; Le contenu qui vient d'être saisi est conservé pour que l'utilisateur puisse modifier un caractère.
Le contour distingue la zone de saisie du fond et garde le contenu et le curseur visibles dans les deux thèmes.
Testez le focus, le remplissage automatique et l’agrandissement du texte ; le contour ne doit ni masquer le texte ni provoquer un changement de taille.
Exemple Le contour du champ e-mail devient plus marqué au focus, sans modifier la hauteur de la ligne.
Le libellé reste visible après la saisie ; l’aide précise le format ou les conditions à connaître.
Saisissez des données, puis relisez le nom du champ avec un lecteur d’écran ; le libellé et l’aide doivent rester correctement associés.
Exemple Le libellé « Code de commande » est suivi de l’aide « Exemple : DZ-2048 ».
Distinguez les icônes illustratives des actions comme afficher le mot de passe ou effacer la recherche.
Parcourez le champ et ses boutons secondaires avec Tab ; chaque action doit avoir un nom clair et ne pas supprimer de données involontairement.
Exemple La loupe est décorative ; le bouton Effacer la recherche reçoit le focus et possède un libellé.
Définissez les états vide, rempli, avec focus, en lecture seule, désactivé et en erreur selon des règles cohérentes.
Passez d’une erreur à une nouvelle saisie ; l’erreur doit se mettre à jour au bon moment, sans perte de données.
Exemple Le code de vérification en lecture seule reste copiable ; le champ affiche un état d’attente pendant l’envoi.
Adaptez la taille du champ à la densité de l’interface, tout en gardant le texte lisible et la zone tactile facile à utiliser.
Utilisez des champs compacts dans les tableaux et plus grands sur mobile ; le texte ne doit pas être coupé verticalement.
Exemple Le tableau d’administration utilise un filtre compact ; l’écran de connexion propose un champ plus haut.
Utilisez plusieurs lignes uniquement lorsque le contenu nécessite des retours à la ligne, avec un défilement et des limites clairement définis.
Collez un long paragraphe et ouvrez le clavier ; le point de saisie et le bouton Envoyer doivent rester visibles.
Exemple Le champ de commentaire grandit avec son contenu jusqu’à une limite, puis le défilement se fait à l’intérieur du champ.
