forked from 7mary4/a11y-control-test
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·110 lines (72 loc) · 3.05 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A test web site for accessibility evaluations">
<title>Acme Widgets</title>
<link rel="stylesheet" href="css/pure.css">
<link href="https://rawgithub.com/tilomitra/csstypography/master/css/pure-typography.css" type="text/css" rel="stylesheet">
<style>
#menu .pure-menu-selected, #menu .pure-menu-heading {color:#fff;}
.visually-hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
body:hover .visually-hidden a,
body:hover .visually-hidden input,
body:hover .visually-hidden button {
display: none !important;
}
</style>
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/layouts/side-menu-old-ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/layouts/side-menu.css">
<!--<![endif]-->
</head>
<body>
<div id="layout" class="pure-type">
<!-- Menu toggle -->
<a href="#menu" id="menuLink" class="menu-link">
<!-- Hamburger icon -->
<span></span>
<i class="visually-hidden">Navigation</i>
</a>
<div id="menu">
<div class="pure-menu">
<a class="pure-menu-heading" href="index.html">Acme</a>
<ul class="pure-menu-list" role="navigation">
<li class="pure-menu-item"><a href="index.html" class="pure-menu-link pure-menu-selected">Home</a></li>
<li class="pure-menu-item"><a href="data-good.html" class="pure-menu-link">Products - Good</a></li>
<li class="pure-menu-item"><a href="data-bad.html" class="pure-menu-link">Products - Bad</a></li>
<li class="pure-menu-item"><a href="content-good.html" class="pure-menu-link">About - Good</a></li>
<li class="pure-menu-item"><a href="content-bad.html" class="pure-menu-link">About - Bad</a></li>
<li class="pure-menu-item"><a href="apply.html" class="pure-menu-link" >Apply - Good</a></li>
<li class="pure-menu-item"><a href="apply-bad.html" class="pure-menu-link">Apply - Bad</a></li>
</ul>
</div>
</div>
<main id="main">
<header class="header">
<h1>Acme Widgets</h1>
<h2>Exploring the usability and accessibility of widgets</h2>
</header>
<div class="content">
<h2 class="content-subhead">About this site</h2>
<p>
This web site includes sets of pages to test accessible and non-accessible methods for writing HTML. This will allow us to test patterns on multiple devices and assistive technologies. It will also give us controls for doing automated testing. The menu to the left will contain the test pages.
</p>
</div>
</main>
</div>
<script src="js/ui.js"></script>
</body>
</html>