a11y-demos/demo-code-form-help.html at master · AgenceStratis/a11y-demos · GitHub

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
<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemples de codes : aide de saisie - Démonstrations en accessibilité - Stratis</title>
    <link rel="icon" type="image/gif" href="favicon.ico"/>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href="css/github.css">
    <link rel="stylesheet" href="css/screen.css">
    <!-- highlight -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
</head>
<body>

<header role="banner">
    <h1 id="heading"><a href="#heading">§</a> Exemples de codes : aide de saisie</h1>
</header>

<div class="wrap">
    <pre><code>&lt;div class=&quot;field-wrap&quot;&gt;
    &lt;label for=&quot;edit-email&quot;&gt;Courriel (prenom.nom@domain.com)&lt;/label&gt;
    &lt;input type=&quot;text&quot; id=&quot;edit-email&quot; autocomplete=&quot;email&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;field-wrap&quot;&gt;
    &lt;label for=&quot;edit-pwd&quot;&gt;Mot de passe&lt;/label&gt;
    &lt;input type=&quot;text&quot; id=&quot;edit-pwd&quot; autocomplete=&quot;new-password&quot; aria-describedby=&quot;pwd-aide&quot;&gt;
    &lt;p id=&quot;pwd-aide&quot;&gt;Le mot de passe doit contenir au moins 8 caract&egrave;res, 1 majuscule, 1 minuscule, 1
        chiffre et 1 caract&egrave;re sp&eacute;cial.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;field-wrap&quot;&gt;
    &lt;label for=&quot;edit-pwd2&quot; id=&quot;edit-label-secu&quot;&gt;Num&eacute;ro de s&eacute;curit&eacute; sociale&lt;/label&gt;
    &lt;input type=&quot;text&quot; id=&quot;edit-pwd2&quot; aria-labelledby=&quot;edit-label-secu pwd-aide2&quot;&gt;
    &lt;p id=&quot;pwd-aide2&quot;&gt;13 chiffres&lt;/p&gt;
&lt;/div&gt;</code></pre>
    <div class="demo">
        <div class="field-wrap">
            <label for="edit-email">Courriel (prenom.nom@domain.com)</label>
            <input type="text" id="edit-email" autocomplete="email">
        </div>
        <div class="field-wrap">
            <label for="edit-pwd">Mot de passe</label>
            <input type="text" id="edit-pwd" autocomplete="new-password" aria-describedby="pwd-aide">
            <p id="pwd-aide">Le mot de passe doit contenir au moins 8 caractères, 1 majuscule, 1 minuscule, 1
                chiffre et 1 caractère spécial.</p>
        </div>
        <div class="field-wrap">
            <label for="edit-pwd2" id="edit-label-secu">Numéro de sécurité sociale</label>
            <input type="text" id="edit-pwd2" aria-labelledby="edit-label-secu pwd-aide2">
            <p id="pwd-aide2">13 chiffres</p>
        </div>
    </div>
</div>
</body>
</html>