À propos des Marques Obligatoires dans les Formulaires de Saisie

Mon, 14 Jul 2025 13:47:51 +0900

Nous avons résumé les informations concernant la marque “obligatoire” sur les interfaces utilisateur (formulaires) à l’étranger, accompagnées de documents de directives UI.

📌 Principales Marques Obligatoires et Meilleures Pratiques

Utilisation de l’Astérisque (*)
- C’est généralement la méthode la plus répandue ; on ajoute “*” aux champs obligatoires.
- Cependant, une explication telle que " * indique un champ obligatoire" au début du formulaire est indispensable (Nielsen Norman Group, California State University, Northridge).
- Il y a aussi des exemples utilisant la couleur pour souligner (comme du texte en rouge).
Indiquer “Required” ou “(required)” dans l’étiquette
- En ajoutant le texte “Required” dans l’étiquette, on peut l’indiquer clairement aux lecteurs d’écran, ce qui améliore l’accessibilité (Deque).
Utilisation combinée des attributs ARIA et de l’attribut HTML5 required
- En plus de l’affichage visuel, l’utilisation de aria-required="true" et <input required> permet d’indiquer l’obligation de manière programmatique (Deque).
Utiliser “(optional)” pour indiquer les champs facultatifs
- Il y a aussi la méthode qui consiste à marquer explicitement les champs facultatifs par “(optional)” au lieu de marquer les obligatoires, ce qui est efficace lorsqu’il y a un mélange.
- Toutefois, Nielsen-Norman souligne qu’il “est plus facile de juger si les champs obligatoires sont également spécifiés” (TPGi).

✅ Résumé des Documents de Directives UI

Source	Contenu
NN/g: Marking Required Fields in Forms	La combinaison de l’astérisque et du texte d’explication est recommandée ; afficher uniquement les champs facultatifs est considéré comme peu convivial (Nielsen Norman Group).
Deque (Anatomy of Accessible Forms)	・Utilise la chaîne “Required” ou une image au sein de l’étiquette. ・Il est clairement stipulé que l’indication par la couleur seule est insuffisante.
W3C Techniques (H90)	Il y a des exemples d’inclusion d’un astérisque ou de “(required)” dans l’étiquette et de la définition de sa signification au début du formulaire.
TPGi (Doing what’s required)	Compte tenu de l’accessibilité, la combinaison astérisque + attributs ARIA + texte dans l’étiquette est évaluée comme optimale.
Guide UX des Formulaires Contensis	Organisé de manière concise : un marquage cohérent (* ou (optional)) est important.

✅ Approches Recommandées pour l’Implémentation

Ajouter un texte d’explication au début du formulaire :

Fields marked with * are required. (Ou “All fields are required” pour tous, ou “unless marked optional” s’il y a des champs facultatifs)
Attribution d’Étiquette :
- Écrit comme First Name * ou Email (required).

Attributs ARIA et Attributs HTML5 :

1
2


<label for="email">Email <abbr title="required">*</abbr></label>
<input id="email" required aria-required="true">

Ne vous fiez pas uniquement à la couleur : Assurez une compatibilité à la fois visuelle et programmatique.

🔗 Liens de Référence (Documents de Directives UI)

NN/g: Marking Required Fields in Forms (California State University, Northridge, Nielsen Norman Group, Deque)
Deque: Anatomy of Accessible Forms (Deque)
W3C Techniques: H90 Indicating required form controls (W3C)
TPGi: Indicating mandatory fields accessibly (TPGi)
Contensis: UX Forms Guidelines (Contensis)

Si nécessaire, je peux également fournir des exemples spécifiques de code HTML/CSS, ou des modèles de conception de composants UI pour Sketch et Figma. N’hésitez pas à demander !

Développement Web on kenji.blog

À propos des Marques Obligatoires dans les Formulaires de Saisie

📌 Principales Marques Obligatoires et Meilleures Pratiques

✅ Résumé des Documents de Directives UI

✅ Approches Recommandées pour l’Implémentation

🔗 Liens de Référence (Documents de Directives UI)