Signaler les champs obligatoires

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.

À 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

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.

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.