-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy path3-dialog.html
executable file
·196 lines (166 loc) · 9.63 KB
/
3-dialog.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
<!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>Dialog / Alert Dialog - 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="2-progressbar.html"><span aria-hidden="true"> « </span> Progressbar</a></li>
<li><a class="next" lang="en" href="4-tabpanel.html">Tabpanel <span aria-hidden="true"> » </span></a></li>
</ul>
</nav>
<main id="main" role="main">
<h1 class="fiche-title" lang="en">Dialog et Alert Dialog</h1>
<article class="article">
<h2>Description</h2>
<div class="centre">
<img src="img/dialog.jpg" alt="" />
</div>
<p>Ce composant permet d'afficher une fenêtre pour diffuser un message ou proposer une saisie à l'utilisateur, par exemple une fenêtre de connection, un message de confirmation.</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>Le contenu de la fenêtre doit être vocalisé automatiquement ou sur action de l'utilisateur lorsqu'il interagit avec le contenu.</li>
</ul>
<h3>Interactions de base au clavier</h3>
<p>Les interactions au clavier sont :</p>
<ul>
<li>La touche <kbd>Échap</kbd> ferme la fenêtre.</li>
</ul>
<p><strong>Motif de conception</strong> : <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal" lang="en">Dialog modal</a> (<span lang="en">WAI-ARIA Authoring Practices 1.1</span>)</p>
<h3><a href="http://disic.github.io/rgaa_composants_javascript/#dialog">Exemple de <span lang="en">Dialog /alertdialog</span></a></h3>
</article>
<article class="article">
<h2>Test de <span lang="en">dialog</span> avec JAWS</h2>
<h3>Étape 1</h3>
<p>
Utiliser la touche <kbd>Tabulation</kbd> pour positionner le curseur sur le bouton de déclenchement de la boîte de dialogue.
</p>
<p>JAWS annonce : « Bouton, Ouvrir la fenêtre d'alerte (alertdialog) ».</p>
<h3>Étape 2</h3>
<ol>
<li>Appuyer sur <kbd>Espace</kbd> ou <kbd>Entrée</kbd> pour activer le bouton.<br />JAWS annonce : « bouton ok, fermer ».</li>
<li>Tabuler jusqu'à ok.</li>
<li>Quitter la fenêtre à l'aide de la touche <kbd>Échap</kbd>.</li>
</ol>
<h3>Étape 3</h3>
<ol>
<li>Ouvrir la seconde fenêtre de dialogue.<br />
JAWS annonce : « bouton, ouvrir la fenêtre de dialog ».</li>
<li>On peut parcourir la liste des champs de formulaire et les remplir.</li>
<li>Quitter la fenêtre à l'aide de la touche <kbd>Échap</kbd>.</li>
</ol>
</article>
<article class="article">
<h2>Test de <span lang="en">dialog</span> avec NVDA</h2>
<h3>Étape 1</h3>
<p>Utiliser la touche tabulation pour positionner le curseur sur le bouton de déclenchement de la boîte de dialogue.</p>
<h3>Étape 2</h3>
<ol>
<li>Appuyer sur <kbd>Espace</kbd> pour activer le bouton. NVDA annonce : « confirmation dialogue ».</li>
<li>Tabuler jusqu'à ok.</li>
<li>Quitter la fenêtre à l'aide de la touche <kbd>Échap</kbd>.</li>
</ol>
<h3>Étape 3</h3>
<ol>
<li>Ouvrir la seconde fenêtre de dialogue.</li>
<li>NVDA active le mode formulaire et annonce : « formulaire de connexion dialogue, utilisateur édition ».</li>
<li>On peut parcourir la liste des champs de formulaire et les remplir.</li>
<li>Quitter la fenêtre à l'aide de la touche <kbd>Échap</kbd>.</li>
</ol>
</article>
<article class="article">
<h2>Test de <span lang="en">dialog</span> avec <span lang="en">VoiceOver</span></h2>
<h3>Étape 1</h3>
<p>
Utiliser la touche <kbd>Tabulation</kbd> pour positionner le curseur sur le bouton de déclenchement de la boîte de dialogue.</p>
<p><span lang="en">VoiceOver</span> annonce : « Ouvrir la fenêtre d'alerte dialogue bouton. Vous êtes actuellement sur bouton,pour cliquer ce bouton, appuyez sur Ctrl + Option + Espace. »
</p>
<h3>Étape 2</h3>
<ol>
<li>Appuyer sur <kbd>VO + Espace</kbd> pour activer le bouton.<br /><span lang="en">VoiceOver</span> annonce : « appuyé, ouvrir la fenêtre d'alerte. Confirmation boîte de dialogue alerte web avec 3 éléments. OK bouton, fermer. » Il s'agit du bouton OK qui a pour titre fermer. <br/>
<span lang="en">VoiceOver</span> positionne son curseur sur le bouton ok. Il ne lit pas le contenu de toute la boîte de dialogue. Pour en prendre connaissance, se déplacer avec les touches <kbd>VO + flèches droite et gauche</kbd>. <span lang="en">VoiceOver</span> lira « confirmation », puis « votre demande a bien été prise en compte », puis le bouton ok.</li>
<li>Tabuler jusqu'à ok.</li>
<li>Quitter la fenêtre à l'aide de la touche <kbd>Échap</kbd>.</li>
</ol>
<h3>Étape 3</h3>
<ol>
<li>Ouvrir la seconde fenêtre de dialogue en appuyant sur <kbd>VO + Espace</kbd>.</li>
<li><span lang="en">VoiceOver</span> annonce : « ouvrir la fenêtre de dialogue, dialogue bouton. Dialogue web avec 6 éléments. Utilisateur, modifier le texte. Rappel : votre nom d'utilisateur et votre mot de passe vous ont été fournis par email. Vous êtes actuellement sur champ de texte, tapez pour saisir du texte dans ce champ. ». <br />Les éléments précédents, « formulaire de connexion », ne sont pas lus. Pour les lire, utiliser les touches <kbd>VO + flèches droite ou gauche</kbd>. Lorsqu'on se déplace vers le champ du mot de passe, <span lang="en">VoiceOver</span> explique qu'il ne vocalise pas les caractères tapés puisqu'il s'agit d'un champ sécurisé et comment remplir le champ.</li>
<li>Quitter la fenêtre à l'aide de la touche <kbd>Échap</kbd>.</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>