aria-required

L'attribut aria-required indique qu'une saisie de l'utilisatrice ou de l'utilisateur est requise pour cet élément avant qu'un formulaire puisse être envoyé.

Description

Lorsqu'un élément sémantique HTML <input>, <select>, ou <textarea> doit contenir une valeur, il devrait porter l'attribut required. L'attribut HTML required désactive l'envoi du formulaire à moins que les contrôles du formulaire concernés possèdent des valeurs valides, tout en permettant à celles et ceux qui naviguent à l'aide d'outils d'assistance de comprendre quels contrôles doivent avoir une valeur valide pour permettre l'envoi du formulaire.

Lorsque des contrôles de formulaire sont créés avec des éléments non-sémantiques (comme un élément <div> auquel on a greffé le rôle ARIA (en-US) checkbox), l'attribut aria-required devrait être ajouté avec une valeur true afin d'indiquer aux technologies d'assistance qu'une saisie est nécessaire dans cet élément pour que le formulaire puisse être envoyé. L'attribut aria-required peut être utilisé avec les éléments de formulaire HTML, il n'est pas limité aux éléments qui ont un rôle ARIA affecté.

À l'instar de l'attribut HTML required pour les contrôles de formulaire en HTML sémantique, l'attribut aria-required exprime explicitement aux outils d'assistance que l'élément doit être rempli avant que le formulaire puisse être envoyé. L'attribut required d'un contrôle de formulaire en HTML sémantique empêchera l'envoi du formulaire si aucune valeur n'est présente, fournissant un message d'erreur natif pour certains navigateurs si une valeur requise est invalide lors de la tentative d'envoi du formulaire. L'attribut aria-required, comme tous les états et propriétés ARIA, n'a aucun impact sur les fonctionnalités de l'élément. Toute fonctionnalité et comportement doit être implémenté à l'aide de JavaScript.

Note : ARIA modifie uniquement l'arbre d'accessibilité, modifiant ainsi la façon dont les outils d'assistance présentent le contenu aux personnes qui les utilisent. ARIA ne modifie en rien les fonctionnalités ou le comportement d'un élément. Lorsqu'on utilise des éléments HTML en dehors de leur sémantique et de leurs fonctionnalités prévues, il faudra utiliser JavaScript pour gérer le comportement, le focus et les états ARIA.

Les pseudo-classes CSS :required et :optional ciblent les éléments <input>, <select>, et <textarea> selon qu'ils sont obligatoires ou optionnels. Lorsqu'on utilise un élément non-sémantique pour un contrôle de formulaire, ces pseudo-classes ne le ciblent pas. En revanche, il est possible d'utiliser des sélecteurs d'attribut pour déterminer si l'attribut est présent : [aria-required="true"] ou [aria-required="false"].

Si un formulaire contient à la fois des éléments de formulaire obligatoires et optionnels, les éléments obligatoires devraient être indiqués visuellement d'une façon qui ne repose pas uniquement sur une couleur. Généralement, on utilise un texte descriptif et/ou une icône.

Note : Les éléments obligatoires devraient être distinguables pour toutes les personnes. Assurez-vous que la présentation visuelle indique que le contrôle est obligatoire d'une façon claire, cohérente et visible et rappelez-vous que la couleur ne suffit pas à communiquer cette information.

Exemples

Dans le fragment HTML qui suit, si la personne doit nécessairement remplir une adresse électronique dans l'élément avec le rôle textbox, on y inclut aria-required="true".

<div id="tbLabel">Adresse mail (obligatoire)</>
<div role="textbox" contenteditable aria-labelledby="tblabel" aria-required="true" id="email1"></div>

Dans cet exemple, il faudrait recourir à JavaScript pour empêcher l'envoi du formulaire tant que la boîte de texte n'a pas de contenu.

On peut tout à fait réécrire ce qui précède de façon sémantique, sans avoir besoin de JavaScript par ailleurs :

<label for="email1">Adresse mail (obligatoire)</label>
<input type="email" id="email1" required />

Valeurs

true

L'élément doit contenir une valeur ou doit être vérifié avant que le formulaire puisse être envoyé.

false

La valeur de l'élément n'est pas obligatoire.

API ARIAMixin

Element.ariaRequired (en-US)

La propriété ariaRequired (en-US), rattachée à l'interface Element, reflète la valeur de l'attribut aria-required.

ElementInternals.ariaRequired (en-US)

La propriété ariaRequired (en-US), rattachée à l'interface ElementInternals (en-US), reflète la valeur de l'attribut aria-required.

Rôles associés

Spécifications

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# aria-required

Voir aussi