Signaler les champs obligatoires

19 octobre 2018,
par Romy Têtue

Mots-clefs associés à cet article :

Comment bien signaler les champs de saisie obligatoire ? Avec l’astérisque conventionnelle, mais attention : c’est moins simple qu’il n’y paraît ! Voyons cela pas à pas…

Baliser les champs obligatoires comme tels

Cela se fait très simplement avec l’attribut HTML5 dédié, required, qui s’utilise comme suit :

<input id="x" name="x" required>

Cet attribut suffit : il n’est pas nécessaire de le doubler (d’une propriété ARIA ni autre). En effet, il engage une gestion des erreurs par le navigateur et est restitué par les lecteurs d’écran, ce qui facilite la vie de tout le monde, youpi ! Il doit cependant, puisqu’il n’est visuellement pas décelable, être complété d’une signalétique visuelle, afin de faciliter le repérage des champs obligatoires.

champ-obligatoire.png

À défaut, pour les versions antérieures de HTML, ou dans certains cas particuliers, l’on pourra utiliser la propriété ARIA aria-required [1]. La suite de cet article se contente de l’attribut required.

Signaler visuellement les champs obligatoires

Comme on ne s’adresse pas qu’aux machines, mais aux humains avant tout, il faut rendre ces champs visibles, explicitement, pour permettre leur identification avant la saisie.

Une indication purement formelle, via un filet de couleur, par exemple, n’est pas suffisante. Ce ne sera pas perçu de tous les utilisateurices, en plus de n’être pas follement explicite.

Mention textuelle explicite

Le plus simple et robuste est de le mentionner textuellement. Cette mention doit être placée DANS le label, comme suit :

<label for="x">Bla bla (obligatoire)</label>

À défaut d’être placée dans le label, elle pourra être liée au champ par une propriété ARIA [2].

L’astérisque conventionnelle

Pour des raisons esthétiques, la mention textuelle est souvent remplacée par un symbole, l’astérisque. Et c’est là que tout se complique ;)

1. Expliciter l’astérisque

Bien que devenu conventionnel, l’astérisque doit être explicité. Cela se fait idéalement avec la balise HTML <abbr>, toujours dans le label, comme suit :

<label>Bla bla <abbr title="(obligatoire)">*</abbr></label>

Dans le cas où l’astérisque est un fichier graphique, il est explicité par l’attribut HTML alt, comme suit :

<label>Bla bla <img src="..." alt="(obligatoire)"></label>

2. Légender le symbole

Tout symbole se doit d’être légendé. En particulier, placé après un mot, l’astérisque indique traditionnellement un renvoi vers une note en bas de page. Pour éviter toute confusion, une légende s’impose.

Cette légende se place AVANT le formulaire, pas après : ce n’est pas à la fin, après sa saisie, quand il est trop tard, que l’utilisateurice doit découvrir ce que cela signifie !

Afin que la restitution vocale soit identique, dans la légende comme au sein du formulaire, la légende doit utiliser exactement le même segment de code. Par exemple :

<p>Les champs avec <abbr title="(obligatoire)" aria-hidden="true">*</abbr> sont obligatoires.</p>

Évitez donc les formulations parlant d’« étoile » ou d’« astérisque », évitez l’article avant le symbole — et ce d’autant plus que les synthèses vocalisent différemment, certaines disant « astérisque » (n.m), d’autres « étoile » (n.f) ou encore « star »… Évitez aussi les formulations évoquant la position visuelle, telles que « avant le champ » ou « les champs commençant par… », celle-ci pouvant varier selon d’outil de consultation.

3. Mettre en avant

Le caractère obligatoire du dernier champ de ce formulaire passe inaperçu, (...)

Placé en fin de label, l’astérisque risque de passer inaperçu, en particulier sur les labels longs des formulaires verticaux ferrés à gauche. Pour le rendre plus visible, il est bienvenu de le décaler devant le label, en débord dans la marge gauche. Dès lors, plus de confusion possible avec une note de bas de page et impossible de le louper. Better UX !

Cela se fait via CSS, sans modifier le HTML, c’est-à-dire sans déplacer la mention au début du <label> bien que ce soit tentant. Utiliser le pseudo-elément CSS ::before est alléchant, mais à éviter, car cela le place dans la couche cosmétique, privant les utilisateurices naviguant sans CSS de cette information. L’astérisque doit rester dans la page HTML. Il est ensuite repositionné via CSS, par exemple :

label abbr {
  position: absolute;
  left: -1em;
  color: red;
}

Éviter la double vocalisation

