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
- 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 ou hide-title sont utilisés |
|
open |
Modifie la valeur de aria-hidden sur le dialog |
|
hide-title |
Cache visuellement le titre de la modale, et donne la valeur de label à l’attribut aria-label |
|
no-header |
Cache visuellement la partie haute de la modale, donne la valeur de label à l’attribut aria-label , ⚠️ Assurez-vous de fournir aux utilisateurs un moyen simple et accessible de fermer la boîte de dialogue. |
|
no-close-button |
Cache le bouton de fermeture de la partie haute, et empêche la fermeture de la modale à l’appui sur Echap. ⚠️ Assurez-vous de fournir aux utilisateurs un moyen simple et accessible de fermer la boîte de dialogue. |
Navigation et interaction clavier
Touches supportées :
- Esc → Ferme le composant, sauf si l’attribut no-close-button est utilisé
- Tab → Déplacement entre les éléments interactifs
Gestion du focus :
- À l’ouverture, focus sur le panneau de dialog, 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