Normes · ARIA

Rôle Point de repère

form

Un landmark pour un formulaire — un ensemble de contrôles de saisie qui soumettent des données. Un élément <form> est exposé comme landmark de formulaire UNIQUEMENT s'il possède un nom accessible. Sans nom, c'est simplement un formulaire, pas un landmark.

Quand l’utiliser

Autour d’un formulaire substantiel — inscription, paiement, contact, modification d’un profil — qui mérite une navigation en tant que landmark. Comme region, l’élément <form> n’est promu en landmark de formulaire QUE s’il possède un nom accessible (aria-label ou aria-labelledby).

Le nom accessible d’un formulaire doit décrire son objectif : « Formulaire de contact », « Inscription », « Modifier le profil ». Évitez le générique « Formulaire » — redondant avec l’annonce du rôle.

Si le formulaire est un formulaire de recherche, utilisez plutôt <search> (ou role="search") — le landmark de recherche est plus spécifique.

Un formulaire d’inscription à une newsletter avec un seul champ ou une simple zone de recherche ne justifie pas le landmark de formulaire. Réservez-le aux formulaires comportant trois champs ou plus avec un objectif clairement défini.

Quand nommer

Toujours — sans nom, le <form> ne devient pas un landmark. Avec plusieurs formulaires sur une page (un formulaire de commentaire ET une inscription à la newsletter), chacun DOIT avoir un nom distinct.

aria-labelledby pointant vers un titre visible est préférable à aria-label, car il associe le titre visible à l’annonce du landmark.

Erreurs courantes

  • <form> sans aria-label / aria-labelledby. Pas un landmark. Les utilisateurs ne peuvent pas y accéder via la navigation par landmarks.
  • aria-label="Formulaire" — redondant.
  • Utiliser <form role="search"> ET aria-label="Recherche". Le landmark de recherche le couvre déjà ; le rôle form entrerait en conflit.
  • Formulaires de connexion et d’inscription tous deux nommés « Se connecter » — impossibles à distinguer dans le menu des landmarks.
  • Envelopper un seul champ dans <form> et le nommer comme landmark de formulaire. Sur-utilisé ; le landmark n’apporte aucune valeur.

Exemple

<form aria-labelledby="contactHeading">
  <h2 id="contactHeading">Nous contacter</h2>
  <label>Nom <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <button type="submit">Envoyer</button>
</form>