Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
ARIA : rôle checkbox
Le rôlecheckbox est destiné aux contrôles interactifs cochables. Les éléments contenantrole="checkbox" doivent également inclure l'attributaria-checked afin d'exposer l'état de la case à cocher aux technologies d'assistance.
<span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"></span><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 lacase à cocher HTML<input type="checkbox"> (avec un<label> associé), qui fournit nativement toutes les fonctionnalités requises :
<input type="checkbox" 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 étatindeterminate définissable via JavaScript. De même, un élément avecrole="checkbox" peut exposer trois états via l'attributaria-checked :true,false oumixed.
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'attributtabindex pour y remédier. Le raccourci clavier attendu pour activer une case à cocher est la toucheEspace.
Il incombe aux développeur·euse·s de mettre à jour dynamiquement la valeur de l'attributaria-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 uncheckbox. Pour pallier cette limitation, les navigateurs appliquent automatiquement le rôlepresentation à tous les descendants de tout élémentcheckbox, car ce rôle ne prend pas en charge des enfants sémantiques.
Par exemple, considérons l'élémentcheckbox suivant, qui contient un titre :
<div role="checkbox"><h6>Nom de ma case à cocher</h6></div>Comme les descendants decheckbox sont présentiels, le code suivant est équivalent :
<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é :
<div role="checkbox">Nom de ma case à cocher</div>Rôles, états et propriétés WAI-ARIA associés
aria-checkedLa valeur de
aria-checkeddéfinit l'état d'une case à cocher. Cet attribut prend l'une des trois valeurs possibles :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
onclickGère les clics souris sur la case à cocher et sur l'étiquette associée, en modifiant la valeur de
aria-checkedet l'apparence de la case pour qu'elle paraisse cochée ou non aux utilisateur·ice·s voyant·e·s.onKeyDownGère le cas où l'utilisateur·ice appuie sur la toucheSpace, en modifiant la valeur de
aria-checkedet 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
<span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"></span><label>Se souvenir de mes préférences</label>CSS
[role="checkbox"] { padding: 5px;}[role="checkbox"]:focus { border: 2px solid #0198e1;}[aria-checked="true"]::before { content: "[x]";}[aria-checked="false"]::before { content: "[ ]";}JavaScript
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ôlecheckbox est ajouté à un élément, l'agent utilisateur doit :
- Exposer l'élément avec un rôle
checkboxdans l'API d'accessibilité du système d'exploitation. - Lorsqu'une valeur
aria-checkedchange, 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 lacase à cocher HTML native plutôt que de recréer sa fonctionnalité avec JavaScript et ARIA.