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 : rôle checkbox

Le rôle checkbox est destiné aux contrôles interactifs cochables. Les éléments contenant role="checkbox" doivent également inclure l'attribut aria-checked afin d'exposer l'état de la case à cocher aux technologies d'assistance.

html
<span
  role="checkbox"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="chk1-label"></span>
<label id="chk1-label">Se souvenir de mes préférences</label>

Note : La première règle d'ARIA est la suivante : si un élément ou un attribut HTML natif possède déjà la sémantique et le comportement nécessaires, utilisez-le au lieu de détourner un élément et d'ajouter de l'ARIA. Utilisez plutôt la case à cocher HTML <input type="checkbox"> (avec un <label> associé), qui fournit nativement toutes les fonctionnalités requises :

html
<input type="checkbox" id="chk1-label" name="RememberPreferences" />
<label for="chk1-label">Se souvenir de mes préférences</label>

Description

Le contrôle de formulaire HTML natif (<input type="checkbox">) possède deux états (« cochée » ou « non cochée »), avec un état indeterminate définissable via JavaScript. De même, un élément avec role="checkbox" peut exposer trois états via l'attribut aria-checked : true, false ou mixed.

Une case à cocher étant un contrôle interactif, elle doit être sélectionnée et accessible au clavier. Si le rôle est appliqué à un élément non sélectionnable, utilisez l'attribut tabindex pour y remédier. Le raccourci clavier attendu pour activer une case à cocher est la touche Espace.

Il incombe aux développeur·euse·s de mettre à jour dynamiquement la valeur de l'attribut aria-checked lorsque la case à cocher est activée.

Tous les descendants sont présents de manière présentielle

Certains composants d'interface, lorsqu'ils sont représentés dans une API d'accessibilité de la plateforme, ne peuvent contenir que du texte. Les API d'accessibilité n'ont pas de moyen de représenter des éléments sémantiques contenus dans un checkbox. Pour pallier cette limitation, les navigateurs appliquent automatiquement le rôle presentation à tous les descendants de tout élément checkbox, car ce rôle ne prend pas en charge des enfants sémantiques.

Par exemple, considérons l'élément checkbox suivant, qui contient un titre :

html
<div role="checkbox"><h6>Nom de ma case à cocher</h6></div>

Comme les descendants de checkbox sont présentiels, le code suivant est équivalent :

html
<div role="checkbox"><h6 role="presentation">Nom de ma case à cocher</h6></div>

Du point de vue de l'utilisateur·ice d'une technologie d'assistance, le titre n'existe pas puisque les extraits précédents sont équivalents à ce qui suit dans l'arbre d'accessibilité :

html
<div role="checkbox">Nom de ma case à cocher</div>

Rôles, états et propriétés WAI-ARIA associés

aria-checked

La valeur de aria-checked définit l'état d'une case à cocher. Cet attribut prend l'une des trois valeurs possibles :

true

La case est cochée.

false

La case n'est pas cochée.

mixed

La case est partiellement cochée, ou indéterminée.

tabindex="0"

Permet de la rendre sélectionnable afin que l'utilisateur·ice de technologies d'assistance puisse l'atteindre par tabulation et commencer à la lire immédiatement.

Interactions clavier

Touche Fonction
Espace Active la case à cocher.

JavaScript requis

Gestionnaires d'événements requis

onclick

Gère les clics souris sur la case à cocher et sur l'étiquette associée, en modifiant la valeur de aria-checked et l'apparence de la case pour qu'elle paraisse cochée ou non aux utilisateur·ice·s voyant·e·s.

onKeyDown

Gère le cas où l'utilisateur·ice appuie sur la touche Space, en modifiant la valeur de aria-checked et l'apparence de la case pour qu'elle paraisse cochée ou non aux utilisateur·ice·s voyant·e·s.

Exemples

L'exemple suivant crée une case à cocher non sémantique en utilisant CSS et JavaScript pour gérer son état coché/non coché.

HTML

html
<span
  role="checkbox"
  id="chkPref"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="chk1-label"></span>
<label id="chk1-label">Se souvenir de mes préférences</label>

CSS

css
[role="checkbox"] {
  padding: 5px;
}

[role="checkbox"]:focus {
  border: 2px solid #0198e1;
}

[aria-checked="true"]::before {
  content: "[x]";
}

[aria-checked="false"]::before {
  content: "[ ]";
}

JavaScript

js
const item = document.getElementById("chkPref");
const label = document.getElementById("chk1-label");

function changeCheckbox(code) {
  const checked = item.getAttribute("aria-checked");

  console.log(code);

  if (code && code !== "Space") {
    return;
  }
  if (checked === "true") {
    item.setAttribute("aria-checked", "false");
  } else {
    item.setAttribute("aria-checked", "true");
  }
}

item.addEventListener("keydown", (event) => {
  changeCheckbox(event.code);
});

label.addEventListener("keydown", (event) => {
  changeCheckbox(event.code);
});

item.addEventListener("click", changeCheckbox);
label.addEventListener("click", changeCheckbox);

Problèmes d'accessibilité

Quand le rôle checkbox est ajouté à un élément, l'agent utilisateur doit :

  • Exposer l'élément avec un rôle checkbox dans l'API d'accessibilité du système d'exploitation.
  • Lorsqu'une valeur aria-checked change, envoyer un événement d'état accessible modifié.

Les technologies d'assistance doivent :

  • Annoncer l'élément comme une case à cocher et, facultativement, indiquer comment l'activer.

Les personnes qui implémentent des cases à cocher doivent :

  • S'assurer que la case peut être atteinte et utilisée à la fois au clavier et à la souris.
  • Maintenir l'attribut aria-checked à jour après les interactions.
  • Fournir des styles indiquant quand la case est ciblée.

Note : Les avis peuvent diverger quant à la manière dont les technologies d'assistance devraient gérer cette technique. Les informations ci-dessus représentent l'un de ces avis et peuvent évoluer.

Bonnes pratiques

La première règle d'ARIA : si un élément ou un attribut HTML natif possède la sémantique et le comportement dont vous avez besoin, utilisez-le plutôt que de réinventer un composant avec des rôles, états ou propriétés ARIA. Il est donc recommandé d'utiliser la case à cocher HTML native plutôt que de recréer sa fonctionnalité avec JavaScript et ARIA.

Voir aussi