-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
155 lines (139 loc) · 5.48 KB
/
index.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émonstrations - Guide de l'intégrateur - RGAA 3.0</title>
<link rel="stylesheet" href="../css/demo.css" media="screen">
<link rel="stylesheet" href="../css/liens.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="../../5-liens.md">Revenir à la fiche pratique « Liens »</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">Liens - Démonstrations</h2>
</section>
<article class="article" id="article1">
<div class="col-1-2">
<h3 class="right">Conforme : Liens mis en forme via CSS avec un texte positionné hors écran</h3>
<p><a href="#" class="btn home"><span class="sr">Accueil</span></a><a href="#" class="btn arrow"><span class="sr">Suivant</span></a></p>
<pre><code class="code html">
<a href="#" class="btn home">
<span class="sr">Accueil</span>
</a>
</code></pre>
<pre><code class="code css">
.sr{
position:absolute;
top:-10000px;
}
.home:before{
content:"";
display:inline-block;
background:url("../img/home.png") no-repeat center;
height:20px;
width:30px;
}
</code></pre>
</div>
<div class="col-1-2">
<h3 class="wrong">Non conforme : Liens mis en forme via CSS seulement (lien vide)</h3>
<p><a href="#" class="btn"><span class="icon"></span></a><a href="#" class="btn arrow"></a></p>
<pre><code class="code html">
<a href="#" class="btn home">
<span class="icon"></span>
</a>
</code></pre>
<pre><code class="code css">
.icon:before{
content:"";
display:inline-block;
background:url("../img/home.png") no-repeat center;
height:20px;
width:30px;
}
</code></pre>
</div>
</article>
<article class="article" id="article2">
<div class="col-1-2">
<h3 class="right">Conforme : Liens images avec une alternative</h3>
<p><a href="#" class="btn"><img src="../img/home.png" alt="Accueil"/></a></p>
<pre><code class="code html">
<a href="#" class="btn">
<img src="img/home.png" alt="Accueil" />
</a>
</code></pre>
</div>
<div class="col-1-2">
<h3 class="wrong">Non conforme : Liens image sans alternative (lien vide)</h3>
<p><a href="#" class="btn"><img src="../img/home.png"/></a></p>
<pre><code class="code html">
<a href="#" class="btn">
<img src="img/home.png"/>
</a>
</code></pre>
</div>
</article>
<article class="article" id="article3">
<div class="col-1-2">
<h3 class="right">Conforme : Liens composites (texte et image de décoration)</h3>
<p><a href="#" class="btn"><img src="../img/home.png" alt=""/> Accueil</a></p>
<pre><code class="code html">
<a href="#" class="btn">
<img src="img/home.png" alt="" />
Accueil
</a>
</code></pre>
</div>
<div class="col-1-2">
<h3 class="wrong">Non conforme : Liens composites (images avec une alternative non pertinente)</h3>
<p><a href="#" class="btn"><img src="../img/home.png" alt="home.png"/> Accueil</a></p>
<pre><code class="code html">
<a href="#" class="btn">
<img src="img/home.png" alt="home.png" />
Accueil
</a>
</code></pre>
</div>
</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>