Skip to content

Commit a8dfa62

Browse files
chrisdavidmillschrisdavidmills
committed
adding accessibility testing examples
1 parent 8d6197a commit a8dfa62

File tree

9 files changed

+279
-0
lines changed

9 files changed

+279
-0
lines changed

‎tools-testing/cross-browser-testing/accessibility/bad-form.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Bad form example</title>
6+
</head>
7+
<body>
8+
<h1>Bad form</h1>
9+
<form>
10+
<div>
11+
<p>Enter your name:</p>
12+
<input type="text" name="name">
13+
</div>
14+
<div>
15+
<p>Enter your age:</p>
16+
<input type="text" name="age">
17+
</div>
18+
</form>
19+
</body>
20+
</html>

‎tools-testing/cross-browser-testing/accessibility/bad-links.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Bad links example</title>
6+
</head>
7+
<body>
8+
<h1>Bad links</h1>
9+
10+
<h2>Further information</h2>
11+
<ul>
12+
<li>For more information on whales, <a href="whales.html">click here</a>.</li>
13+
<li>For more information on squirrels, <a href="squirrels.html">click here</a>.</li>
14+
<li>For more information on bees, <a href="bees.html">click here</a>.</li>
15+
</ul>
16+
</body>
17+
</html>

‎tools-testing/cross-browser-testing/accessibility/bad-semantics.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Bad semantics example</title>
6+
</head>
7+
<body>
8+
<font size="7">My heading</font>
9+
<br><br>
10+
This is the first section of my document.
11+
<br><br>
12+
I'll add another paragraph here too.
13+
<br><br>
14+
<font size="5">My subheading</font>
15+
<br><br>
16+
This is the first subsection of my document. I'd love people to be able to find this content!
17+
<br><br>
18+
<font size="5">My 2nd subheading</font>
19+
<br><br>
20+
This is the second subsection of my content. I think is more interesting than the last one.
21+
</body>
22+
</html>

‎tools-testing/cross-browser-testing/accessibility/bad-table.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Bad table example</title>
6+
</head>
7+
<body>
8+
<h1>Bad table</h1>
9+
<table>
10+
<tr>
11+
<td>Name</td>
12+
<td>Age</td>
13+
<td>Gender</td>
14+
</tr>
15+
<tr>
16+
<td>Gabriel</td>
17+
<td>13</td>
18+
<td>Male</td>
19+
</tr>
20+
<tr>
21+
<td>Elva</td>
22+
<td>8</td>
23+
<td>Female</td>
24+
</tr>
25+
<tr>
26+
<td>Freida</td>
27+
<td>5</td>
28+
<td>Female</td>
29+
</tr>
30+
</table>
31+
</body>
32+
</html>

‎tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Fake div buttons</title>
6+
<style>
7+
div {
8+
background-color: rgb(240, 240, 240);
9+
font-size: 11px;
10+
font-family: sans-serif;
11+
border: 1px outset rgb(218, 218, 218);
12+
line-height: 20px;
13+
padding: 0 6px;
14+
width: 120px;
15+
text-align: center;
16+
border-radius: 5px;
17+
margin-right: 10px;
18+
cursor: pointer;
19+
display: inline-block;
20+
}
21+
22+
div:hover, div:focus {
23+
font-weight: bold;
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
29+
<h2>Fake buttons</h2>
30+
31+
<div data-message="This is from the first button" tabindex="0">Click me!</div>
32+
<div data-message="This is from the second button" tabindex="0">Click me too!</div>
33+
<div data-message="This is from the third button" tabindex="0">And me!</div>
34+
35+
<script>
36+
var buttons = document.querySelectorAll('div');
37+
38+
for(var i = 0; i < buttons.length; i++) {
39+
addHandler(buttons[i]);
40+
}
41+
42+
function addHandler(button) {
43+
button.onclick = function(e) {
44+
var message = e.target.getAttribute('data-message');
45+
alert(message);
46+
}
47+
}
48+
49+
document.onkeydown = function(e) {
50+
if(e.keyCode === 13) { // The Enter/Return key
51+
document.activeElement.onclick(e);
52+
}
53+
};
54+
</script>
55+
</body>
56+
</html>

‎tools-testing/cross-browser-testing/accessibility/good-form.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Good form example</title>
6+
</head>
7+
<body>
8+
<h1>Good form</h1>
9+
<form>
10+
<div>
11+
<label for="name">Enter your name:</label>
12+
<input type="text" name="name" id="name">
13+
</div>
14+
<div>
15+
<label for="age">Enter your age:</label>
16+
<input type="text" name="age" id="age">
17+
</div>
18+
</form>
19+
</body>
20+
</html>

‎tools-testing/cross-browser-testing/accessibility/good-links.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Good links example</title>
6+
</head>
7+
<body>
8+
<h1>Good links</h1>
9+
10+
<h2>Further information</h2>
11+
<ul>
12+
<li><a href="whales.html">Further information on Whales</a>.</li>
13+
<li><a href="squirrels.html">Further information on Squirrels</a>.</li>
14+
<li><a href="bees.html">Further information on Bees</a>.</li>
15+
</ul>
16+
</body>
17+
</html>

‎tools-testing/cross-browser-testing/accessibility/good-semantics.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Good semantics example</title>
6+
</head>
7+
<body>
8+
<h1>My heading</h1>
9+
10+
<p>This is the first section of my document.</p>
11+
12+
<p>I'll add another paragraph here too.</p>
13+
14+
<h2>My subheading</h2>
15+
16+
<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>
17+
18+
<h2>My 2nd subheading</h2>
19+
20+
<p>This is the second subsection of my content. I think is more interesting than the last one.</p>
21+
</body>
22+
</html>

‎tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Native keyboard accessibility</title>
6+
<style>
7+
input {
8+
margin-bottom: 10px;
9+
}
10+
11+
button {
12+
margin-right: 10px;
13+
}
14+
15+
a:hover, input:hover, button:hover, select:hover,
16+
a:focus, input:focus, button:focus, select:focus {
17+
font-weight: bold;
18+
}
19+
</style>
20+
</head>
21+
<body>
22+
23+
<h1>Links</h1>
24+
25+
<p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p>
26+
27+
<p>Another link, to the <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
28+
29+
<h2>Buttons</h2>
30+
31+
<p>
32+
<button data-message="This is from the first button">Click me!</button>
33+
<button data-message="This is from the second button">Click me too!</button>
34+
<button data-message="This is from the third button">And me!</button>
35+
</p>
36+
37+
<h2>Form</h2>
38+
39+
<form>
40+
<div>
41+
<label for="input1">Fill me in:</label>
42+
<input type="text" id="input1">
43+
</div>
44+
<div>
45+
<label for="input2">Fill me in:</label>
46+
<input type="text" id="input2">
47+
</div>
48+
<div>
49+
<select>
50+
<option>Happy</option>
51+
<option>Sad</option>
52+
<option>Angry</option>
53+
<option>Worried</option>
54+
</select>
55+
</div>
56+
</form>
57+
58+
<script>
59+
var buttons = document.querySelectorAll('button');
60+
61+
for(var i = 0; i < buttons.length; i++) {
62+
addHandler(buttons[i]);
63+
}
64+
65+
function addHandler(button) {
66+
button.addEventListener('click', function(e) {
67+
var message = e.target.getAttribute('data-message');
68+
alert(message);
69+
})
70+
}
71+
</script>
72+
</body>
73+
</html>

0 commit comments

Comments
 (0)