ARIA : rôle form
Le rôle form peut être utilisé pour identifier un groupe d'éléments sur une page qui fournissent une fonctionnalité équivalente à celle d'un formulaire HTML. Le formulaire n'est pas exposé en tant que région de repère à moins qu'il n'ait un nom accessible.
<div role="form" id="contact-info" aria-label="Informations de contact">
<!-- contenu du formulaire -->
</div>
Ceci est un formulaire qui collecte et enregistre les informations de contact d'un·e utilisateur·ice.
Attention :
Utilisez un élément HTML <form> pour contenir vos contrôles de formulaire, plutôt que le rôle ARIA form, à moins que vous n'ayez une très bonne raison.
L'élément HTML <form> est suffisant pour indiquer aux technologies d'assistance qu'il s'agit d'un formulaire.
Description
Un repère form identifie une région de contenu qui contient une collection d'éléments et d'objets qui, dans leur ensemble, se combinent pour créer un formulaire lorsque aucun autre repère nommé n'est approprié (par exemple, main ou search).
Note :
L'utilisation de l'élément <form> communiquera automatiquement une section de contenu en tant que repère form, si elle est fournie avec un nom accessible. Les développeurs devraient toujours préférer utiliser le bon élément HTML sémantique plutôt que d'utiliser ARIA.
Utilisez l'élément HTML <form> si possible. L'élément <form> définit un repère form lorsqu'il a un nom accessible (par exemple, aria-labelledby, aria-label ou title). Assurez-vous d'avoir une étiquette unique sur chaque formulaire dans un document pour aider les utilisateur·ice·s à comprendre l'objectif du formulaire. Cette étiquette doit être visible pour tous les utilisateur·ice·s, pas seulement pour les utilisateur·ice·s de technologies d'assistance. Utilisez le repère search au lieu du repère form lorsque le formulaire est utilisé pour des fonctionnalités de recherche.
Utilisez le role="form" pour identifier une région de la page ; ne l'utilisez pas pour identifier chaque champ de formulaire. Même si vous utilisez le repère de formulaire au lieu de <form>, vous êtes encouragé à utiliser des contrôles de formulaire HTML natifs comme <button>, <input>, <select>, et <textarea>.
Propriétés, états et rôles WAI-ARIA associés
Aucun état ou propriété spécifique à ce rôle.
Interactions au clavier
Aucune interaction au clavier spécifique à ce rôle.
Fonctionnalités JavaScript requises
Exemples
<div role="form" id="send-comment" aria-label="Ajouter un commentaire">
<label for="username">Nom d'utilisateur·ice</label>
<input
id="username"
name="username"
autocomplete="nickname"
autocorrect="off"
type="text" />
<label for="email">Courriel</label>
<input
id="email"
name="email"
autocomplete="email"
autocapitalize="off"
autocorrect="off"
spellcheck="false"
type="text" />
<label for="comment">Commentaire</label>
<textarea id="comment" name="comment"></textarea>
<input value="Commenter" type="submit" />
</div>
Il est recommandé d'utiliser <form> à la place.
<form id="send-comment" aria-label="Ajouter un commentaire">…</form>
Problèmes d'accessibilité
Utiliser avec parcimonie
Les rôles de repère sont destinés à identifier des sections globales plus importantes du document. L'utilisation de trop de rôles de repère peut créer du « bruit » dans les lecteurs d'écran, rendant difficile la compréhension de la mise en page globale de la page.
Les éléments de formulaire ne sont pas des formulaires
Vous n'avez pas besoin de déclarer role="form" sur chaque élément de formulaire (champs de saisie, zones de texte, sélecteurs, etc.). Il doit être déclaré sur l'élément HTML qui enveloppe les éléments de formulaire. Idéalement, utilisez l'élément <form> comme élément d'enveloppement et ne déclarez pas role="form".
Recherche
Si un formulaire est utilisé pour la recherche, vous devez utiliser la valeur plus spécialisée role="search".
Étiquetage des repères
Chaque élément <form> et rôle de formulaire qui doit être exposé en tant que repère doit avoir un nom accessible. Ce nom permettra à un·e utilisateur·ice de technologie d'assistance de comprendre rapidement l'objectif du repère de formulaire.
Utilisez un aria-labelledby, aria-label ou title sur le même élément qui a reçu le role="form" pour lui fournir un nom accessible.
Utilisation de role="form"
<div role="form" id="gift-cards" aria-label="Acheter une carte-cadeau">
<!-- form content -->
</div>
Descriptions redondantes
Les lecteurs d'écran annonceront le type de rôle que le repère a. De ce fait, vous n'avez pas besoin de décrire ce que le repère est dans son étiquette. Par exemple, une déclaration de role="form" avec un aria-label="Contact form" peut être annoncée de manière redondante comme, "formulaire de contact form".
Bonnes pratiques
Préférer HTML
L'utilisation de l'élément <form> communiquera automatiquement qu'une section a un rôle de form. Si possible, préférez l'utiliser à la place.
Spécifications
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # form |
| Unknown specification |