-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathcontent-good.html
154 lines (112 loc) · 5.62 KB
/
content-good.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="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A test article page for accessibility evaluations">
<title>About Acme | Acme Widgets</title>
<link rel="stylesheet" href="css/pure.css">
<link rel="stylesheet" href="css/goodbad.css">
<link href="https://rawgithub.com/tilomitra/csstypography/master/css/pure-typography.css" type="text/css" rel="stylesheet">
<style>
#menu {display:none;}
#layout.active #menu {display:block;}
#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;
}
@media (min-width: 48em) {
#menu {display: block;}
}
</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" role="navigation">
<div class="pure-menu">
<a class="pure-menu-heading" href="index.html">Acme</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="index.html" class="pure-menu-link">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 pure-menu-selected">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">
<article>
<header class="header">
<h1>About Acme</h1>
</header>
<div class="content">
<h2 class="content-subhead">Acme's Place in History</h2>
<p>Acme Widgets <img src="images/coyote.png" alt="Wile E. Coyote" style="float:right"> is best known for its role in the Roadrunner cartoons. Acme has proudly provided genius widgets to help the coyote capture the roadrunner. While our widgets are fabulous, the low success rate is certainly due to user error. </p>
<p>Here's an interesting tidbit, not everybody roots for the Roadrunner. This graph shows the breakdown. <br>
<a href="https://hbr.org/2009/08/coyotes-vs-road-runners-managi"><img src="images/graph-beherens.gif" alt="survey of people rooting for the coyote or roadrunner broken down by race" longdesc="https://hbr.org/2009/08/coyotes-vs-road-runners-managi"></a></p>
<h2>Using this page</h2>
<p>
This is a <strong>sample page</strong> that includes <em>many</em> elements that are used to give content semantic value. You should be able to run automated tests agains this page and have no errors. Here's a list of elements within this page:
</p>
<h3>Lists</h3>
<ul class="list">
<li>Unordered list (this one)</li>
<li>Ordered list</li>
<li><abbr title="Definition List">DL</abbr></li>
<li>Headers</li>
<li>Blockquote with cite</li>
<li>Image with alt text</li>
<li>Image with long description</li>
<li>Inline tags: abbr, strong, em, del, ins, time</li>
</ul>
<h4>Ordered and Definition Lists</h4>
<p class="grey">Help make Acme better</p>
<ol class="list">
<li>Visit this project on <a href="https://github.com/7mary4/a11y-control-test">GitHub</a></li>
<li>Fork it</li>
<li>Send a pull request to make it better</li>
</ol>
<p>Does that last list confuse you? Here's what it means.</p>
<dl>
<dt>GitHub</dt>
<dd>GitHub is an online collaborative tool that allows people to share code, suggest changes, and propose solutions.</dd>
<dd><blockquote cite="https://guides.github.com/">GitHub Flow is a lightweight, branch-based workflow that supports teams and projects where deployments are made regularly. This guide explains how and why GitHub Flow works. <br><cite><a href="https://guides.github.com/">Github Guides</a></cite></blockquote></dd>
<dt>Fork</dt>
<dd>Download the code and prepare to make your own version of the project.</dd>
<dt>Pull Request</dt>
<dd>Ask the project manager to include your <del datetime="2015-11-16">code</del> <ins datetime="2015-11-16">patch</ins> into the project.</dd>
</dl>
<p>This page was originally created on <time datetime="2015-11-16">November 16, 2015</time>.</p>
</div>
</article>
</main>
</div>
<script src="js/ui.js"></script>
</body>
</html>