ARIA : attribut aria-checked
L'attribut aria-checked
indique l'état actuel (« sélectionné » ou non) des cases à cocher, boutons radio et autres widgets.
Note :
Dans la mesure du possible, utilisez un élément HTML <input>
avec type="checkbox"
ou type="radio"
: ces éléments possèdent une sémantique intégrée et ne nécessitent pas d'attributs ARIA.
Description
L'attribut aria-checked
indique si l'élément est sélectionné (true
), non sélectionné (false
), ou si l'état de sélection est indéterminé (mixed
), c'est-à-dire ni sélectionné ni non sélectionné. La valeur mixed
est prise en charge par les rôles de saisie à trois états : checkbox
et menuitemcheckbox
.
La valeur mixed
n'est pas prise en charge sur radio
, menuitemradio
ou switch
ni sur les éléments qui héritent de ces rôles. Si mixed
est défini alors qu'il n'est pas pris en charge, la valeur sera considérée comme false
.
<span
role="checkbox"
id="caseACocher"
aria-checked="false"
tabindex="0"
aria-labelledby="libelle-chk15"></span>
<label id="libelle-chk15">S'abonner à la lettre d'information</label>
L'attribut tabindex
est nécessaire pour permettre la sélection clavier. JavaScript est requis pour basculer l'état aria-checked
. Et, si cette case à cocher fait partie d'un formulaire à soumettre, il faut encore plus de JavaScript pour définir un nom et une valeur.
L'exemple ci-dessus pourrait être écrit ainsi :
<input type="checkbox" id="libelle-chk15" name="Abonnement" />
<label for="libelle-chk15">S'abonner à la lettre d'information</label>
En utilisant l'élément <input>
avec type="checkbox"
au lieu d'ARIA, aucun JavaScript n'est nécessaire.
Valeurs
- false
-
L'élément peut être sélectionné mais ne l'est pas actuellement.
- true
-
L'élément est sélectionné.
- mixed
-
Pour
checkbox
etmenuitemcheckbox
uniquement, équivalent à « indéterminé », indique une valeur mixte, ni sélectionné ni non sélectionné. - undefined (valeur par défaut)
-
L'élément ne prend pas en charge la sélection.
Rôles associés
Utilisé dans les rôles :
Interfaces associées
Element.ariaChecked
-
La propriété
ariaChecked
, qui fait partie de l'interfaceElement
, reflète la valeur de l'attributaria-checked
. ElementInternals.ariaChecked
-
La propriété
ariaChecked
, qui fait partie de l'interfaceElementInternals
, reflète la valeur de l'attributaria-checked
.
monElementHTML.ariaChecked = true;
Spécifications
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA)> # aria-checked> |
Unknown specification> |