Rôle et attributs ARIA
Rôles et attributs ARIA générés par défaut
- dsa-navbar
- Rôle ARIA principal : role=”list”
- dsa-navbar-link
- Rôle ARIA principal : role=”listitem”
- Élément interactif : <a>
- Attribut ARIA utilisé:
- aria-current: appliqué quand le lien est défini comme courant (via son attribut current)
- dsa-navbar-menu
- Rôle ARIA principal : role=”listitem”
- Élément interactif : <button>
- Attributs ARIA utilisés :
- aria-expanded="false"
- aria-controls="menu__content" (menu__content est le parent du slot par défaut)
Attributs de l’élément ayant un impact sur l’accessibilité
- dsa-navbar-menu
|
Attribut |
Impact |
|---|---|
|
label |
⚠️ Obligatoire (sauf si slot=”label” utilisé) Donne un nom accessible au bouton d’ouverture du panneau. |
|
open |
Modifie la valeur de aria-expanded sur le bouton, et affiche le menu. ⚠️ Pour donner plus de liberté dans son utilisation, le panneau ne se ferme pas à l'activation d'éléments qu'il contient. Utilisez l’attribut open pour le contrôler. |
Navigation et interaction clavier
Touches supportées :
- Esc → Ferme le panneau, et déplace le focus sur l’élément déclencheur
- Tab → Fermeture du panneau si le focus devait en sortir
- Espace, Entrer → Sur l’élément déclencheur, ouverture/fermeture du panneau
Bonnes pratiques et pièges à éviter
Référence