-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
135 lines (122 loc) · 5.6 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
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
<!DOCTYPE html>
<html>
<head>
<title>Web Screen Reader</title>
<meta charset="UTF-8">
<meta name="fragment" content="!">
<meta name="description" content="A free Web Screen Reader that improves a site's accessibility for the blind or the visually impaired.'">
<meta name="keywords" content="Screen Reader, Accessibility, Blind, Visually Impaired, Free, Web">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/png" sizes="24x24" href="./browser/favicon.ico">
<link rel="stylesheet" href="./browser/bootstrap.min.css">
<style>
body {
text-align: center;
}
.jumbotron {
margin-bottom: 0;
padding-right: 15px;
padding-left: 15px;
}
#free {
position: absolute;
top: 15px;
left: -25px;
padding: 2px 25px;
background: pink;
transform: rotate(-45deg);
display: block;
line-height: initial;
font-size: 16px;
text-shadow: 2px 2px 3px rgba(0,0,0,0.3);
box-shadow: 0 1px 5px 1px rgba(0,0,0,0.3);
}
.form-control {
max-width: 300px;
margin: auto;
}
.form-control[type=checkbox] {
display: inline-block;
width: auto;
}
.form-control[type=checkbox]:not(:focus) {
box-shadow: none;
}
#reveal-checked:not(:checked) ~ * {
display: none;
}
</style>
</head>
<body>
<main class="jumbotron">
<h1>~Web Screen Reader~</h1>
<h3>A free screen reader for the web to improve accessibility.<br>Now even the blind and the visually impaired can access everything.</h3>
<sup id="free">It's free!</sup>
<br>
<hr>
<br>
<div>
<h2>1. Simply <u>hover</u> me to read me out loud</h2>
<h2><a href="/not-a-real-url-haha" target="_blank">2. I will let you know what type I am</a></h2>
<img src="./browser/heart.png" title="A heart - You will get a description of what the image is">
<h2><input class="form-control" placeholder="Another way to read content is to use Tab" autofocus></h2>
<h2><input class="form-control" type="email" value="You'll know the current value"></h2>
<h3>
<select class="form-control">
<option value="">Handles selects</option>
<option value="1">The first option</option>
<option value="2">The second option which is much better</option>
</select>
</h3>
<h3 class="form-inline">
<input type="checkbox" name="Checkboxes are sometimes checked and sometimes not" class="form-control" id="reveal-checked">
<div><label for="reveal-checked">Things that are hidden will not be read</label></div>
</h3>
</div>
<br>
<hr>
<br>
<div>
<h3>
<button id="raise" class="btn btn-info">It will notify you when changes occur</button>
<h4 id="numb">New value is: 0</h4>
<script>
let raise = document.getElementById("raise");
let numb;
raise.onclick = () => {
numb = numb || document.getElementById("numb");
let oldText = numb.innerText;
numb.innerText = oldText.slice(0, oldText.length - 1) + (+oldText.slice(oldText.length - 1) + 1);
};
</script>
</h3>
<h3>
<input id="toggle" type="button" value="You will know when new content appears" class="btn btn-success">
<script id="self-script">
let toggle = document.getElementById("toggle");
let selfScript;
toggle.onclick = () => {
let newElement = document.createElement("h5");
newElement.innerText = "New content inserted!";
selfScript = selfScript || document.getElementById("self-script");
toggle.parentElement.insertBefore(newElement, selfScript);
setTimeout(() => newElement.remove(), 2000); // cleanup
};
</script>
</h3>
</div>
<br>
<hr>
<br>
<div>
<h2>So how do I start?</h2>
<h3>1. Star me on <a href="https://github.com/Tzook/web-screen-reader" aria-label="Tzook's GitHub link with the Web Screen Reader code">GitHub</a> - to get me motivation to continue working on it</h3>
<h3>2. Tell me your ideas to improve this. Email: <a href="mailto:[email protected]">[email protected]</a>
<h3>3. Be patient! It's still under construction and will soon be ready for use</h3>
</div>
</main>
<script src="./browser/system.js"></script>
<script src="./bundle.js"></script>
<script>System.load("Main");</script>
</body>
</html>