a11y-demos/role-elements-composites.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
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
<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Exemples d'éléments composites - Démonstrations en accessibilité - Stratis</title>
    <link rel="icon" type="image/gif" href="favicon.ico"/>
    <link rel="stylesheet" href="css/github.css">
    <link rel="stylesheet" href="css/knacss.css">
    <link rel="stylesheet" href="css/screen.css">
    <link rel="stylesheet" href="css/demo.css">
</head>
<body>
<a href="index.html">Retour à l'accueil</a><br/>
<a href="demo-sr.html">Retour au sommaire</a><br/>

<div class="stand-alone interactive">
    <header role="banner">
        <h1>Exemples d'éléments composites</h1>
    </header>
    <main>
        <section class="wrap">
            <h2>Menu</h2>
            <div class="grid grid-cols-2 has-gutter">
                <div>
                    <h3>Je suis un vrai menu</h3>
                    <ul role="menu">
                        <li role="presentation"><a href="javascript:void(0)" role="menuitem">Page 1</a>
                            <ul role="menu">
                                <li role="presentation"><a href="javascript:void(0)" role="menuitem">Page 1.1</a></li>
                                <li role="presentation"><a href="javascript:void(0)" role="menuitem">Page 1.2</a></li>
                                <li role="presentation"><a href="javascript:void(0)" role="menuitem">Page 1.3</a></li>
                            </ul>
                        </li>
                        <li role="presentation"><a href="javascript:void(0)" role="menuitem">Page 2</a></li>
                        <li role="presentation"><a href="javascript:void(0)" role="menuitem">Page 3</a></li>
                    </ul>
                </div>
                <div>
                    <h3>Je ne suis pas un menu, mais juste une liste de liens</h3>
                    <ul>
                        <li><a href="javascript:void(0)">Page 1</a>
                            <ul>
                                <li><a href="javascript:void(0)">Page 1.1</a></li>
                                <li><a href="javascript:void(0)">Page 1.2</a></li>
                                <li><a href="javascript:void(0)">Page 1.3</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:void(0)">Page 2</a></li>
                        <li><a href="javascript:void(0)">Page 3</a></li>
                    </ul>
                </div>
            </div>
        </section>

        <section class="wrap">
            <h2>Arborescence</h2>
            <div class="grid grid-cols-2 has-gutter">
                <div>
                    <h3>Je suis une vraie arborescence</h3>
                    <ul role="tree">
                        <li role="presentation"><a href="javascript:void(0)" role="treeitem">Catégorie 1</a>
                            <ul role="group">
                                <li role="presentation"><a href="javascript:void(0)" role="treeitem">Catégorie 1.1</a></li>
                                <li role="presentation"><a href="javascript:void(0)" role="treeitem">Catégorie 1.2</a>
                                    <ul role="group">
                                        <li role="presentation"><a href="javascript:void(0)" role="treeitem">Catégorie 1.2.1</a></li>
                                        <li role="presentation"><a href="javascript:void(0)" role="treeitem">Catégorie 1.2.2</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li role="presentation"><a href="javascript:void(0)" role="treeitem">Catégorie 2</a></li>
                        <li role="presentation"><a href="javascript:void(0)" role="treeitem">Catégorie 3</a>
                            <ul role="group">
                                <li role="presentation"><a href="javascript:void(0)" role="treeitem">Catégorie 3.1</a></li>
                                <li role="presentation"><a href="javascript:void(0)" role="treeitem">Catégorie 3.2</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3>Je ne suis pas une arborescence, mais juste une liste de liens</h3>
                    <ul>
                        <li><a href="javascript:void(0)">Catégorie 1</a>
                            <ul>
                                <li><a href="javascript:void(0)">Catégorie 1.1</a></li>
                                <li><a href="javascript:void(0)">Catégorie 1.2</a>
                                    <ul>
                                        <li><a href="javascript:void(0)">Catégorie 1.2.1</a></li>
                                        <li><a href="javascript:void(0)">Catégorie 1.2.2</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="javascript:void(0)">Catégorie 2</a></li>
                        <li><a href="javascript:void(0)">Catégorie 3</a>
                            <ul>
                                <li><a href="javascript:void(0)">Catégorie 1.1</a></li>
                                <l><a href="javascript:void(0)">Catégorie 1.2</a></l>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </main>
</div>
</body>
</html>