-
Notifications
You must be signed in to change notification settings - Fork 1
/
7-checkbox.html
executable file
·151 lines (131 loc) · 8.16 KB
/
7-checkbox.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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Checkbox - Guide sur les lecteurs d'écran</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/styles.css" media="all">
<link rel="stylesheet" href="css/print.css" media="print">
</head>
<body>
<div class="main-header">
<div class="inside">
<ul class="skip-links">
<li><a href="#main">contenu</a></li>
<li><a href="#navigation">navigation</a></li>
</ul>
<header role="banner" class="header clear" id="banner">
<h1 class="title">Guide sur les lecteurs d'écran</h1>
</header>
<nav role="navigation" class="gp-sommaire" id="navigation" aria-label="Sommaire du guide">
<button id="btnSommaire" aria-expanded="false">Sommaire</button>
<ul class="sommaire is-hidden" id="sommaireToggle">
<li><a href="index.html">1. Introduction</a></li>
<li>
<ul>
<li><a href="lecteur-ecran.html">Qu'est-ce qu'un lecteur d'écran ?</a></li>
<li><a href="environnement.html">À chaque environnement, ses lecteurs d’écran</a></li>
<li><a href="restitution.html">Comment un lecteur d'écran restitue l'information</a></li>
</ul>
</li>
<li><a href="installation-config.html">2. Installation et configuration des lecteurs d’écran</a></li>
<li>
<ul>
<li><a href="jaws.html">Installation et configuration de <span lang="en">JAWS</span></a></li>
<li><a href="nvda.html">Installation et configuration de NVDA</a></li>
<li><a href="voiceover.html">Installation et configuration de <span lang="en">VoiceOver</span></a></li>
</ul>
</li>
<li><a href="composants.html">3. Tester des composants ARIA avec un lecteur d'écran</a></li>
<li>
<ol>
<li><a lang="en" href="1-slider.html">Slider</a></li>
<li><a lang="en" href="2-progressbar.html">Progressbar</a></li>
<li><a lang="en" href="3-dialog.html">Dialog / Alert Dialog</a></li>
<li><a lang="en" href="4-tabpanel.html">Tabpanel</a></li>
<li><a lang="en" href="5-tooltip.html">Tooltip</a></li>
<li><a lang="en" href="6-button.html">Button</a></li>
<li><a lang="en" href="7-checkbox.html">Checkbox</a></li>
<li><a lang="en" href="8-menubar.html">Menubar</a></li>
<li><a lang="en" href="9-accordion.html">Accordion</a></li>
<li><a lang="en" href="10-tree.html">Tree</a></li>
<li><a lang="en" href="11-datepicker.html">DatePicker</a></li>
<li><a lang="en" href="12-autocomplete.html">Autocomplete</a></li>
</ol>
</li>
<li><a href="ressources.html">4. Ressources</a></li>
</ul>
</nav>
<div class="github-link">
<p>
<a title="Contribuer / Télécharger sur Github" href="https://github.com/DISIC/guide-lecteurs_ecran">Contribuer / Télécharger</a>
</p>
</div>
</div>
</div>
<div id="wrapper">
<nav role="navigation" class="internav clear">
<ul>
<li><a class="prev" lang="en" href="6-button.html"><span aria-hidden="true"> « </span> Button</a></li>
<li><a class="next" lang="en" href="8-menubar.html">Menubar <span aria-hidden="true"> » </span></a></li>
</ul>
</nav>
<main id="main" role="main">
<h1 class="fiche-title" lang="en">Checkbox</h1>
<article class="article">
<h2>Description</h2>
<div class="centre">
<img src="img/checkbox.png" alt="" />
</div>
<p>Ce composant permet d'implémenter une case à cocher, équivalente au type HTML <code>"checkbox"</code>.</p>
<h3>Restitution</h3>
<ul>
<li>Le composant doit posséder un <a href="https://www.w3.org/TR/accname-aam-1.1/#dfn-accessible-name"><strong>nom accessible</strong> (ressource en anglais)</a>.</li>
<li>l'état <em>coché</em> ou <em>décoché</em> doit être vocalisé.</li>
</ul>
<h3>Interactions de base au clavier</h3>
<p>Les interactions au clavier sont :</p>
<ul>
<li>Les touches <kbd>Espace</kbd> et <kbd>Entrée</kbd> doivent cocher ou décocher la case à cocher.</li>
</ul>
<p><strong>Motif de conception</strong> : <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#checkbox" lang="en">Checkbox</a> (<span lang="en">WAI-ARIA Authoring Practices 1.1</span>)</p>
<h3><a href="http://disic.github.io/rgaa_composants_javascript/#coche">Exemple d'une case à cocher</a></h3>
</article>
<article class="article"><h2>Test de la case à cocher avec JAWS</h2>
<ol>
<li>Tabuler sur le premier groupe de cases à cocher. <br />JAWS n'active pas forcément le mode formulaire et annonce « case à cocher choisir la couleur, non coché</li>
<li>Activer le mode formulaire. <br />JAWS annonce « choisir la couleur noir, case à cocher non cochée, après une tabulation il dit : « choisir la couleur rouge, case à cocher non cochée » et de même pour la troisième case.</li>
<li>Cocher la case à l'aide de la touche <kbd>Espace</kbd>. JAWS annonce « cochée ».</li>
<li>Tabuler jusqu'à la case isolée, en gardant le mode formulaire actif. <br />JAWS annonce : « Case à cocher non cochée, acceptez les conditions d'utilisation ».</li>
<li>Lorsque vous cochez la case, JAWS annonce : « cochée ».</li>
</ol>
</article>
<article class="article"><h2>Test de la case à cocher avec NVDA</h2>
<ol>
<li>Tabuler sur le premier groupe de cases à cocher. NVDA n'active pas forcément le mode formulaire et annonce « Liste de trois éléments, Noir, choisir la couleur noir, case à cocher non cochée.</li>
<li>Activer le mode formulaire. NVDA annonce « choisir la couleur noir, case à cocher non cochée, après une tabulation il dit : « choisir la couleur rouge, case à cocher non cochée » et de même pour la troisième case.</li>
<li>Cocher la case à l'aide de la touche <kbd>Espace</kbd>. NVDA annonce « cochée </li>
<li>Tabuler jusqu'à la case isolée, en gardant le mode actif. NVDA annonce : « Case à cocher non cochée, acceptez les conditions d'utilisation ».</li>
<li>Lorsque vous cochez la case, NVDA annonce : « cochée</li></ol>
</article><article class="article"><h2>Test de la case à cocher avec <span lang="en">VoiceOver</span></h2>
<ol>
<li>Tabuler sur le premier groupe de cases à cocher. <br /><span lang="en">VoiceOver</span> annonce « choisir la couleur noir, case à cocher non cochée, case à cocher groupe, choisir la couleur, 3 éléments ».</li>
<li>Se déplacer à l'aide des flèches de direction (haut et bas). <span lang="en">VoiceOver</span> annonce : « Choisir la couleur rouge, non coché, case à cocher ». Même annonce pour la troisième case.</li>
<li>Cocher la case à l'aide de <kbd>VO + Espace</kbd>. <span lang="en">VoiceOver</span> annonce « cochée » et l'intitulé de la case.</li>
<li>Tabuler jusqu'à la case isolée. <br /><span lang="en">VoiceOver</span> annonce : « acceptez les conditions d'utilisation, non coché, case à cocher principal 1 élément ».</li>
<li>Lorsque vous cochez la case, <span lang="en">VoiceOver</span> annonce : « cochée » et l'intitulé de la case.</li>
</ol>
</article>
</main>
<footer id="footer" role="contentinfo" class="clear">
<h2>Licence d'utilisation</h2>
<p class="logo-smgap"><a href="http://references.modernisation.gouv.fr/"><img src="img/modernisation-logo.jpg" alt="Secrétariat général pour le modernisation de l'action publique"></a></p>
<p>Ce document est la propriété du Secrétariat général à la modernisation de l'action publique français (SGMAP). Il est placé sous la <a href="https://www.etalab.gouv.fr/licence-ouverte-open-licence">licence ouverte 1.0 ou ultérieure</a>, équivalente à une licence <i lang="en">Creative Commons BY</i>. Pour indiquer la paternité, ajouter un lien vers la version originale du document disponible sur le <a href="https://github.com/DISIC">compte <span lang="en">GitHub</span> de la DInSIC</a>.</p>
</footer>
</div>
<script src="js/script.js"></script>
</body>
</html>