Champ obligatoire : l'astérisque ne suffit pas au RGAA

L'astérisque rouge accolée à une étiquette est la convention la plus répandue du web, et l'une des plus mal implémentées. Le référentiel français y consacre deux tests distincts, et la plupart des formulaires que nous voyons en audit échouent sur le second sans s'en douter.

Le sujet paraît mineur. Il ne l'est pas : un champ dont on ignore qu'il est requis produit une soumission rejetée, donc un message d'erreur, donc un parcours d'erreur à gérer. Le traiter en amont évite tout ce qui suit.

Ce que le RGAA demande exactement

Deux tests du critère 11.10 encadrent le sujet, et il faut les lire dans l'ordre.

Le test 11.10.1 porte sur l'indication elle-même : elle doit être visible et permettre d'identifier nommément les champs obligatoires. Le mot « nommément » est celui qui compte : il ne suffit pas de signaler qu'il existe des champs obligatoires, il faut pouvoir dire lesquels.

Le test 11.10.2 vise les champs qui portent déjà required ou aria-required="true". Il exige que l'indication visible soit située dans l'étiquette associée au champ, ou à défaut qu'elle satisfasse une autre des conditions prévues. Autrement dit : porter l'attribut ne dispense de rien, cela ajoute une exigence de placement.

Pourquoi l'astérisque seule échoue

Le motif d'échec le plus fréquent n'est pas l'absence d'astérisque, c'est l'absence ou le mauvais placement de sa légende.

<!-- Échoue : l'astérisque n'est expliquée nulle part -->
<label for="email">Adresse électronique *</label>
<input type="email" id="email" required>

Une astérisque est un symbole conventionnel, pas une information. Un lecteur d'écran l'annonce « étoile » ou l'ignore selon sa configuration et le niveau de ponctuation choisi par l'utilisateur. Pour qui découvre le formulaire, elle ne signifie rien tant qu'on ne le lui a pas dit.

Le second motif d'échec est plus subtil et très répandu : la légende existe, mais elle est placée sous le formulaire, avec les mentions légales. La personne qui parcourt la page linéairement rencontre alors une dizaine d'astérisques avant d'apprendre à quoi elles servent.

Les trois implémentations qui passent

La plus robuste : le mot dans l'étiquette.

<label for="email">Adresse électronique (obligatoire)</label>
<input type="email" id="email" required>

Rien à interpréter, rien à expliquer ailleurs, aucune dépendance à l'ordre de lecture. C'est aussi la forme qui résiste le mieux aux refontes, puisque l'information vit dans l'étiquette et non dans un texte séparé.

L'astérisque avec sa légende, placée avant.

<p>Les champs suivis d'un astérisque (*) sont obligatoires.</p>
<form>
  <label for="nom">Nom *</label>
  <input type="text" id="nom" required>
</form>

Acceptable, à condition que la légende précède réellement le formulaire dans le code, et pas seulement à l'écran.

L'inversion, quand presque tout est requis. Si un formulaire ne comporte qu'un ou deux champs facultatifs, marquer ceux-là plutôt que les autres allège considérablement la lecture. L'étiquette devient « Complément d'adresse (facultatif) », et l'astérisque disparaît du formulaire.

L'attribut n'est pas l'indication

C'est la confusion à lever, parce qu'elle donne un faux sentiment de conformité.

Un formulaire qui ne porte que required est correctement restitué au lecteur d'écran et muet pour tout le monde d'autre, y compris pour une personne malvoyante qui zoome sans utiliser de synthèse vocale. L'inverse, une indication visible sans attribut, laisse l'information hors de portée des technologies d'assistance. Les deux sont nécessaires.

Et si le champ est finalement vide ?

Le sujet bascule alors sur le test 11.10.3, qui traite le message d'erreur signalant l'absence de saisie : il doit être visible et permettre d'identifier nommément le champ concerné. Un « veuillez remplir tous les champs obligatoires » en tête de formulaire ne remplit pas cette condition.

Le rattachement du message au champ relève ensuite d'aria-describedby et d'aria-invalid, traités dans notre article sur les messages d'erreur accessibles.

Conclusion

Le marquage des champs obligatoires est un cas d'école de critère qu'on croit satisfait parce qu'on voit quelque chose à l'écran. La vérification tient en deux questions : cette indication permet-elle de savoir quels champs sont concernés, et l'utilisateur la rencontre-t-il avant les champs plutôt qu'après ?

Analysez un formulaire de votre site : l'absence d'étiquette et les attributs manquants ressortent automatiquement. Le placement de la légende, lui, se juge en parcourant la page dans l'ordre du code.