aria-required

Description

aria-required="true" annonce aux technologies d’assistance qu’un champ est obligatoire. Pour les éléments HTML natifs (<input>, <textarea>, <select>), l’attribut HTML required est préférable car il déclenche en plus la validation native du navigateur.

Syntaxe

<label for="nom">Nom <span aria-hidden="true">*</span></label>
<input type="text" id="nom" aria-required="true" />

Exemples

Champ avec indication visuelle et ARIA :

<label for="email">
  Adresse e-mail
  <span aria-hidden="true" class="obligatoire">*</span>
</label>
<input type="email" id="email"
       aria-required="true"
       aria-describedby="email-note" />
<p id="email-note">Les champs marqués * sont obligatoires.</p>

Widget personnalisé (éditeur riche) :

<div role="textbox"
     contenteditable="true"
     aria-required="true"
     aria-multiline="true"
     aria-label="Description du produit">
</div>

Notes

Préférer required HTML : pour les champs de formulaire natifs, required est toujours préférable — il fournit à la fois la sémantique ARIA et la validation navigateur.

Indication visuelle : l’astérisque * est une convention courante pour les champs obligatoires. Le masquer des AT avec aria-hidden="true" évite la lecture redondante quand aria-required est déjà présent.

Ne pas se substituer à la validation : aria-required est déclaratif — il n’empêche pas la soumission du formulaire. Une validation côté serveur reste indispensable.