This repository has been archived by the owner on Jul 15, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
86 lines (85 loc) · 2.61 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
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta http-equiv="content-language" content="en" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="accessibility a11y audio graph tones" />
<meta name="description" content="hertz : Listen to graphs" />
<title>hertz : Listen to graphs</title>
<style type="text/css">
html,
body,
div,
h1,
p {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
:focus {
outline: #000 dotted thin;
}
body {
background: #FFF;
color: #000;
font-family: helvetica;
line-height: 1.3;
}
p {
margin: .5em 0;
}
.wrapper {
margin: 1em auto;
max-width: 1280px;
min-width: 640px;
width: 80%;
}
#hd h1 {
font-size: 2em;
text-shadow: 3px 3px 5px rgba(17,17,17,.1);
}
#hd {
margin-bottom: 3em;
}
#bd svg {
cursor: pointer;
}
</style>
</head>
<body>
<a href="https://github.com/yahoo/hertz" target="_blank"><img alt="Fork me on GitHub" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" style="position: absolute; top: 0; right: 0; border: 0;"></a>
<div class="wrapper">
<div id="hd">
<h1>hertz : Listen to graphs</h1>
</div>
<div id="bd">
<svg viewBox="0 0 85 26" width="600" height="200">
<title>Graph of generic number trends (click to listen)</title>
<g>
<path stroke="#999" stroke-dasharray="1,1" stroke-width="1" d="M2,13L85,13"></path>
<circle stroke="#999" cx="2" cy="13" r="1" stroke-width="1" ></circle>
<path stroke="black" stroke-width="1" fill="none" d="M7,10L15,14L23,4L31,13L39,1L47,6L55,18L63,12L71,8L80,9"></path>
</g>
</svg>
<p>
The graph above has no axis - it's simply a quick reference so a user can determine general trends. Although this is helpful, the alt text is difficult to effectively and concisely convey the same meaning. Click the above graph to hear the charted points for those that may have visual impairments.
</p>
</div>
</div>
<script type="text/javascript" src="./hertz.js"></script>
<script type="text/javascript">
(function() {
var graph = document.getElementsByTagName('svg')[0];
graph.addEventListener('click', function() {
hertz([2, -1, 10, 0, 15, 0, -5, 0, 3, 2]);
}, false);
}());
</script>
</body>
</html>