files/fr/web/accessibility/aria/roles/checkbox_role/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

---
title: Utilisation du rôle checkbox
slug: Web/Accessibility/ARIA/Roles/checkbox_role
tags:
  - ARIA
  - Accessibilité
  - Rôle
translation_of: Web/Accessibility/ARIA/Roles/checkbox_role
original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox
---
<h3 id="Description">Description</h3>
<div class="summary">
 <p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#checkbox" title="http://www.w3.org/TR/wai-aria/roles#checkbox">checkbox</a>.</p>
</div>
<p>Le rôle <code>checkbox</code> est utilisé pour des contrôles interactifs à cocher. Si un élément utilise <code>role="checkbox",</code> il est obligatoire pour cet élément d’avoir également un attribut <code>aria-checked</code> qui présente l’état de la case à cocher aux technologies d’assistance. Alors que le contrôle de formulaire HTML natif <code>checkbox</code> ne peut avoir que deux états (« coché » ou « décoché »), un élément avec le rôle <code>role=checkbox</code> peut présenter trois états pour l'attribut <code>aria-checked</code> :</p>
<ul>
 <li><code>aria-checked="true"</code> : la case est cochée ;</li>
 <li><code>aria-checked="false"</code> : la case est décochée ;</li>
 <li><code>aria-checked="mixed"</code> : la case est partiellement cochée.</li>
</ul>
<p>Le développeur doit modifier dynamiquement la valeur de l’attribut <code>aria-checked</code> lorsque la case est cochée.</p>
<p>Comme une case à cocher est un contrôle interactif, elle doit pouvoir recevoir le focus et être accessible au clavier. Si le rôle est appliqué à un élément qui ne peut recevoir le focus, l’attribut <code>tabindex</code> devra être utilisé pour corriger cela. Le raccourci clavier attendu pour activer une case à cocher est la barre d’espace.</p>
<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3>
<p>Lorsque le rôle <code>checkbox</code> est ajouté à un élément, l’agent utilisateur devrait suivre les étapes suivantes :</p>
<ul>
 <li>Présenter l’élément comme ayant un rôle de case à cocher à l’API d’accessibilité du système d’exploitation ;</li>
 <li>Lorsque la valeur de l’attribut <code>aria-checked</code> change, envoyer un événement accessible de changement d’état.</li>
</ul>
<p>Les technologies d’assistance doivent faire la chose suivante :</p>
<ul>
 <li>Les lecteurs d’écran devraient annoncer l’élément comme une case à cocher, et, éventuellement, fournir des instructions sur les façons de l’activer.</li>
</ul>
<div class="note">
 <strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div>
<h3 id="Exemples">Exemples</h3>
<h4 id="Exemple_1_Ajout_du_rôle_ARIA_checkbox">Exemple 1 : Ajout du rôle ARIA <code>checkbox</code></h4>
<pre class="brush: html">&lt;span role="checkbox" aria-checked="false" tabindex="0" id="chk1"&gt;&lt;/span&gt;
&lt;label for="chk1"&gt;Enregistrer mes préférences&lt;/label&gt;
</pre>
<h4 id="Exemples_concrets">Exemples concrets :</h4>
<ul>
 <li><a class="external" href="http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php" title="http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php">http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php</a></li>
</ul>
<h3 id="Notes">Notes</h3>
<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3>
<ul>
 <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#checkbox" title="ARIA Roles #checkbox">checkbox</a></li>
 <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-checked" title="ARIA States and Properties #aria-checked">aria-checked</a></li>
</ul>
<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3>
<h3 id="Compatibilité">Compatibilité</h3>
<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p>
<h3 id="Autres_ressources">Autres ressources</h3>