Rôle et attributs ARIA
Rôles et attributs ARIA générés par défaut
- Rôle ARIA principal : role=”dialog”
- Attributs ARIA utilisés :
- aria-modal="true"
- aria-labelledby si un titre est visible
- aria-label si pas de titre visible
- aria-hidden="true" (tiroir fermé par défaut)
- tabindex="-1" : permet de pouvoir utiliser la méthode focus sans que l’élément ne fasse parti de l’ordre de tabulation
Attributs de l’élément ayant un impact sur l’accessibilité
|
Attribut |
Impact |
|---|---|
|
label |
⚠️ Obligatoire (sauf si slot=”label” utilisé) Donne un nom accessible à l’élément, soit de manière visible, soit via le aria-label si no-header est utilisé |
|
open |
Modifie la valeur de aria-hidden sur le tiroir |
|
no-header |
Cache visuellement la partie haute du tiroir, donne la valeur de label à l’attribut aria-label , ⚠️ Assurez-vous de fournir aux utilisateurs un moyen simple et accessible de fermer le tiroir. |
Navigation et interaction clavier
Touches supportées :
- Esc → Ferme le composant
- Tab → Déplacement entre les éléments interactifs
Gestion du focus :
- À l’ouverture, focus sur le panneau du tiroir, sauf si un des éléments à l’intérieur possède l’attribut autofocus
- À la fermeture, retour du focus sur l'élément qui a déclenché l'ouverture du panneau.
Bonnes pratiques et pièges à éviter
Référence