enum Valeurs : true,false

aria-selected

Indique si un élément sélectionnable est actuellement sélectionné dans un widget multi-sélection ou à sélection unique.

Description

aria-selected s’applique aux éléments d’une collection sélectionnable : onglets (tab), options (option), cellules de grille (gridcell), éléments de liste (listitem) dans un listbox… La valeur true indique l’élément actuellement sélectionné.

Syntaxe

<ul role="tablist">
  <li role="tab" aria-selected="true" tabindex="0">Onglet 1</li>
  <li role="tab" aria-selected="false" tabindex="-1">Onglet 2</li>
</ul>

Exemples

Widget d’onglets complet :

<div role="tablist" aria-label="Paramètres">
  <button role="tab" aria-selected="true" aria-controls="panneau-general" id="onglet-general">
    Général
  </button>
  <button role="tab" aria-selected="false" aria-controls="panneau-securite" id="onglet-securite" tabindex="-1">
    Sécurité
  </button>
</div>
<div role="tabpanel" id="panneau-general" aria-labelledby="onglet-general">…</div>
<div role="tabpanel" id="panneau-securite" aria-labelledby="onglet-securite" hidden>…</div>

Liste déroulante avec sélection :

<ul role="listbox" aria-multiselectable="false">
  <li role="option" aria-selected="false">Rouge</li>
  <li role="option" aria-selected="true">Bleu</li>
  <li role="option" aria-selected="false">Vert</li>
</ul>

Notes

Différence avec aria-checked : aria-selected s’utilise pour la sélection dans une collection ; aria-checked pour les cases à cocher et boutons radio.

Différence avec aria-current : aria-selected indique la sélection interactive dans un widget ; aria-current indique l’élément courant dans un contexte de navigation (page actuelle, étape active…).

Tabindex roving : dans un groupe d’onglets, l’onglet sélectionné a tabindex="0", les autres tabindex="-1". La navigation entre onglets se fait avec les touches fléchées.

Support navigateurs