Rôle et attributs ARIA
Rôles et attributs ARIA générés par défaut
- Si le dsa-checkbox est utilisé à l’intérieur d’un dsa-checkbox-group, le rôle haut niveau sera role=”listitem”
- L’élément interactif est un <input type=”checkbox”>
- Attributs ARIA utilisés :
- aria-checked="false"
Attributs de l’élément ayant un impact sur l’accessibilité
|
Attribut |
Impact |
|---|---|
|
checked |
Ajoute les attributs checked et aria-checked=”true” à l’élément interactif |
|
disabled |
Ajoute l’attribut disabled à l’élément interactif |
|
readonly |
Ajoute les attributs readonly et aria-disabled à l’élément interactif |
|
error |
Ajoute un attribut aria-invalid=”true” et un attribut aria-describedby pointant vers le texte d’erreur à l’élément intéractif. ⚠️ 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 |
|
indeterminate |
Ajoute l’attribut indeterminate à l’élément interactif |
|
required |
Ajoute l’attribut required à l’élément interactif, et affiche un astérisque à gauche du label |
|
accessible-name |
⚠️ Obligatoire si le slot est vide (cas exceptionnel d’utilisation dans un tableau par exemple) |
Bonnes pratiques et pièges à éviter
Référence