Rendre vos formulaires accessibles : guide complet RGAA

Pourquoi l'accessibilité des formulaires est critique

Les formulaires sont les principaux points d'interaction sur un site web : connexion, inscription, achat, contact. Un formulaire inaccessible exclut de facto les utilisateurs de technologies d'assistance.

La thématique 11 du RGAA consacre 13 critères aux formulaires, ce qui en fait la deuxième thématique la plus fournie après la présentation.

Critère 11.1 — Étiquettes de champs

Chaque champ de formulaire doit avoir une étiquette (<label>) associée programmatiquement.

<!-- Méthode 1 : for/id (recommandée) -->
<label for="email">Adresse email</label>
<input type="email" id="email" name="email" />

<!-- Méthode 2 : label englobant -->
<label>
  Adresse email
  <input type="email" name="email" />
</label>

<!-- Méthode 3 : aria-label (quand le label est implicite visuellement) -->
<input type="search" aria-label="Rechercher sur le site" />

<!-- MAUVAIS : pas d'association -->
<span>Email</span>
<input type="email" />

Critère 11.5 — Regroupement de champs

Les champs de même nature doivent être regroupés avec <fieldset> et <legend>.

<fieldset>
  <legend>Adresse de livraison</legend>
  <label for="rue">Rue</label>
  <input type="text" id="rue" />
  <label for="ville">Ville</label>
  <input type="text" id="ville" />
  <label for="cp">Code postal</label>
  <input type="text" id="cp" />
</fieldset>

Critère 11.10 — Contrôle de saisie

Les erreurs de saisie doivent être identifiées et décrites textuellement.

<label for="email">Email</label>
<input type="email" id="email" aria-invalid="true"
       aria-describedby="email-error" />
<p id="email-error" role="alert" class="error">
  Veuillez saisir une adresse email valide (ex: nom@domaine.fr)
</p>

Critère 11.13 — Autocomplétion

Utilisez l'attribut autocomplete pour les champs courants :

<input type="text" autocomplete="given-name" />
<input type="text" autocomplete="family-name" />
<input type="email" autocomplete="email" />
<input type="tel" autocomplete="tel" />
<input type="text" autocomplete="street-address" />
<input type="text" autocomplete="postal-code" />

Champs obligatoires (11.10)

<label for="nom">
  Nom <span aria-hidden="true">*</span>
  <span class="sr-only">(obligatoire)</span>
</label>
<input type="text" id="nom" required aria-required="true" />

Listes de choix (11.8)

<label for="pays">Pays</label>
<select id="pays">
  <optgroup label="Europe">
    <option value="fr">France</option>
    <option value="de">Allemagne</option>
  </optgroup>
  <optgroup label="Amérique">
    <option value="us">États-Unis</option>
    <option value="ca">Canada</option>
  </optgroup>
</select>

Checklist formulaires RGAA