-
Notifications
You must be signed in to change notification settings - Fork 5
/
4-navigation.html
executable file
·230 lines (214 loc) · 17.2 KB
/
4-navigation.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
<!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>Fiche 4 : Navigation - Guide du concepteur RGAA 3</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">
<script type="text/javascript" src="highlight/highlight.pack.js"></script>
<link rel="stylesheet" href="highlight/styles/tomorrow-night-eighties.css" media="all">
<script>hljs.initHighlightingOnLoad();</script>
</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 du concepteur RGAA 3</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">Introduction</a></li>
<li>
<a href="conception-fonctionnelle.html">Conception fonctionnelle</a>
<ul>
<li><a href="1-images.html">Fiche 1 : Images</a></li>
<li><a href="2-tableaux.html">Fiche 2 : Tableaux</a></li>
<li><a href="3-formulaires.html">Fiche 3 : Formulaires</a></li>
<li><a href="4-navigation.html">Fiche 4 : Navigation</a></li>
<li><a href="5-consultation.html">Fiche 5 : Consultation</a></li>
</ul>
</li>
<li>
<a href="conception-graphique.html">Conception graphique</a>
<ul>
<li><a href="6-couleurs.html">Fiche 6 : Couleurs</a></li>
<li><a href="7-presentation.html">Fiche 7 : Présentation</a></li>
</ul>
</li>
<li>
<a href="conception-multimedia.html">Conception multimédia</a>
<ul>
<li><a href="8-multimedia.html">Fiche 8 : Multimédia</a></li>
</ul>
</li>
<li><a href="glossaire.html">Glossaire</a></li>
</ul>
</nav>
<div class="github-link">
<p><a href="https://github.com/DISIC/guide-concepteur">Contribuer</a>
<a class="pdfdown" title="Télécharger le Guide du concepteur RGAA 3 (pdf, 1,6 Mo)" href="export/guide-concepteurs.pdf">Télécharger</a></p>
</div>
</div>
</div>
<div id="wrapper">
<nav role="navigation" class="internav clear">
<ul>
<li><a class="prev" href="3-formulaires.html"><span aria-hidden="true"> « </span>Fiche 3 : Formulaires </a></li>
<li><a class="next" href="5-consultation.html">Fiche 5 : Consultation <span aria-hidden="true"> » </span></a></li>
</ul>
</nav>
<main id="main" role="main">
<h1 class="fiche-title">Fiche 4 : Navigation</h1>
<div class="bloc-haut">
<ul class="nav-context">
<li><a href="#introduction">Introduction - cas utilisateurs</a></li>
<li><a href="#liensrapides">Liens d’accès rapide</a></li>
<li><a href="#deuxsystemesnavigation">Deux systèmes de navigation au moins</a></li>
<li><a href="#plandusite">Plan du site</a></li>
<li><a href="#collectionpages">Collection de pages</a></li>
<li><a href="#encoursdeconsultation">Page en cours de consultation dans le menu</a></li>
<li><a href="#fildariane">Fil d’Ariane</a></li>
<li><a href="#ailleurs">Voir ailleurs / Ressources</a></li>
<li><a href="#criteres">Critères RGAA</a></li>
</ul>
<aside role="complementary" class="clear resume">
<h2 id="resume">Synthèse</h2>
<ul>
<li>Prévoir un lien d’accès rapide au contenu.</li>
<li>Prévoir un lien d’accès rapide à la navigation principale si nécessaire.</li>
<li>Prévoir des liens d’accès rapide pour tous les groupes de liens importants.</li>
<li>Prévoir deux systèmes de navigation au moins.</li>
<li>Prévoir des liens facilitant la navigation dans les collections de pages.</li>
</ul>
</aside>
</div>
<article class="article" id="introduction">
<h2>Introduction - cas utilisateurs</h2>
<p>Vous devez fournir aux utilisateurs au moins deux systèmes de navigation afin de couvrir un plus large spectre de stratégies de navigation dans les contenus du site. En effet, tous les utilisateurs ne naviguent pas de la même manière et certains systèmes de navigation peuvent s’avérer trop complexes à utiliser. Par exemple, un menu de navigation trop riche, comme un méga-menu, peut nécessiter beaucoup d’actions pour un utilisateur qui ne navigue qu’au clavier et donc rendre sa recherche d’information laborieuse. Proposer un second système permet d’aider ces utilisateurs qui ont des stratégies de navigation différentes.</p>
<p>Certains utilisateurs peuvent avoir des difficultés à atteindre la zone de contenu principal. Par exemple : les utilisateurs malvoyants qui utilisent une loupe d’écran ne voient pas la page dans sa globalité. Il peut être laborieux pour ces utilisateurs de devoir scroller tous les éléments communs des pages d’un site (l’en-tête, la navigation) pour atteindre le contenu principal à chaque fois. De même, les utilisateurs aveugles qui ont une lecture linéaire de la page doivent parcourir tous les éléments redondants (titre principal, navigation, etc.) avant d’atteindre le contenu principal.</p>
<p>Les utilisateurs qui ne peuvent pas utiliser de souris ou un système de navigation adapté restent néanmoins ceux qui rencontrent le plus de difficultés. Pour ces utilisateurs, la zone de contenu principal, comme tous les autres éléments du site ne peut être atteinte qu’avec la tabulation, ce qui peut être particulièrement laborieux.</p>
<p>Les liens d’accès rapide en début de contenu leur permettent de réduire considérablement leur temps de consultation, ils peuvent directement atteindre la zone de contenu principal.</p>
</article>
<article class="article" id="liensrapides">
<h2>Liens d’accès rapide</h2>
<p>Vous devez fournir aux utilisateurs des liens d’accès rapide (également appelés liens d’évitement). Les liens d’accès rapide sont des ancres vers certains éléments de la page. Sans ces liens d’accès rapide, les utilisateurs tétraplégiques doivent faire des centaines et des centaines de tabulations pour atteindre un élément de la page. C’est pourquoi ce critère RGAA est non négociable.</p>
<p>Ainsi sur votre site, vous devez implémenter :</p>
<ul>
<li>un lien qui permet d’accéder à la zone de contenu principale ;</li>
<li>un lien qui permet d’accéder à chaque groupe de liens importants (par exemple la navigation).</li>
</ul>
<p>Note : le lien d’accès à la zone de contenu principale devrait toujours être présent. En revanche, le lien d’accès à la navigation principale n’est utile que s’il y a beaucoup de contenus tabulables avant le menu de navigation principal. Quand ce n’est pas le cas, le lien d’accès à la navigation principale n’est pas forcément utile.</p>
<p>Ces liens d’accès rapide doivent de préférence toujours être visibles. En effet, ils sont utiles aux utilisateurs aveugles, aux utilisateurs qui naviguent au clavier, mais également aux utilisateurs malvoyants qui utilisent une loupe d’écran. Ces derniers naviguent à la souris et si ces liens sont positionnés hors écran, il leur est impossible de les utiliser.</p>
<p>Bien qu’il soit préférable que ces liens soient toujours visibles, vous pouvez indiquer à votre équipe d’intégrateurs que ces liens doivent être rendus accessibles à la prise de focus (cf. <a href="https://disic.github.io/guide-integrateur/2-navigation.html#liesnrapide">Liens d’accès rapides dans le Guide de l’intégrateur RGAA 3</a>).</p>
<p>Pour qu’ils soient efficaces, les liens d’accès rapide au contenu et à la navigation doivent être positionnés en début de code et en haut de page. En faire les premiers liens du code de votre page est la meilleure solution.</p>
<p class="important"><strong>Important :</strong> ces liens doivent toujours être situés à la même place dans la présentation. De plus, afin que les utilisateurs aveugles, qui ont une lecture linéaire de votre site, puissent s’y retrouver, ces liens doivent toujours être dans le même ordre dans le code source.</p>
<p><a href="https://disic.github.io/guide-integrateur/demo/2-navigation/access-rapide.html">Page de démonstration des cas d’implémentation des liens d’accès rapide</a></p>
</article>
<article class="article" id="deuxsystemesnavigation">
<h2>Deux systèmes de navigation au moins</h2>
<p>Un site web doit proposer deux systèmes de navigation au moins, parmi :</p>
<ul>
<li>une navigation principale ;</li>
<li>un moteur de recherche ;</li>
<li>un plan du site.</li>
</ul>
<p>Pour que le moteur de recherche puisse être considéré comme un élément de navigation, il doit indexer <b>toutes</b> les pages du site. Ainsi, un moteur de recherche dans un catalogue qui ne permet pas de trouver la page des mentions légales du site n’est pas considéré comme un moteur de recherche. Le moteur de recherche doit également être atteignable de manière identique depuis chaque ensemble de pages.</p>
<p>Le plan du site quant à lui doit être représentatif de la structure générale du site. Il n’est pas demandé que soient référencées toutes les pages du site, mais seulement les pages menant aux rubriques principales. Par exemple, si le site dispose d’une rubrique « Actualités », il n’est pas nécessaire d’y faire figurer toutes les actualités publiées.</p>
<p>Il existe des cas particuliers pour lesquels cette recommandation est non applicable :</p>
<ul>
<li>un site composé d’un faible nombre de pages (deux à trois pages) peut ne fournir qu’un menu de navigation menant vers ces pages, le menu étant alors identique au plan du site ;</li>
<li>un site monopage (« <span lang="en">Single Page Application</span> ») peut ne fournir que des liens d’accès rapide aux différentes sections de la page, la fonction de recherche du navigateur (<kbd>Ctrl F</kbd>) permettant de chercher dans tout le contenu du site.</li>
</ul>
<h3>Ordre cohérent et présentation cohérente</h3>
<p>Chaque système de navigation doit avoir sur chaque ensemble de pages un ordre et une présentation cohérente :</p>
<ul>
<li>le système de navigation est accessible depuis une fonctionnalité identique (par exemple, pour le plan du site, la fonctionnalité est un lien ayant pour intitulé « Plan du site ») ;</li>
<li>la fonctionnalité est située à la même place dans la présentation (par exemple, le lien vers le plan du site est toujours situé en haut à gauche sur la page) ;</li>
<li>la fonctionnalité est toujours dans le même ordre relatif dans le code source (par exemple, le lien vers le plan du site est toujours le premier élément texte et le premier lien de la page).</li>
</ul>
</article>
<article class="article" id="plandusite">
<h2>Plan du site</h2>
<p>Le plan du site n’est pas obligatoire, il fait partie des trois systèmes de navigation reconnus.</p>
<p> Si vous intégrez un plan de site, vous devrez vous assurer que tous les liens qui y sont listés sont pertinents et fonctionnels. <a href="https://validator.w3.org/checklink">Vous pouvez utiliser l’outil de validation des liens du W3C</a> pour vous en assurer.</p>
<p>Vous devrez également vous assurer que le plan du site est atteignable de la même façon depuis chaque ensemble de pages.</p>
</article>
<article class="article" id="collectionpages">
<h2>Collection de pages</h2>
<p>Une collection de pages est un ensemble de pages reliées les unes aux autres par des liens et ayant un thème ou une nature commune. Par exemple, les pages de résultats d’un moteur de recherche ou les pages d’un catalogue sont des collections de pages.</p>
<p>Pour les pages d’une collection de pages, vous devez mettre à disposition de l’utilisateur :</p>
<ul>
<li>un lien permettant d’accéder à la page suivante ;</li>
<li>un lien permettant d’accéder à la page précédente ;</li>
<li>des liens permettant d’accéder à toutes les pages de la collection.</li>
</ul>
<figure>
<img src="img/collection-pages.jpg" alt="" />
<figcaption>Collection de pages issue du site <a href="https://www.service-public.fr/particuliers/recherche?keyword=test&rubricFilter=fichePratique&page=2">Service-public.fr</a></figcaption>
</figure>
<p>Lorsque le nombre de pages est très important, il est illusoire de vouloir mettre un lien vers chaque page. Dans ce cas, il est acceptable de présenter les liens par groupe de 10 liens par exemple (« 20-30 »).</p>
<p>D’autres systèmes permettant d’atteindre une page quelconque d’une collection de pages peuvent être utilisés comme un champ de formulaire ou une liste de sélection.</p>
<p><a href="https://disic.github.io/guide-integrateur/demo/2-navigation/collection.html">Page de démonstration des cas d’implémentation de la navigation dans les collections de pages</a></p>
</article>
<article class="article" id="encoursdeconsultation">
<h2>Page en cours de consultation dans le menu</h2>
<p>Indiquer la page en cours de consultation aux utilisateurs permet de leur donner des points de repère quant à leur localisation dans le site.</p>
<p>Note : cette recommandation est de niveau AAA, elle n’est donc pas obligatoire.</p>
<p>Attention : lorsque vous indiquez la page en cours dans le menu de navigation, ne véhiculez pas cette information uniquement par la couleur et/ou par la forme. Par exemple, si vous décidez de modifier la couleur d’arrière-plan du lien actif, n’oubliez pas de prévoir un titre (<code lang="en">title</code>) sur le lien, sur le modèle « [Titre de la page] en cours de consultation ». Communiquez cette demande aux équipes techniques en charge de l’intégration du site.</p>
<p>La meilleure des implémentations consiste à couvrir la plus grande part d’utilisateurs, et donc :</p>
<ul>
<li>utiliser une couleur de fond pour signifier la page active ;</li>
<li>utiliser une forme adjacente au lien, par exemple une icône (pour les utilisateurs qui perçoivent mal ou pas les contrastes de couleurs) ;</li>
<li>ajouter un <code lang="en">title</code> sur le lien de la page active (pour les utilisateurs aveugles ou les utilisateurs qui utilisent des feuilles de styles utilisateurs).</li>
</ul>
<p><a href="https://disic.github.io/guide-integrateur/demo/2-navigation/page-active.html">Page de démonstration pour la mise en évidence de la page active dans le menu de navigation</a></p>
</article>
<article class="article" id="fildariane">
<h2>Fil d’Ariane</h2>
<p>Un fil d’Ariane est un moyen de navigation rapide et un repère dans le site : il doit permettre à l’utilisateur de s’orienter dans le site web.</p>
<p>Note : cette recommandation est de niveau AAA, elle n’est donc pas obligatoire. L’absence d’un fil d’Ariane a un impact limité. Toutefois, c’est un outil qui peut faciliter la navigation des aveugles et grands malvoyants, ainsi que des handicapés mentaux ou cognitifs.</p>
<p>S’il est prévu, le fil d’Ariane doit donc être représentatif de la position de la page dans l’arborescence du site. Par exemple, les pages parentes doivent y être représentées.</p>
</article>
</main>
<aside role="complementary" id="footer-block" class="clear">
<div class="col-1-2">
<h2 id="ailleurs">Voir ailleurs / Ressources</h2>
<ul>
<li><a href="https://disic.github.io/guide-impacts_utilisateurs/navigation.html">Impacts utilisateurs des défauts d’accessibilité de la navigation</a></li>
</ul>
</div>
<div class="col-1-2">
<h2 id="criteres">Critères RGAA 3</h2>
<ul>
<li>12.1 [AA]</li>
<li>12.2 [AA]</li>
<li>12.3 [AA]</li>
<li>12.4 [AA]</li>
<li>12.5 [AA]</li>
<li>12.6 [AA]</li>
<li>12.7 [AA]</li>
<li>12.8 [AAA]</li>
<li>12.9 [AAA]</li>
<li>12.11 [A]</li>
<li>12.12 [AAA]</li>
</ul>
</div>
</aside>
<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 type="text/javascript" src="js/script.js"></script>
</body>
</html>