Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

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.

html
<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 :

html
<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 et menuitemcheckbox 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'interface Element, reflète la valeur de l'attribut aria-checked.

ElementInternals.ariaChecked

La propriété ariaChecked, qui fait partie de l'interface ElementInternals, reflète la valeur de l'attribut aria-checked.

js
monElementHTML.ariaChecked = true;

Spécifications

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# aria-checked
Unknown specification

Voir aussi