Des formulaires qui marchent vraiment

1Associer chaque champ à son libellé

C'est la base et c'est le défaut le plus fréquent. Un texte posé à côté d'un champ n'est pas un libellé : il faut l'association explicite, par l'attribut for de l'élément label qui reprend l'id du champ.

<label for="email">Adresse e-mail</label>
<input id="email" name="email" type="email" autocomplete="email" required />

Ce que ça débloque, au-delà de l'accessibilité : cliquer sur le libellé place le curseur dans le champ, ce qui agrandit nettement la cible sur mobile.

Pense aussi à autocomplete avec la bonne valeur (email, name, tel, postal-code, street-address). Le navigateur remplit alors le formulaire en un geste, ce qui est le meilleur gain de conversion disponible pour un coût nul.

2Valider au bon moment

Le mauvais moment, c'est à chaque frappe. Un champ e-mail qui affiche « adresse invalide » dès la première lettre est agressif et inutile, puisque l'adresse est forcément incomplète.

Le bon moment est double : à la sortie du champ, puis à la soumission.

Le CSS sait faire cette distinction seul. Le pseudo-sélecteur :user-invalid ne s'applique qu'après que le visiteur a interagi avec le champ ou tenté de soumettre, contrairement à :invalid qui s'applique dès le chargement.

input:user-invalid {
  border-color: #b3261e;
}

input:user-valid {
  border-color: #2e6b41;
}

C'est disponible dans les navigateurs courants (référencé comme largement disponible depuis novembre 2023). Sur un projet devant couvrir des navigateurs plus anciens, il faut gérer l'état côté script.

3Écrire des messages d'erreur utiles

Un message d'erreur utile dit trois choses : quel champ, quel est le problème, quoi faire. La plupart des messages produits par défaut n'en disent qu'une.

Techniquement, un message d'erreur doit être relié au champ, pas seulement posé en dessous. Deux attributs ARIA le permettent :

• aria-invalid sur le champ. Ses valeurs sont true, false, grammar et spelling ; toute autre valeur est traitée comme true.
• aria-describedby sur le champ, pointant vers l'id de l'élément qui contient le message.

4Montrer que l'envoi est en cours

Sans retour visible, le visiteur clique à nouveau. Trois choses à faire pendant l'envoi :

1. Désactiver le bouton, pour éviter le double envoi.
2. Changer son texte, « Envoyer » devient « Envoi en cours ». Un indicateur qui tourne seul ne dit rien à qui ne le voit pas.
3. Annoncer le résultat dans une zone que le lecteur d'écran surveille, avec aria-live="polite" pour une confirmation, ou role="alert" pour une erreur, qui interrompt.

Le point que presque tout le monde oublie : après un envoi réussi, déplacer le focus sur le message de confirmation. Sinon le focus reste sur un bouton désactivé, et la personne qui navigue au clavier n'a aucun moyen de savoir ce qui s'est passé.

5Un exemple complet

Un champ, avec tout ce qui précède en place.

<form novalidate>
  <div class="champ">
    <label for="email">Adresse e-mail</label>
    <input
      id="email"
      name="email"
      type="email"
      autocomplete="email"
      required
      aria-describedby="email-aide email-erreur"
    />
    <p id="email-aide" class="aide">Pour te repondre. Rien d'autre.</p>
    <p id="email-erreur" class="erreur" hidden></p>
  </div>

  <button type="submit">Envoyer</button>
  <p id="statut" aria-live="polite"></p>
</form>

const formulaire = document.querySelector("form");
const champ = document.querySelector("#email");
const erreur = document.querySelector("#email-erreur");
const statut = document.querySelector("#statut");
const bouton = formulaire.querySelector("button");

function valider() {
  if (champ.validity.valid) {
    champ.removeAttribute("aria-invalid");
    erreur.hidden = true;
    return true;
  }
  champ.setAttribute("aria-invalid", "true");
  erreur.textContent = champ.validity.valueMissing
    ? "Indique une adresse e-mail pour qu'on puisse te repondre."
    : "L'adresse doit contenir un @, par exemple nom@domaine.fr";
  erreur.hidden = false;
  return false;
}

champ.addEventListener("blur", valider);

formulaire.addEventListener("submit", async (evenement) => {
  evenement.preventDefault();
  if (!valider()) {
    champ.focus();
    return;
  }

  bouton.disabled = true;
  bouton.textContent = "Envoi en cours";
  statut.textContent = "";

  try {
    await envoyer(new FormData(formulaire));
    statut.textContent = "Message envoye. Reponse sous 48 heures.";
    statut.focus();
  } catch {
    statut.textContent =
      "Envoi impossible. Reessaie, ou ecris a contact@exemple.fr";
  } finally {
    bouton.disabled = false;
    bouton.textContent = "Envoyer";
  }
});

L'attribut novalidate désactive les bulles natives du navigateur pour te laisser afficher tes propres messages. L'API de validation reste disponible : champ.validity expose l'état sans que tu réécrives les règles.