Rôle et attributs ARIA
Rôles et attributs ARIA générés par défaut
- Élément principal : <fieldset>
- Élément interactif : <button>
- Attributs ARIA utilisés (élément interactif) :
- aria-describedby pointant à minima vers :
- la description (attribut description ou slot=”description”),
- le texte d’aide (attribut help-text ou slot=”help-text”),
- et les dsa-file-upload-item enfants (contenu du slot par défaut)
- Élément de formulaire (caché) : <input type="file">
Attributs de l’élément ayant un impact sur l’accessibilité
|
Attribut |
Impact |
|---|---|
|
label |
⚠️ Obligatoire (ou son équivalent slot=”label”) Donne un nom accessible au group (<legend>). |
|
button-label |
Modifie le texte par défaut du bouton. |
|
description |
Ajoute une description sous la légende, vers laquelle pointe l’attribut aria-describedby de l’élément intéractif. |
|
disabled |
Ajoute les attributs disabled et aria-disabled="true" à l’élément interactif, et l’attribut disabled à l’élément de formulaire. |
|
error |
Ajoute un attribut aria-invalid=”true” à l’élément interactif et modifie l’attribut aria-describedby pour pointer également vers le texte d’erreur. ⚠️ Si cet attribut est ajouté, veillez à ajouter également un attribut error-message. |
|
error-message |
⚠️ Obligatoire si error=”true” Indique à l’utilisateur les erreurs liées au champ |
|
required |
Ajoute l’attribut required à l’élément de formulaire, l’attribut aria-required=”true” à l’élément interactif, et affiche un astérisque à gauche du label. |
Bonnes pratiques et pièges à éviter