forked from DISIC/guide-integrateur
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathetiquettes.html
160 lines (148 loc) · 7.41 KB
/
etiquettes.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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Formulaires - Étiquettes et champs obligatoires - 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/form.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 class="form">
<header role="banner" class="main-header">
<div class="inside">
<h1>Guide de l'intégrateur</h1>
<p><a href="../../6-formulaires.md">Revenir à la fiche pratique « Formulaires »</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">Formulaires - Étiquettes et champs obligatoires - Démonstrations</h2>
</section>
<article class="article" id="article1">
<h3>Étiquettes de champ de formulaires</h3>
<div class="clear str-site">
<div class="col-1-2">
<h4 class="right">Conforme : Relation <code>for id</code></h4>
<p><label for="prenom">Votre prénom</label>
<input type="text" id="prenom" /></p>
<pre class="col-2-3"><code class="code html"><label for="prenom">Votre prénom</label>
<input type="text" id="prenom" /></code></pre>
</div>
<div class="col-1-2">
<h4 class="wrong">Non conforme : Aucune relation <code>for id</code></h4>
<p><label>Votre prénom</label>
<input type="text" /></p>
<pre><code class="code html"><label>Votre prénom</label>
<input type="text" />
/**Il n'y aucune relation HTML entre le label et son champ.**/</code></pre>
</div>
</div>
<div class="clear str-site">
<div class="col-1-2">
<h4 class="right">Conforme : Labels implicites et relation <code>for id</code></h4>
<p><label for="prenom2">Votre prénom
<input type="text" id="prenom2" /></label></p>
<pre class="col-2-3"><code class="code html"><label for="prenom">Votre prénom
<input type="text" id="prenom" />
</label>
</code></pre>
</div>
<div class="col-1-2">
<h4 class="wrong">Non conforme : Labels implicites sans relation <code>for id</code></h4>
<p><label>Votre prénom
<input type="text" /></label></p>
<pre><code class="code html"><label>Votre prénom
<input type="text" />
</label>
/**Les labels implicites ne sont pas des labels conformes.**/</code></pre>
</div>
</div>
<div class="clear str-site">
<div class="col-1-2">
<h4 class="right">Conforme : Label dans l'attribut<code>title</code></h4>
<p><input type="text" title="Saisissez un mot clé à rechercher" />
<input type="submit" value="Rechercher" title="Rechercher dans le site" /></p>
<pre><code class="code html"><input type="text" title="Saisissez un mot clé à rechercher" />
<input type="submit" value="Rechercher" title="Rechercher dans le site" /></code></pre>
</div>
<div class="col-1-2">
<h4 class="wrong">Non conforme : Aucun label sur le champ de formulaire</h4>
<p><input type="text"/>
<input type="submit" value="Rechercher" title="Rechercher dans le site" /></p>
<pre><code class="code html"><input type="text"/>
<input type="submit" value="Rechercher" title="Rechercher dans le site" />
/**Le champ de saisie n'a aucune étiquette.**/</code></pre>
</div>
</div>
<div class="clear str-site">
<div class="col-1-2">
<h4 class="right">Conforme : Label via <code>aria-labelledby</code></h4>
<p><span class="label" id="sitename">Nom du site</span>
<input type="text" aria-labelledby="sitename" /></p>
<pre><code class="code html"><p id="sitename">Nom du site</p>
<input type="text" aria-labelledby="sitename" /></code></pre>
</div>
<div class="col-1-2">
<h4 class="wrong">Non conforme : Label via <code>aria-labelledby</code> et mauvais <code>id</code> référencé</h4>
<p> <span class="label" id="sitename">Nom du site</span>
<input type="text" aria-labelledby="site" /></p>
<pre><code class="code html"><p id="sitename">Nom du site</p>
<input type="text" aria-labelledby="site" />
/**L'identifiant référencé par la propriété aria-labelledby n'est pas le bon identifiant.**/</code></pre>
</div>
</div>
<div class="clear str-site">
<div class="col-1-2">
<h4 class="right">Conforme : Label via <code>aria-label</code></h4>
<p><span class="label">Nom du site</span>
<input type="text" aria-label="Nom du site" /></p>
<pre><code class="code html"><p>Nom du site</p>
<input type="text" aria-label="Nom du site" /></code></pre>
</div>
<div class="col-1-2">
<h4 class="wrong">Non conforme : Label via <code>aria-label</code> sans étiquette visible</h4>
<p class="hidden">Nom du site</p>
<p><input type="text" aria-label="Nom du site" /></p>
<pre><code class="code html"><p class="hidden">Nom du site</p>
<input type="text" aria-label="Nom du site" /></code><code class="code css">.hidden{
display:none;
}/**La propriété aria-label doit toujours être doublée d'une étiquette visible.
Ici l'étiquette est cachée.**/</code></pre>
</div>
</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>