Rôle et attributs ARIA
Rôles et attributs ARIA générés par défaut
- Rôle ARIA principal : role=”tablist”
Attributs de l’élément ayant un impact sur l’accessibilité
|
Attribut |
Impact |
|---|---|
|
accessible-name |
⚠️ Obligatoire Ajoute un attribut aria-label avec l’élément role=”tablist”. |
|
activation |
Lorsqu'il est défini sur auto, la navigation dans les onglets avec les touches fléchées affichera instantanément le panneau de l'onglet correspondant. Lorsqu'il est défini sur manual, l'onglet recevra le focus mais ne s'affichera pas tant que l'utilisateur n'appuiera pas sur la barre d'espace ou sur Entrer. |
Navigation et interaction clavier
Touches supportées :
- Entrer, Espace → Active l’onglet ayant le focus. Si le focus est sur un bouton de fermeture, émet un évenement dsa-close
- Echap → Si l’onglet possède l’attribut closable, émet un évenement dsa-close
- Home → Déplace le focus sur le premier onglet.
- End → Déplace le focus sur le dernier onglet.
- Flèche gauche → Déplacement le focus sur l’onglet à gauche (ou le dernier onglet si le focus était sur le premier onglet).
- Flèche droite → Déplacement le focus sur l’onglet à droite (ou le premier onglet si le focus était sur le dernier onglet).
Bonnes pratiques et pièges à éviter
Référence