-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathcomposants.html
executable file
·252 lines (238 loc) · 17.3 KB
/
composants.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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Composants ARIA</title>
<link rel="stylesheet" href="style-modele.css" />
</head>
<body>
<header>
<h1>Composants WAI-ARIA</h1>
</header>
<main>
<div class="note">
<p>Note : Dans cette page, vous trouverez des notices d’utilisation de composants riches basés sur WAI-ARIA. Recopiez les notices qui vous sont nécessaires dans la page <a href="aide.html">Aide</a> de votre site, à la section concernée.</p>
<p>Pour entendre les informations telles qu'elles sont restituées dans cette page d'aide, il est nécessaire de s'assurer du paramétrage suivant pour les différents lecteurs d'écran :</p>
<ul>
<li>Avec NVDA, lorsqu'on arrive sur un composant, entrer en mode application avec <kbd>NVDA</kbd> + <kbd>Espace</kbd>.</li>
<li>Avec <span lang="en">Jaws</span>, s'assurer que le mode formulaire est activé en appuyant sur <kbd>Entrée</kbd>.</li>
<li><span lang="en">VoiceOver</span> utilise ses propres modes de déplacement avec les combinaisons de touches <kbd>VO+flèches de direction</kbd>. Afin d'utiliser les raccourcis décrits dans cette page, s'assurer que le mode de navigation rapide est désactivé (se reporter à la documentation de VoiceOver pour plus de détails).</li>
</ul>
<p>Si NVDA ou Jaws ne sont pas en mode application ou formulaire, certaines informations décrites ci-dessous pourraient ne pas être vocalisées correctement.</p>
<p>La documentation ci-dessous repose sur des tests effectués sur les configurations suivantes :</p>
<ul>
<li>NVDA 2016.2.1 / Firefox 48</li>
<li><span lang="en">Jaws</span> 16 / Internet Explorer 11</li>
<li>Safari / VoiceOver sur OSX El Capitan</li>
</ul>
</div>
<section id="tabpanel" class="article">
<h2>Système d’onglets</h2>
<p>Un système d’onglets est une liste de panneaux activables via des liens (onglets) qui vont afficher des contenus. Un seul panneau peut être visible à la fois : quand un onglet est activé, les autres ne sont pas visibles.<p>
<p>Une fois que le contenu est rendu visible, la touche <kbd>TAB</kbd> vous permet d'atteindre le contenu du panneau sélectionné.</p>
<ul>
<li>Lorsque vous arrivez sur un système d’onglets, vous êtes placés sur le titre du premier onglet (par défaut, c'est le premier onglet du système qui est apparent) ; </li>
<li>Si vous utilisez un lecteur d’écran :
<ul>
<li>NVDA annonce <i>onglet, [nom], onglet sélectionné 1 sur X »</i>, où « X » est le nombre total d’onglets ; </li>
<li><span lang="en">Jaws</span> annonce <i>« onglet [nom] sélectionné »</i> ;</li>
<li><span lang="en">VoiceOver</span> annonce <i>« Panneau 1, sélectionné 1 sur X »</i>, où « X » est le nombre total d’onglets.</li>
</ul>
</li>
<li>Les flèches <kbd>DROITE</kbd> et <kbd>GAUCHE</kbd> vous permettent de naviguer d’un titre d’onglet à l’autre, activant leurs contenus associés ; </li>
<li>La touche <kbd>TAB</kbd> vous permet d'atteindre le panneau affiché ou l'un de ses composants ; </li>
<li>À ce moment, vous pouvez parcourir le contenu de l’onglet actif, la touche <kbd>TAB</kbd> vous permet d’atteindre les éléments interactifs du contenu ; </li>
<li>Pour parcourir la liste des titres d’onglets à nouveau, tabuler en arrière jusqu’à ce que le focus se place sur le titre de l’onglet actif.</li>
<li>Autres interactions au clavier (à ne documenter que si elles sont implémentées) :
<ul>
<li><kbd>DÉBUT</kbd> vous permet d'accéder au premier panneau ;</li>
<li><kbd>FIN</kbd> vous permet d'accéder au dernier panneau ;</li>
<li><kbd>ALT + PAGE SUIVANTE</kbd>, à partir d'un panneau, vous permet d'accéder au panneau suivant ;</li>
<li><kbd>ALT + PAGE PRÉCÉDENTE</kbd>, à partir d'un panneau, vous permet d'accéder au panneau précédent.</li>
</ul>
</li>
</ul>
</section>
<section id="slider" class="article">
<h2>Potentiomètre</h2>
<p>Un potentiomètre est un curseur que vous pouvez faire varier entre un point minimal et un point maximal, afin de déterminer une valeur.</p>
<ul>
<li>Si vous utilisez un lecteur d’écran, lorsque vous atteignez le potentiomètre :
<ul>
<li>NVDA annonce « <i>[Nom], potentiomètre, [valeur]</i> » ;</li>
<li><span lang="en">Jaws</span> annonce « <i>[Nom], potentiomètre horizontal, [valeur]</i>. La version 16 n'annonce plus la valeur lorsqu'on la modifie. Ce problème est réparé dans la version 17 de ce lecteur d'écran. » ; </li>
<li><span lang="en">VoiceOver</span> annonce « <i>[Valeur], [nom], curseur</i> ». Interagir avec ce composant en appuyant sur les touches <kbd>VO+majuscule+flèche bas</kbd>. Pour utiliser les flèches de contrôle du curseur, ne pas oublier de désactiver la navigation rapide.</li>
</ul>
</li>
<li>Les flèches <kbd>HAUT</kbd> et <kbd>DROIT</kbd> vous permettent d’augmenter la valeur du potentiomètre ;</li>
<li>Les flèches <kbd>BAS</kbd> et <kbd>GAUCHE</kbd> vous permettent de diminuer la valeur du potentiomètre.</li>
<li>Autres interactions au clavier (à ne documenter que si elles sont implémentées) :
<ul>
<li><kbd>DÉBUT</kbd> met la valeur à son minimum ;</li>
<li><kbd>FIN</kbd> met la valeur à son maximum ;</li>
<li><kbd>ALT + PAGE SUIVANTE</kbd>, augmente rapidement la valeur ;</li>
<li><kbd>ALT + PAGE PRÉCÉDENTE</kbd>, diminue rapidement la valeur.</li>
</ul>
</li>
</ul>
</section>
<section id="dialogmodal" class="article">
<h2>Fenêtre modale</h2>
<p>Une fenêtre modale est un élément de la page qui vient se placer en surimpression du reste de la page, à la manière d’un message d’alerte. Ce n'est pas une nouvelle fenêtre ni un nouvel onglet. Une fenêtre modale est contenue dans la page en cours de consultation.</p>
<ul>
<li>Si vous utilisez un lecteur d’écran, lorsqu’une fenêtre modale s'ouvre :
<ul>
<li>NVDA annonce « <i>[Nom] dialogue</i> » ;</li>
<li><span lang="en">Jaws</span> annonce « <i>[nom] Boîte de dialogue</i> » ; </li>
<li><span lang="en">VoiceOver</span> annonce « <i>[Nom] avec X éléments, dialogue</i> ».</li>
</ul>
</li>
<li>Une fois qu’une fenêtre modale est ouverte, la touche <kbd>TAB</kbd> vous permet d’atteindre tous les éléments de la fenêtre modale. La navigation est restreinte à cette fenêtre tant qu’elle est ouverte ; </li>
<li>Pour fermer la fenêtre, vous pouvez soit atteindre le bouton « Fermer », soit utiliser la touche <kbd>ESC</kbd>.</li>
</ul>
</section>
<section id="tooltip" class="article">
<h2>Infobulle (<span lang="en">tooltip</span>)</h2>
<p>Une infobulle est une information complémentaire placée sur un élément interactif qui apparaît et est restituée lorsque vous tabulez dessus, ou lorsque la souris le survole.</p>
<ul>
<li>Lorsque vous atteignez un élément qui contient une infobulle, une information supplémentaire apparaît ou vous est restituée si vous utilisez un lecteur d’écran.</li>
<li>L'infobulle disparaît et n'est plus accessible lorsque vous quittez l’élément concerné ou lorsque vous appuyez sur la touche <kbd>ESC</kbd>.</li>
</ul>
</section>
<section id="accordion" class="article">
<h2>Accordéon</h2>
<p>Un accordéon est un couple titre/contenu qui reprend le modèle de consultation d'un système d'onglets. Le titre vous permet de rendre visible et accessible le contenu relié, et inversement. Plusieurs accordéons peuvent être présents, et ils peuvent être ouverts simultanément.</p>
<p>Un seul panneau peut être visible à la fois : quand un onglet est activé, les autres ne sont pas visibles.<p>
<p>Une fois que le contenu est rendu visible, la touche <kbd>TAB</kbd> vous permet d'atteindre le contenu du panneau sélectionné.</p>
<ul>
<li>Lorsque vous atteignez un accordéon ou un système d’accordéons, vous êtes placés sur le titre du premier accordéon.</li>
<li>Si vous utilisez un lecteur d’écran, lorsque vous atteignez un accordéon :
<ul>
<li>NVDA annonce « <i>Panneau 1, onglet 1 sur x</i> » ;</li>
<li><span lang="en">Jaws</span> annonce « <i>Panneau des onglets, onglet [nom], 1 sur x</i> » ; </li>
<li><span lang="en">VoiceOver</span> annonce « <i>[Nom] avec X éléments, tableau d'onglet</i> ».</li>
</ul>
</li>
<li>Quand vous êtes sur un titre d’accordéon, les touches <kbd>ENTRÉE</kbd> et <kbd>ESC</kbd> vous permettent de déployer (ou replier) son contenu.</li>
<li>Une fois que le contenu est rendu visible, la touche <kbd>TAB</kbd> vous permet d’atteindre les éléments interactifs du contenu.</li>
<li>Depuis un titre d’accordéon :
<ul>
<li>les touches <kbd>BAS</kbd> et <kbd>DROITE</kbd> vous permettent d’atteindre les titres suivants du système d’accordéons ;</li>
<li>les touches <kbd>HAUT</kbd> et <kbd>GAUCHE</kbd> vous permettent d’atteindre les titres précédents du système d’accordéons.</li>
</ul>
</li>
<li>Autres interactions au clavier (à ne documenter que si elles sont implémentées) :
<ul>
<li><kbd>CONTROL + HAUT</kbd> permet d'atteindre le titre de l'accordéon sélectionné ;</li>
<li><kbd>CONTROL + PAGE PRÉCÉDENTE</kbd>, depuis le contenu d'un panneau, permet d'atteindre le titre de l'accordéon précédent ;</li>
<li><kbd>CONTROL + PAGE SUIVANTE</kbd>, depuis le premier d'un panneau, permet d'atteindre le titre de l'accordéon ;</li>
<li><kbd>DÉBUT</kbd> permet d'atteindre le premier accordéon ;</li>
<li><kbd>FIN</kbd> permet d'atteindre le dernier accordéon ;</li>
</ul>
</li>
</ul>
</section>
<section id="menu" class="article">
<h2>Menu</h2>
<p>Un menu est un système particulier de menu de navigation. Contrairement à l’utilisation habituelle de la touche tabulation dans les menus de navigation, un composant riche de type menu emploie une association des flèches de direction et de la touche <kbd>ENTRÉE</kbd>.</p>
<ul>
<li>Si vous utilisez un lecteur d’écran, lorsque vous atteignez un menu :
<ul>
<li>NVDA annonce « <i>[Nom] sous-menu 1 sur X</i> », où X est le nombre d'entrées du menu ;</li>
<li><span lang="en">Jaws</span> annonce « <i>Barre de menu [nom]</i> » ; </li>
<li><span lang="en">VoiceOver</span> annonce « <i>Menu [nom] commande de menu</i> ».</li>
</ul>
</li>
<li>La touche <kbd>DROITE</kbd> vous permet d’atteindre les entrées suivantes de premier niveau du menu ;</li>
<li>La touche <kbd>GAUCHE</kbd> vous permet d’atteindre les entrées précédentes de premier niveau du menu ;</li>
<li>Les touches <kbd>HAUT</kbd> et <kbd>BAS</kbd> vous permettent de déployer le sous-menu (s'il existe) et d’atteindre les entrées de ce sous-menu ;</li>
<li>La touche <kbd>ENTRÉE</kbd> vous permet d’atteindre directement la première entrée d’un sous-menu (s'il existe) ;</li>
<li>La touche <kbd>ENTRÉE</kbd> vous permet d’activer les liens.</li>
<li>Autres interactions au clavier (à ne documenter que si elles sont implémentées) :
<ul>
<li><kbd>ESC</kbd> ferme le sous-menu affiché ;</li>
<li><kbd>LETTRE</kbd>, active l'entrée de sous-menu qui commence par la lettre tapée ;</li>
</ul>
</li>
</ul>
</section>
<section id="tree" class="article">
<h2>Arborescence</h2>
<p>Une arborescence fonctionne à la manière d’un système de dossier sur un ordinateur. Il s'agit d’une liste imbriquée d’éléments que l’on peut déployer ou replier.</p>
<ul>
<li>Si vous utilisez un lecteur d’écran, lorsque vous atteignez une arborescence :
<ul>
<li>NVDA annonce « <i>Arborescence, [nom] réduit niveau 1</i> » ;</li>
<li><span lang="en">Jaws</span> annonce « <i>Arborescence [nom] fermé sélectionné, 1 sur X</i> », où X est le nombre d'entrées de l'arborescence ;</li>
<li><span lang="en">VoiceOver</span> annonce « <i>Tableau</i> ».</li>
</ul>
</li>
<li>Les touches de direction vous permettent de naviguer entre les entrées actives (déployées) ;</li>
<li>La touche <kbd>DROIT</kbd> vous permet de déployer les sous-sections (si elles existent) d’une entrée ; </li>
<li>La touche <kbd>GAUCHE</kbd> vous permet de replier les sous-sections d’une entrée.</li>
</ul>
</section>
<section id="datepicker" class="article">
<h2>Calendrier</h2>
<p>Un calendrier est un système qui vous permet de sélectionner une date dans un ensemble de grilles organisées comme un calendrier.</p>
<ul>
<li>Si vous utilisez un lecteur d’écran, lorsque vous atteignez un calendrier :
<ul>
<li>NVDA annonce « <i>Date tableau éditable cadre de texte »</i> ;</li>
<li><span lang="en">Jaws</span> annonce « <i>[Nom] date <span lang="en">picker</span> région</i> » ;</li>
<li><span lang="en">VoiceOver</span> annonce <i>application x éléments</i>.</li>
</ul>
</li>
<li>La touche <kbd>HAUT</kbd> vous permet d’atteindre le même jour dans la semaine précédente ; </li>
<li>La touche <kbd>BAS</kbd> vous permet d’atteindre le même jour dans la semaine suivante ; </li>
<li>La touche <kbd>DROIT</kbd> vous permet d’atteindre le jour suivant ; </li>
<li>La touche <kbd>GAUCHE</kbd> vous permet d’atteindre le jour précédent ; </li>
<li>La touche <kbd>ESC</kbd> vous permet de fermer le calendrier s'il est ouvert dans une autre fenêtre ; </li>
<li>La touche <kbd>ENTRÉE</kbd> vous permet de valider la sélection en cours.</li>
<li>Autres interactions au clavier (à ne documenter que si elles sont implémentées) :
<ul>
<li><kbd>DÉBUT</kbd> sélectionne la première date du mois affiché ;</li>
<li><kbd>FIN</kbd>, sélectionne la dernière date du mois affiché ;</li>
<li><kbd>PAGE SUIVANTE</kbd>, passe au mois suivant ;</li>
<li><kbd>PAGE PRECEDENTE</kbd>, passe au mois précédent ;</li>
</ul>
</li>
</ul>
</section>
<section id="autocomplete" class="article">
<h2>Autocomplétion</h2>
<p>L’autocomplétion est disponible sur certains champs de texte de saisie. Le composant d’autocomplétion vous fournit des suggestions de saisie basées ou non sur les caractères que vous saisissez.</p>
<ul>
<li>Si vous utilisez un lecteur d’écran, lorsque vous atteignez un champ d’édition :
<ul>
<li>NVDA annonce « <i>éditable avec auto-complétion</i> » ;</li>
<li><span lang="en">Jaws</span> annonce « <i>[Nom] édition tapez le texte.</i> » ;</li>
<li><span lang="en">VoiceOver</span> n'implémente pas ce composant de façon satisfaisante. Il n'indique pas qu'une liste de proposition apparaît et qu'il faut en sélectionner une dans la liste.</li>
</ul>
</li>
<li>Les touches <kbd>HAUT</kbd> et <kbd>BAS</kbd> vous permettent de déplier la liste de choix et de naviguer dans les suggestions. À noter qu’à chaque fois que vous atteignez la fin de la liste des suggestions, vous retournez sur le champ de saisie.</li>
<li>La touche <kbd>ENTRÉE</kbd> vous permet de valider la suggestion sur laquelle vous êtes placés.</li>
</ul>
</section>
</main>
<footer>
<h2>Droits de reproduction</h2>
<div class="col-1-3">
<p>Ce document est placé sous <a href="https://www.etalab.gouv.fr/licence-ouverte-open-licence">licence ouverte 1.0 ou ultérieure</a>.</p>
<p class="clear">Vous êtes libres de :</p>
<ul>
<li>Reproduire, copier, publier et transmettre ces informations ;</li>
<li>Diffuser et redistribuer ces informations ;</li>
<li>Adapter, modifier, extraire et transformer ces informations, notamment pour créer des informations dérivées ;</li>
<li>Exploiter ces informations à titre commercial, par exemple en la combinant avec d’autres informations, ou en l’incluant dans votre propre produit ou application.</li>
</ul>
</div>
<div class="col-2-3">
<p>Ces libertés s'appliquent sous réserve de mentionner la paternité de l’information d’origine : sa source et la date de sa dernière mise à jour. Le réutilisateur peut notamment s'acquitter de cette condition en indiquant un ou des liens hypertextes (URL) renvoyant vers le présent site et assurant une mention effective de sa paternité.</p><p>Cette mention de paternité ne doit ni conférer un caractère officiel à la réutilisation de ces informations ni suggérer une quelconque reconnaissance ou caution par le producteur de l’information, ou par toute autre entité publique, du réutilisateur ou de sa réutilisation.</p>
</div>
<div class="col-3-3">
<img src="img/modernisation-logo.jpg" alt="Secrétariat général pour la modernisation de l’action publique" />
</div>
</footer>
</body>
</html>