aria-required

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 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.

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.

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>
<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 />

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.

Element.ariaRequired

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

ElementInternals.ariaRequired

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

Cet attribut peut être utilisé pour les rôles :

• checkbox
• combobox
• gridcell
• listbox
• radiogroup
• spinbutton
• textbox
• tree

Et est hérité pour les rôles :

• columnheader
• rowheader
• searchbox
• switch
• treegrid

• L'attribut HTML required
• La pseudo-classe CSS :optional
• La pseudo-classe CSS :required
• L'attribut aria-invalid
• Comprendre les règles WCAG, explications de la règle 3.3
• Comprendre les critères de succès 3.3.2 - Guide W3C pour la compréhension de WCAG 2.0 (en anglais)