L’information du caractère obligatoire du champ étant déjà transmise par l’attribut required, une bonne pratique d’accessibilité consiste à masquer la mention « obligatoire » par la propriété ARIA aria-hidden afin qu’elle ne soit pas restituée par les lecteurs d’écran de façon redondante :

<label for="x">Bla bla <span aria-hidden="true">(obligatoire)</span></label>

De même avec l’astérisque :

<abbr title="(obligatoire)" aria-hidden="true">*</abbr>

sans oublier la légende, qui devient consécutivement inutile en restitution vocale, donc également silenciée :

<p aria-hidden="true">Les champs avec <abbr title="(obligatoire)">*</abbr> sont obligatoires.</p>

Préserver la constance

Notez qu’il est possible de faire l’inverse : ne signaler que les champs facultatifs, notamment lorsqu’ils constituent l’exception dans un formulaire. Dans ce cas, le formulaire sera précédé d’une indication de ce type : « Sauf indication contraire, tous les champs sont obligatoires. » sans qu’il ne soit plus nécessaire de signaler les champs individuellement [2].

Quelque soit le choix que vous faites, appliquez-le de façon constante sur les différents écrans de l’interface.

N’oubliez pas que les petits formulaires sont également concernés, même le formulaire de login, oui ! Ainsi, si vous faites le choix de l’astérisque, qui doit être légendé, n’oubliez pas de l’ajouter sur le formulaire de login, si petit et léger soit-il.

Exemple de formulaire de login (sur Service-public.fr).

Seuls les formulaires à un seul champ de saisie, tels que le champ de recherche ou d’inscription à une newsletter, par exemple, en sont dispensés, l’unicité de champ rendant superflue l’explicitation de son caractère obligatoire, considéré comme évident dans ce cas.

{#TITRE,#URL_ARTICLE,#INTRODUCTION}

Vos commentaires

  • Le 20 octobre 2018 à 19:09, par nicod_ En réponse à : Signaler les champs obligatoires

    Merci Romy pour ce rappel.
    #todo pour SPIP :)

    De mon côté, je n’avais jamais vu l’ajout de aria-hidden pour éviter la double vocalisation, mais je te fais confiance sur ce point là.

  • Le 22 octobre 2018 à 06:42, par Romy Têtue En réponse à : Signaler les champs obligatoires

    Le plus important est de bien signaler les champs obligatoires, pour le reste (masquer avec aria-hidden="true"), ce n’est pas exigé et c’est discutable, comme le rappelle Sébastien à la suite du tuto de référence : « difficile de faire un choix, je dirai qu’il reste préférable de faire lire cette phrase ». Bref, le mieux est l’ennemi du bien ;)

    Dans SPIP, j’utilise une chaîne de langue, <:required:>, pour automatiser, comme suit :

    'required' => '<abbr title="(obligatoire)" aria-hidden="true" class="required">*</abbr>',
  • Le 22 octobre 2018 à 14:51, par Ana Maïa En réponse à : Signaler les champs obligatoires

    Merci pour l’article !

  • Le 5 décembre 2020 à 07:44, par titanstitans En réponse à : Signaler les champs obligatoires

    Merci c’est incroyable sa m’aide beaucoup mais je voulais quand même savoir est-ce que sa marche aussi avec bootstrap ect....

  • Le 22 juillet 2021 à 13:01, par Alex En réponse à : Signaler les champs obligatoires

    Bonjour, pourquoi rouge svp ? Je me pose la question de la couleu de l’asterisque en terme d’accessibilité. En rouge cela apparait comme si l’utilisateur avait fait une erreur. peut etre trop restricif ?
    Cordialement

  • Le 22 juillet 2021 à 13:14, par Romy Têtue En réponse à : Signaler les champs obligatoires

    Tant que le contraste (entre l’astérisque et son fond) est suffisant, peu importe. Le rouge est ici, comme l’astérisque, devenu conventionnel. C’est assez efficace pour attirer l’attention. Mais d’autres signalétiques visuelles sont possibles.

  • Le 22 juillet 2021 à 15:15, par Alex En réponse à : Signaler les champs obligatoires

    Entendu, merci.
    Je peux donc respecter mon accessibilié en écrivant l’asterisque dans la même couleur que mon champ de formulaire.

    Je note que je le placerai avant, et non après le texte par défaut.
    Merci !

Répondre à cet article

forum message

Raccourcis : {{gras}} {italique} -liste [bla->url] <q> <quote> <code>.

Qui êtes-vous ? (optionnel)

Suivre les commentaires : RSS 2.0 | Atom