Rôle et attributs ARIA
Rôles et attributs ARIA générés par défaut (sur l’élément déclencheur)
- Rôle ARIA principal : role=”button”
- Attributs ARIA utilisés :
- aria-controls="content"
Attributs de l’élément ayant un impact sur l’accessibilité
|
Attribut |
Impact |
|---|---|
|
summary |
⚠️ Obligatoire (sauf si slot=”summary” utilisé) Donne un nom accessible à l’élément déclencheur. |
|
open |
Modifie la valeur de aria-expanded sur l’élément déclencheur. |
|
header-level |
Donne un niveau de titre à l’élément déclencheur, via les attributs role=”heading” et aria-level=”X”. |
|
disabled |
Ajoute les attributs aria-disabled=”true” et tabindex=”-1” au déclencheur. |
Navigation et interaction clavier
Touches supportées :
- Enter , Espace → Ouverture/Fermeture de l’accordéon
Bonnes pratiques et pièges à éviter
Référence