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
- Elements “slider” : <input type=”range”>
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. |
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 un des éléments du slider :
- Flèche haute / Flèche droite : incrémente de la valeur
- Flèche basse / Flèche gauche : décrémente de la valeur
Gestion du focus :
- A l’activation du bouton “Réinitialiser”, le focus est déplacé sur le champ de saisie de la valeur minimale.
- À la fermeture, retour du focus sur le bouton du filtre
- (Si le filtre n’est pas dans un tiroir) A l’activation du bouton “Valider”, le panneau est fermé et le focus est déplacé sur le bouton du filtre.