Construire des formulaires accessibles en fournissant des aides à la saisie et en signalant les erreurs.

Ce que j’ai fait :

• lire l’article Formulaires(lien externe) du Guide de l’intégrateur
• lire l’article Formulaires(lien externe) du Guide du concepteur
• lire l’article Exemple de formulaire accessible(lien externe) d’Orange

Ce que j’ai appris

Les aides à la saisie

Parfois, certains formats spécifiques sont attendus à la saisie. Par exemple : une date de naissance au format jj/mm/aaaa, ou le poids maximal d’un fichier à envoyer. Il est important d’indiquer les formats attendus à l’internaute afin de limiter les risques d’erreur et la frustration.

Directement dans l’étiquette du champ

La solution la plus simple est d’ajouter directement ces indications dans l’étiquette du champ concerné, c’est à dire dans la balise <label>. Elles seront ainsi accessibles à tous les utilisateurs et toutes les utilisatrices. Par exemple :

<label for="date">Date de naissance (au format jj/mm/aaaa)</label>
<input id="date" type="date" />

Avec aria-describedly

Parfois, pour des raisons graphiques ou de mise en page, il n’est pas possible d’intégrer les aides à la saisie dans l’étiquette du champ. Dans ce cas, il est possible de recourir à l’attribut ARIA (Accessible Rich Internet Applications) aria-describedly. Par exemple :

<label for="date">Date de naissance</label>
<input type="date" id="date" aria-describedly="format" />
<p id='format'>Format attendu : jj/mm/aaaa</p>

Avec l’attribut title

Enfin, en dernier recours, il est possible d’utiliser l’attribut title, mais qui ne sera malheureusement pas disponible pour tous les internautes. Par exemple :

<label for="date" title="au format jj/mm/aaaa">Date de naissance</label>
<input type="date" id="date" />

Les champs obligatoires

Outre les formats spécifiques attendus, il est important d’informer l’internaute sur le caractère obligatoire ou non de certains champs. La nature obligatoire du champ peut être indiquée de différentes manières :

• directement dans l’étiquette
• dans le code du champ

Indication dans l’étiquette

Le champ obligatoire peut être signalé par un signe distinctif (un pictogramme, une image…) ou par une mention textuelle directement dans la balise <label>. Il est nécessaire de préciser au début du formulaire que le pictogramme ou l’image employée signale un champ obligatoire.

<!-- Exemple avec une mention textuelle -->
<label for="prenom">Votre prénom (champ obligatoire)</label>
<input type="text" id="prenom" />

<!-- Exemple avec un pictogramme -->
<p>Les champs obligatoires sont signalés par le symbole *</p>
<label for="prenom">Votre prénom *</label>
<input type="text" id="prenom" />

Indication dans le code

Les champs obligatoires peuvent aussi être indiqués dans le code grâce à l’attribut required ou à l’attribut ARIA aria-required. Ces attributs seront bien restitués par un lecteur d’écran. En revanche, il est nécessaire de doubler cette information d’une alternative visible pour tous les internautes.

<!-- Exemple avec `required` -->
<p>Les champs obligatoires sont signalés par le symbole *</p>
<label for="prenom">Votre prénom *</label>
<input type="text" id="prenom" required />

<!-- Exemple avec `aria-required` -->
<p>Les champs obligatoires sont signalés par le symbole *</p>
<label for="prenom">Votre prénom *</label>
<input type="text" id="prenom" aria-required="true" />

Contrôle de saisie

Une fois le formulaire rempli et envoyé par l’internaute, il peut arriver que des erreurs soient présentes : des champs obligatoires non remplis ou des formats de données non respectés par exemple. Ces erreurs peuvent être signalées de différentes manières :

• sous forme de liste, avant le formulaire
• directement dans l’étiquette du champ
• à proximité de chaque champ comportant une erreur

En complément, il est également possible d’indiquer les erreurs avec la propriété aria-invalid="true". Mais cette propriété ne peut être utilisée seule, il est nécessaire de lui ajouter une alternative visible pour tous les internautes.

Le RGAA recommande également, en cas d’erreur de saisie, de proposer des exemples facililant la correction.

Une liste d’erreurs avant le formulaire

Cette liste d’erreurs située avant le formulaire doit respecter certaines règles :

• elle doit être située avant la balise <form>
• elle doit donner le nombre total d’erreurs
• chaque erreur doit avoir un lien vers le champ erroné

Les recommandations d’accessibilité d’Orange préconisent également d’utiliser le role="alert" afin de notifier directement les erreurs aux utilisateurs et utilisatrices de technologies d’assistance.

Voici un exemple de liste d’erreurs précédent un formulaire :

<div role="alert">
  <h2>Deux erreurs sont présentes dans le formulaire</h2>
  <ul>
    <li>
      <a href="#prenom" id="prenom_erreur">
        Le champ "Prénom" est obligatoire, veuillez le remplir.
      </a>
    </li>
    <li>
      <a href="#date" id="date_erreur">
      Le champ "Date de naissance" doit respecter le format jj/mm/aaaa, par exemple : 18/10/1989.
      </a>
    </li>
  </ul>
</div>  

<form>
  <label for="prenom">Votre prénom (champ obligatoire)</label>
  <input type="text" id="prenom" aria-required="true" />

  <label for="date">Date de naissance (au format jj/mm/aaaa)</label>
  <input id="date" type="date" />
</form>   

Directement dans l’étiquette du champ

Le message d’erreur et la suggestion de corrections peuvent être intégrés directement dans la balise <label>. Par exemple :

<label for="date">
   Votre date de naissance
   <span class="error">Veuillez renseigner votre date de naissance, au format jj/mm/aaaa, par exemple : 18/10/1989.</span>
</label>
<input type="date" id="date" aria-invalid="true" />

A proximité du champ erroné

Il peut également arriver que pour des raisons graphiques, on souhaite indiquer les erreurs à proximité du champ mais pas directement dans son étiquette. Dans tous les cas, le texte d’erreur doit être relié au champ correspondant grâce à l’attribut aria-describedly. Par exemple :

<label for="date">Votre date de naissance</label>
<input type="text" id="date" aria-invalid="true" aria-describedby="error-date" />
<p class="error" id="error-date">Veuillez renseigner votre date de naissance au format jj/mm/aaaa, par exemple : 18/10/1989.</p>