-
Notifications
You must be signed in to change notification settings - Fork 2
/
composants.html
executable file
·146 lines (125 loc) · 7.21 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
<!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>Tester des composants ARIA avec un lecteur d'écran - 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="voiceover.html"><span aria-hidden="true"> « </span> Installation et configuration de VoiceOver</a></li>
<li><a class="next" href="1-slider.html">Slider <span aria-hidden="true"> » </span></a></li>
</ul>
</nav>
<main id="main" role="main">
<h1 class="fiche-title">Tester des composants ARIA avec un lecteur d'écran</h1>
<article class="article">
<h2 id="intro">En préambule</h2>
<p>Ce chapitre vous explique pas à pas comment tester les différents composants ARIA avec un lecteur d'écran.</p>
<p>Pour que ces composants, développés avec JavaScript, soient accessibles, il est nécessaire qu'ils implémentent complètement les motifs de conception décrits par l'API ARIA.</p>
<p>Néanmoins, un composant conforme au motif de conception peut poser des problèmes lorsqu'il interagit avec les technologies d'assistance, les lecteurs d'écrans notamment. C'est la raison pour laquelle le RGAA demande que la restitution de ces composants et leurs interactions soient testées avec les lecteurs d'écran de la base de référence.</p>
<p>Pour chacun des composants, nous expliquerons comment utiliser les trois lecteurs d'écran pour réaliser les tests. Nous illustrerons ces explications par des exemples concrets issus de la <a href="http://disic.github.io/rgaa_composants_javascript/">Bibliothèque de référence des composants ARIA</a> pour le RGAA.</p>
<p><strong>Note :</strong> le RGAA demande de tester uniquement les interactions de base, c'est-à-dire celles qui réfèrent aux touches <kbd>Échap</kbd>, <kbd>Espace</kbd>, <kbd>Entrée</kbd>, <kbd>Tabulation</kbd>, <kbd>flèches de direction</kbd>. Rien ne vous empêche en complément de tester les interactions riches telles qu'elles sont définies par les motifs de conception.</p>
</article>
<article class="article">
<h2 id="composants">Test des composants</h2>
<h3>Liste des composants testés</h3>
<ul>
<li>Slider</li>
<li>Progressbar</li>
<li>Dialog</li>
<li>Tabpanel</li>
<li>Tooltip</li>
<li>Button</li>
<li>Checkbox</li>
<li>Menubar</li>
<li>Accordeon</li>
<li>Tree</li>
<li>Datepicker</li>
<li>Autocomplete</li>
</ul>
<p>La présentation de chaque composant utilisera le même modèle : après une présentation générique du composant tel qu'il doit être vu et manipulé par l'utilisateur (restitution et utilisation au clavier), les démonstrations utiliseront des exemples issus de la bibliothèque de tests du RGAA ou d'exemples extérieurs.</p>
<ul>
<li>Restitution</li>
<li>Interactions de base au clavier</li>
<li>Test du composant avec JAWS</li>
<li>Test du composant avec NVDA</li>
<li>Test du composant avec VoiceOver</li>
</ul>
</article>
<article class="article">
<h2 id="restitution">Restitution des lecteurs d'écran</h2>
<p>La restitution des lecteurs d'écran peut varier en fonction de vos réglages et de la version utilisée lors des tests. Les exemples de restitution des composants sont donnés à titre indicatif.</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>