Skip to content

Commit 5e200d5

Browse files
chrisdavidmillschrisdavidmills
committed
adding CSS and JS accessibility examples
1 parent a08792e commit 5e200d5

File tree

4 files changed

+250
-0
lines changed

4 files changed

+250
-0
lines changed

‎accessibility/css/form-css.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Form CSS example</title>
6+
<style>
7+
html {
8+
font-family: sans-serif;
9+
}
10+
11+
form {
12+
background: #eee;
13+
border-radius: 20px;
14+
box-shadow: 1px 1px 1px black;
15+
padding: 20px;
16+
width: 300px;
17+
}
18+
19+
div:first-of-type label {
20+
margin-bottom: 20px;
21+
}
22+
23+
label {
24+
width: 130px;
25+
float: left;
26+
text-align: right;
27+
padding: 4px;
28+
}
29+
30+
input {
31+
width: 130px;
32+
float: right;
33+
}
34+
35+
label, input {
36+
font-size: 1em;
37+
line-height: 1.5;
38+
}
39+
40+
div {
41+
clear: both;
42+
}
43+
</style>
44+
</head>
45+
<body>
46+
<h1>Form CSS example</h1>
47+
<form>
48+
<div>
49+
<label for="name">Enter your name:</label>
50+
<input type="text" name="name" id="name">
51+
</div>
52+
<div>
53+
<label for="age">Enter your age:</label>
54+
<input type="text" name="age" id="age">
55+
</div>
56+
<div></div>
57+
</form>
58+
</body>
59+
</html>

‎accessibility/css/form-validation.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Form validation example</title>
6+
<style>
7+
html {
8+
font-family: sans-serif;
9+
}
10+
11+
form {
12+
background: #eee;
13+
border-radius: 20px;
14+
box-shadow: 1px 1px 1px black;
15+
padding: 20px;
16+
width: 300px;
17+
}
18+
19+
label {
20+
width: 130px;
21+
float: left;
22+
text-align: right;
23+
padding: 4px;
24+
margin-bottom: 20px;
25+
}
26+
27+
input {
28+
width: 130px;
29+
float: right;
30+
}
31+
32+
label, input {
33+
font-size: 1em;
34+
line-height: 1.5;
35+
}
36+
37+
div {
38+
clear: both;
39+
}
40+
41+
.errors {
42+
background: yellow;
43+
border-radius: 20px;
44+
box-shadow: 1px 1px 1px black;
45+
padding: 20px;
46+
width: 300px;
47+
position: absolute;
48+
left: 360px;
49+
}
50+
51+
.errors a {
52+
display: block;
53+
margin-bottom: 20px;
54+
}
55+
56+
.errors a:last-child {
57+
margin-bottom: 0;
58+
}
59+
</style>
60+
</head>
61+
<body>
62+
<h1>Form CSS example</h1>
63+
<div class="errors" aria-live="polite">
64+
65+
</div>
66+
<form>
67+
<div>
68+
<label for="name">Enter your name:</label>
69+
<input type="text" name="name" id="name">
70+
</div>
71+
<div>
72+
<label for="age">Enter your age:</label>
73+
<input type="number" name="age" id="age">
74+
</div>
75+
<div>
76+
<input type="submit">
77+
</div>
78+
<div></div>
79+
</form>
80+
<script src="validation.js"></script>
81+
</body>
82+
</html>

‎accessibility/css/table-css.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Table CSS example</title>
6+
<style>
7+
html {
8+
font-family: sans-serif;
9+
}
10+
11+
table {
12+
width: 600px;
13+
border-collapse: collapse;
14+
border: 1px solid black;
15+
border-top: 3px solid black;
16+
border-bottom: 3px solid black;
17+
}
18+
19+
th,td {
20+
padding: 10px;
21+
}
22+
23+
td {
24+
text-align: center;
25+
}
26+
27+
th[scope="col"] {
28+
background: #ccc;
29+
}
30+
31+
tr:nth-child(even) {
32+
background: #eee;
33+
}
34+
35+
tr:nth-child(odd) {
36+
background: #ddd;
37+
}
38+
</style>
39+
</head>
40+
<body>
41+
<h1>Table CSS example</h1>
42+
<table>
43+
<tr>
44+
<th scope="col">Name</th>
45+
<th scope="col">Age</th>
46+
<th scope="col">Gender</th>
47+
</tr>
48+
<tr>
49+
<th scope="row">Gabriel</th>
50+
<td>13</td>
51+
<td>Male</td>
52+
</tr>
53+
<tr>
54+
<th scope="row">Elva</th>
55+
<td>8</td>
56+
<td>Female</td>
57+
</tr>
58+
<tr>
59+
<th scope="row">Freida</th>
60+
<td>5</td>
61+
<td>Female</td>
62+
</tr>
63+
</table>
64+
</body>
65+
</html>

‎accessibility/css/validation.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
var inputs = document.querySelectorAll('input');
2+
var labels = document.querySelectorAll('label');
3+
var form = document.querySelector('form');
4+
5+
var formItems = [];
6+
7+
var errorField = document.querySelector('.errors');
8+
9+
errorField.style.visibility = 'hidden';
10+
11+
for(var i = 0; i < inputs.length-1; i++) {
12+
var obj = {};
13+
obj.label = labels[i];
14+
obj.input = inputs[i];
15+
formItems.push(obj);
16+
}
17+
18+
form.onsubmit = validate;
19+
20+
function validate(e) {
21+
errorField.innerHTML = '';
22+
errorField.style.visibility = 'hidden';
23+
for(var i = 0; i < formItems.length; i++) {
24+
var testItem = formItems[i];
25+
if(testItem.input.value === '') {
26+
createLink(testItem);
27+
}
28+
}
29+
30+
if(errorField.innerHTML !== '') {
31+
e.preventDefault();
32+
errorField.style.visibility = 'visible';
33+
}
34+
}
35+
36+
function createLink(testItem) {
37+
var anchor = document.createElement('a');
38+
anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
39+
anchor.href = '#' + testItem.input.name;
40+
anchor.onclick = function() {
41+
testItem.input.focus();
42+
};
43+
errorField.appendChild(anchor);
44+
}

0 commit comments

Comments
 (0)