-
Notifications
You must be signed in to change notification settings - Fork 2
/
5-tooltip.html
executable file
·137 lines (121 loc) · 7.41 KB
/
5-tooltip.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
<!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>Tooltip - 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" href="4-tabpanel.html"><span aria-hidden="true"> « </span> Tabpanel</a></li>
<li><a class="next" href="6-button.html">Button <span aria-hidden="true"> » </span></a></li>
</ul>
</nav>
<main id="main" role="main">
<h1 class="fiche-title">Tooltip</h1>
<article class="article">
<h2>Description</h2>
<div class="centre">
<img src="img/tooltip.jpg" alt="" />
</div>
<p>Ce composant permet d'afficher une infobulle sur l'activation d'un élément, par exemple un champ de formulaire.</p>
<h3>Restitution</h3>
<ul>
<li>Le contenu et vocalisé lorsque l'infobulle devient visible.</li>
</ul>
<h3>Interactions de base au clavier</h3>
<p>Les interactions au clavier sont :</p>
<ul>
<li>La touche <kbd>Échap</kbd> ferme l'infobulle.</li>
</ul>
<p><strong>Motif de conception</strong> : <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#tooltip" lang="en">Tooltip</a> (<span lang="en">WAI-ARIA Authoring Practices 1.1</span>)</p>
<h3><a href="http://disic.github.io/rgaa_composants_javascript/#tooltip">Exemple de <span lang="en">Tooltip</span></a></h3>
</article><article class="article"><h2>Test du <span lang="en">tooltip</span> avec JAWS</h2>
<ol><li>Utiliser la touche tabulation pour aller jusqu'au champ du mot de passe.</li>
<li>JAWS passe automatiquement en mode formulaire. Si ce n'est pas le cas, activer ce mode à l'aide de la touche <kbd>Entrée</kbd>.</li>
<li>Lorsqu'il arrive sur le champ « mot de passe », JAWS annonce : « édition du mot de passe, mot de passe, votre mot de passe doit contenir 8 caractères au moins. Tapez le texte ».</li>
</ol>
</article><article class="article"><h2>Test du <span lang="en">tooltip</span> avec NVDA</h2>
<ol>
<li>Utiliser la touche <kbd>Tabulation</kbd> pour aller jusqu'au champ du mot de passe.</li>
<li>NVDA passe automatiquement en mode formulaire. Si ce n'est pas le cas, activer ce mode à l'aide des touches <kbd>NVDA + Espace</kbd>.</li>
<li>Lorsqu'il arrive sur le champ « mot de passe », NVDA annonce : « mot de passe, édition protégé, votre mot de passe doit contenir 8 caractères au moins » et les instructions pour remplir un champ mot de passe.</li>
</ol>
<p><strong>Rappel</strong> : afin que l'infobulle soit annoncée par NVDA, il est nécessaire que la case à cocher « annoncer la description de l'objet » soit activée dans « Préférences > Présentation des objets ». Il est aussi nécessaire que le mode formulaire soit activé. Dans le cas contraire, l'infobulle ne sera pas vocalisée.</p>
</article><article class="article"><h2>Test du <span lang="en">tooltip</span> avec <span lang="en">VoiceOver</span></h2>
<ol><li>Utiliser la touche <kbd>Tabulation</kbd> pour aller jusqu'au champ du mot de passe.</li>
<li>Lorsqu'il arrive sur le champ « mot de passe », <span lang="en">VoiceOver</span> annonce : « modifiez le texte sécurisé avec le menu de remplissage automatique », puis « Votre mot de passe doit contenir 8 caractères au moins ».</li>
</ol>
<p><strong>Rappel</strong> : afin que l'infobulle soit annoncée par <span lang="en">VoiceOver</span>, il est nécessaire que la case à cocher « lire la bulle d'aide » soit activée dans « utilitaire <span lang="en">VoiceOver</span> », catégorie « Verbosité », onglet « indice ».</p> </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>