aria-selected

Quand l’utiliser

Sur les éléments appartenant à un conteneur disposant d’un modèle de sélection :

• role="tab" dans un tablist (exactement un sélectionné).
• role="option" dans un listbox (un ou plusieurs, selon aria-multiselectable).
• role="treeitem" dans un tree.
• role="gridcell", role="row", role="columnheader", role="rowheader" dans un grid.

L’état décrit la relation entre l’élément et la sélection de son conteneur — pas un état activé/désactivé autonome comme une case à cocher. Choisissez l’état approprié selon le motif :

• aria-selected — éléments dans un contexte tab, option, tree ou grid.
• aria-checked — cases à cocher et boutons radio (choix indépendants).
• aria-pressed — boutons bascule (le bouton lui-même est activé ou désactivé).

Une erreur courante consiste à mettre aria-selected="true" sur un <button> pour signifier « l’utilisateur m’a cliqué en dernier ». Si l’élément ne fait pas partie d’un widget de type sélection, utilisez plutôt aria-pressed ou aria-current.

Comment le maintenir synchronisé

Les valeurs valides sont "true" et "false". Rendez "false" sur les éléments non sélectionnés plutôt qu’omettre l’attribut — la technologie d’assistance annonce alors correctement les informations de position de style « 1 sur 5 ». Dans un widget à sélection simple (tablist, listbox à sélection simple), exactement un élément doit être à "true" à la fois.

L’attribut doit changer en parfaite synchronisation avec l’indicateur visuel et la gestion du focus. Dans un tablist, déplacer la sélection déplace généralement aussi tabindex="0" vers l’onglet sélectionné et tabindex="-1" sur les autres.

Erreurs fréquentes

• Utiliser aria-selected sur un bouton ou un lien en dehors de tout conteneur de type sélection.
• Plusieurs éléments aria-selected="true" dans un tablist ou listbox à sélection simple.
• Oublier de passer aria-selected="false" sur l’élément précédemment sélectionné lorsque la sélection change.
• Appliquer visuellement une apparence « sélectionné » via CSS sans modifier l’attribut.
• Confondre aria-selected avec aria-checked sur les options de listbox (toujours selected) ou avec aria-current sur un lien de navigation (current, pas selected).
• Définir aria-selected sur role="menuitem" — les éléments de menu ne le supportent pas ; utilisez aria-checked pour les cases à cocher / boutons radio de menu.

Exemple

<div role="tablist" aria-label="Sections">
  <button role="tab" id="tab-1" aria-selected="true"  tabindex="0"  aria-controls="panel-1">Overview</button>
  <button role="tab" id="tab-2" aria-selected="false" tabindex="-1" aria-controls="panel-2">Details</button>
  <button role="tab" id="tab-3" aria-selected="false" tabindex="-1" aria-controls="panel-3">Reviews</button>
</div>