-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathaccess-rapide.html
155 lines (144 loc) · 8.25 KB
/
access-rapide.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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Liens d'accès rapide - Démonstrations -Guide de l'intégrateur - RGAA 3.0</title>
<link rel="stylesheet" href="../css/demo.css" media="screen">
<link rel="stylesheet" href="../css/navigation.css" media="screen">
<script src="../../js/highlight.pack.js"></script>
<link rel="stylesheet" href="../../css/tomorrow-night-eighties.css" media="screen">
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<header role="banner" class="main-header">
<div class="inside">
<h1>Guide de l'intégrateur</h1>
<p><a href="../../2-navigation.md">Revenir à la fiche pratique « Navigation »</a></p>
</div>
</header>
<div id="wrapper">
<nav role="navigation" class="nav-demo" id="nav">
<h2>Listes des démonstrations</h2>
<ul>
<li class="level"><span>Navigation</span>
<ul>
<li><a href="../2-navigation/access-rapide.html">Liens d'accès rapide</a></li>
<li><a href="../2-navigation/collection.html">Collection de pages</a></li>
<li><a href="../2-navigation/page-active.html">Indication de la page active</a></li>
</ul>
</li>
<li><a href="../5-liens/index.html">Liens</a></li>
<li class="level"><span>Formulaires</span>
<ul>
<li><a href="../6-formulaires/etiquettes.html">Étiquettes de champs</a></li>
<li><a href="../6-formulaires/aides-controles-saisie.html">Aides à la saisie</a></li>
<li><a href="../6-formulaires/regroupement.html">Regroupement de champs</a></li>
</ul>
</li>
<li><a href="../7-focus/index.html">Focus</a></li>
<li><a href="../9-images/index.html">Images</a></li>
<li><a href="../11-agrandissement-des-caracteres/index.html">Agrandissement des caractères</a></li>
</ul>
</nav>
<main role="main" id="main">
<section>
<h2 class="fiche-title">Navigation - Liens d'accès rapide - Démonstrations</h2>
</section>
<article class="article" id="article1">
<h3 class="right">Conforme : Des liens d'accès rapide cachés visibles à la prise de focus.</h3>
<p><a href="#str-rapide-1">Cliquez sur ce lien pour placer votre focus, puis tabulez pour voir apparaître les liens d'accès rapide.</a></p>
<div class="str-site col-2-3" id="str-rapide-1">
<ul class="str-liens-1">
<li><a href="#str-contenu-1">Contenu</a></li>
<li><a href="#str-menu-1">Menu</a></li>
</ul>
<nav role="navigation" id="str-menu-1">
<ul>
<li><a href="#">Fusce placerat tincidun</a></li>
<li><a href="#">Vestibulum et enim lobortis</a></li>
<li><a href="#">Etiam quam mi</a></li>
<li><a href="#">Maecenas sem nisi</a></li>
<ul>
</nav>
<main role="main" id="str-contenu-1">
<h4>Contenu principal</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida risus id fermentum pellentesque. Maecenas sem nisi, facilisis vitae congue ac, dignissim vel diam. Aliquam fermentum non lorem in varius. Vivamus pulvinar massa leo, ut lacinia sem suscipit sit amet. Fusce placerat tincidunt convallis. Nullam in massa eu ipsum posuere cursus. Etiam id ligula massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum et enim lobortis, lobortis justo quis, sodales ante. Phasellus dapibus elit ex. <a href="#">Aliquam erat volutpat</a>. Donec blandit mi ac justo consectetur tempor. Etiam quam mi, blandit ac turpis vel, tincidunt convallis dolor. Nunc ullamcorper placerat quam in pulvinar. Curabitur tempor ultrices dui sit amet volutpat. </p>
</main>
</div>
<pre class="col-1-3"><code class="code css">a{
position:absolute;
top:-10000px;
}
a:focus{
top:0;
}</code></pre>
</article>
<article class="article" id="article2">
<h3 class="right">Conforme : Des liens d'accès rapide toujours visibles.</h3>
<p><a href="#str-rapide-2">Cliquez sur ce lien pour placer votre focus, puis tabulez sur les liens.</a></p>
<div class="str-site col-2-3" id="str-rapide-2">
<ul class="str-liens-2">
<li><a href="#str-contenu-2">Contenu</a></li>
<li><a href="#str-menu-2">Menu</a></li>
</ul>
<nav role="navigation" id="str-menu-2">
<ul>
<li><a href="#">Fusce placerat tincidun</a></li>
<li><a href="#">Vestibulum et enim lobortis</a></li>
<li><a href="#">Etiam quam mi</a></li>
<li><a href="#">Maecenas sem nisi</a></li>
<ul>
</nav>
<main role="main" id="str-contenu-2">
<h4>Contenu principal</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida risus id fermentum pellentesque. Maecenas sem nisi, facilisis vitae congue ac, dignissim vel diam. Aliquam fermentum non lorem in varius. Vivamus pulvinar massa leo, ut lacinia sem suscipit sit amet. Fusce placerat tincidunt convallis. Nullam in massa eu ipsum posuere cursus. Etiam id ligula massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum et enim lobortis, lobortis justo quis, sodales ante. Phasellus dapibus elit ex. <a href="#">Aliquam erat volutpat</a>. Donec blandit mi ac justo consectetur tempor. Etiam quam mi, blandit ac turpis vel, tincidunt convallis dolor. Nunc ullamcorper placerat quam in pulvinar. Curabitur tempor ultrices dui sit amet volutpat. </p>
</main>
</div>
<pre class="col-1-3"><code class="code css">a{
position:static;
top:-10000px;
}
/**pas de positionnement particulier,
les liens restent dans le flux normal
des éléments HTML**/</code></pre>
</article>
<article class="article" id="article3">
<h3 class="wrong">Non conforme : Des liens d'accès rapide cachés et inaccessibles</h3>
<p><a href="#str-rapide-3">Cliquez sur ce lien pour placer votre focus, puis tabulez sur les liens. Les liens d'accès rapide n'apparaissent jamais.</a></p>
<div class="str-site col-2-3" id="str-rapide-3">
<ul class="str-liens-3">
<li><a href="#str-contenu-3">Contenu</a></li>
<li><a href="#str-menu-3">Menu</a></li>
</ul>
<nav role="navigation" id="str-menu-3">
<ul>
<li><a href="#">Fusce placerat tincidun</a></li>
<li><a href="#">Vestibulum et enim lobortis</a></li>
<li><a href="#">Etiam quam mi</a></li>
<li><a href="#">Maecenas sem nisi</a></li>
<ul>
</nav>
<main role="main" id="str-contenu-3">
<h4>Contenu principal</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida risus id fermentum pellentesque. Maecenas sem nisi, facilisis vitae congue ac, dignissim vel diam. Aliquam fermentum non lorem in varius. Vivamus pulvinar massa leo, ut lacinia sem suscipit sit amet. Fusce placerat tincidunt convallis. Nullam in massa eu ipsum posuere cursus. Etiam id ligula massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum et enim lobortis, lobortis justo quis, sodales ante. Phasellus dapibus elit ex. <a href="#">Aliquam erat volutpat</a>. Donec blandit mi ac justo consectetur tempor. Etiam quam mi, blandit ac turpis vel, tincidunt convallis dolor. Nunc ullamcorper placerat quam in pulvinar. Curabitur tempor ultrices dui sit amet volutpat. </p>
</main>
</div>
<pre class="col-1-3"><code class="code css">a{
display:none;
}
a:focus{
display:block;
/** le focus ne pourra jamais être pris,
le lien est caché par la propriété
display:none **/
}</code></pre>
</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>
</body>
</html>