Rôle et attributs ARIA
Rôles et attributs ARIA générés par défaut
- Rôle ARIA principal : role=”button”
- Attributs ARIA utilisés :
- aria-disabled="false"
- aria-expanded="false"
- aria-controls pointant vers le panneau du filtre
Attributs de l’élément ayant un impact sur l’accessibilité
|
Attribut |
Impact |
|---|---|
|
label |
⚠️ Obligatoire Donne un libellé au bouton. |
|
open |
Modifie la valeur de aria-expanded à true. |
|
disabled |
Modifie la valeur de aria-disabled sur le bouton, et ajoute un tabindex=”-1”. |
|
readonly |
Modifie la valeur de aria-disabled sur le bouton. |
|
multiple |
Change le role de la liste d’option de radiogroup à group. Change le role des options de radio à checkbox. |
Navigation et interaction clavier
Touches supportées :
- Si le filtre n’est pas dans un tiroir :
- Esc → ferme le panneau
- Tab → fermeture du panneau si le focus devait en sortir
- Sur le bouton principal du filtre :
- Entrer, Espace → ouverture / fermeture du filtre
- Sur une option :
- Entrer, Espace → sélection de l’option. En mode sélection simple, ferme le panneau
- En mode sélection simple :
- Flèche haut / Flèche bas → navigation entre les différentes options (ouvre la liste déroulante si elle n’était pas ouverte)
- Home → navigation vers la première option
- End → navigation vers la dernière option
Gestion du focus :
- A l’activation du bouton “Réinitialiser”, le focus est déplacé sur le champ de saisie.
- A l’ouverture, déplacement du focus sur la première option sélectionnée.
- À la fermeture, retour du focus sur le bouton du filtre.
- En mode sélection simple, à la sélection d’une option, fermeture du panneau et retour du focus sur le bouton du filtre.