Rôle et attributs ARIA
Rôles et attributs ARIA générés par défaut
- Élément principal : <fieldset role=”radiogroup”>
- Attributs ARIA utilisés :
- aria-labelledby pointant vers le libellé renseigné via l’attribut label ou le slot=”label”
- aria-describedby pointant à minima vers le texte d’aide (contenu du slot=”help-text”)
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, que le libellé soit caché ou non via l’attribut hide-label. |
|
hide-label |
Cache le libellé, tout en le gardant accessible aux lecteurs d’écran. |
|
help-text |
Ajoute un texte d’aide pour l’utilisateur, référencé par le aria-labelledby. |
|
description |
Ajoute une description, référencée par le aria-labelledby. |
|
disabled |
Ajoute l’attribut disabled aux enfants |
|
readonly |
Ajoute l’attribut readonly aux enfants |
|
error |
Ajoute un attribut aria-invalid=”true” et modifie l’attribut aria-labelledby 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 interactif, et affiche un astérisque à gauche du label |
Bonnes pratiques et pièges à éviter
Référence