L'attributaria-selected indique l'état « sélectionné » actuel de divers widgets.

Description

L'attributaria-selected indique l'état « sélectionné » actuel pour les rôlesgridcell,option,row ettab.

Cet attribut sert à indiquer quels éléments d'un widget composite à sélection unique ou multiple sont sélectionnés. Si plusieurs éléments peuvent être sélectionnés en même temps, ajoutezaria-multiselectable="true" sur la grille, la liste, le tablist ou tout autre rôle parent, et incluezaria-selected uniquement sur les cellules, options et onglets sélectionnables.

Pour d'autres rôles, l'état sélectionné actuel est défini avecaria-current, ou éventuellementaria-checked ouaria-pressed, selon le rôle.

Les widgets qui prennent en charge à la foisaria-selected etaria-current en même temps leur donnent des significations différentes. Par exemple,aria-current="page" peut être utilisé dans un arbre de navigation pour indiquer quelle page est actuellement affichée, tandis quearia-selected="true" indique que la page sera sélectionnée et affichée lorsque l'utilisateur·ice activera l'élémenttreeitem.

Grille

Définiraria-selected="false" sur une cellule de grille sélectionnable indique que la cellule peut être sélectionnée. Si la grille permet de sélectionner plusieurs cellules à la fois, définissezaria-multiselectable="true" sur l'élément avec le rôlegrid. Définiraria-selected sur une cellule d'en-tête de colonne ou de ligne ne propage pas l'état aux autres cellules de la colonne ou de la ligne.

Option

aria-selected etaria-checked sont tous deux valides pouroption. Certaines interfaces utilisateur indiquent la sélection avecaria-selected dans les listes à sélection unique et avecaria-checked dans les listes à sélection multiple.

Ne spécifiez pas à la foisaria-selected etaria-checked sur les élémentsoption contenus dans la mêmelistbox, sauf si le sens et l'objectif dearia-selected sont différents de ceux dearia-checked dans l'interface utilisateur, que le sens et l'objectif de chaque état sont clairs, et que l'UI propose des méthodes distinctes pour contrôler chaque état.

Ligne

L'attributaria-selected est pris en charge surrow mais pas surcolumn. Si une grille prend en charge la sélection, lorsqu'une cellule ou une ligne est sélectionnée, l'élément sélectionné aaria-selected="true".

Si la grille prend en charge la sélection de colonnes et qu'une colonne est sélectionnée, toutes les cellules de la colonne ontaria-selected àtrue.

Onglet

Dans une liste d'onglets (tablist),aria-selected est utilisé sur un onglet pour indiquer letabpanel actuellement affiché.

L'onglettab sélectionné dans unetablist doit avoir l'attributaria-selected="true". Tous les onglets inactifs de la liste doivent avoiraria-selected="false". La définition de l'état n'affecte que l'arbre d'accessibilité : veillez à mettre en forme l'onglet actif de façon à indiquer visuellement son état sélectionné. La valeur par défaut dearia-selected sur un rôletab estfalse.

Si plusieurs onglets peuvent être sélectionnés en même temps, ajoutezaria-multiselectable sur letablist.

Exemple

Dans cet exemple detablist, le premier onglet est sélectionné :

<div>  <div role="tablist" aria-label="Onglets d'exemple">    <span      role="tab"      aria-selected="true"      aria-controls="panel-1"           tabindex="0">      Premier onglet    </span>    <span      role="tab"      aria-selected="false"      aria-controls="panel-2"           tabindex="-1">      Deuxième onglet    </span>    <span      role="tab"      aria-selected="false"      aria-controls="panel-3"           tabindex="-1">      Troisième onglet    </span>  </div>  <div role="tabpanel" tabindex="0" aria-labelledby="tab-1">    <p>Contenu du premier panneau</p>  </div>  <div role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>    <p>Contenu du deuxième panneau</p>  </div>  <div role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>    <p>Contenu du troisième panneau</p>  </div></div>

Valeurs

true

L'élément sélectionnable est sélectionné.

false

L'élément sélectionnable n'est pas sélectionné. Valeur par défaut implicite pourtab.

undefined (valeur par défaut)

L'élément n'est pas sélectionnable.

Interfaces associées

Element.ariaSelected

La propriétéariaSelected, qui fait partie de l'interfaceElement, reflète la valeur de l'attributaria-selected.

ElementInternals.ariaSelected

La propriétéariaSelected, qui fait partie de l'interfaceElementInternals, reflète la valeur de l'attributaria-selected.

Rôles associés

Utilisé dans les rôles :

• gridcell
• option
• row
• tab

Hérité dans les rôles :

• columnheader
• rowheader
• treeitem

Spécifications

Voir aussi

• L'attribut ARIAaria-pressed
• L'attribut ARIAaria-checked