Skip to content

Commit 07e8153

Browse files
ArtuGitArtuGit
committed
Accessibility
1 parent 87ff820 commit 07e8153

File tree

6 files changed

+132
-6
lines changed

6 files changed

+132
-6
lines changed

‎accessibility/css/main.css

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
/*
6+
This will hide the focus indicator if the element receives focus via the mouse,
7+
but it will still show up on keyboard focus.
8+
https://github.com/WICG/focus-visible
9+
*/
10+
* :focus:not(.focus-visible) {
11+
outline: none;
12+
}
13+
14+
.d-buttons div, .stripped-buttons div{
15+
display: inline-block;
16+
padding-left: .3rem;
17+
padding-right: .3rem;
18+
cursor: pointer;
19+
}
20+
21+
.stripped-buttons div button{
22+
background: none;
23+
border: none;
24+
padding: 0;
25+
color: inherit;
26+
text-decoration: none;
27+
}
28+
29+
#sb1{
30+
all: inherit;
31+
}

‎accessibility/index.html

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Accessibility</title>
6+
<link rel="stylesheet" href="css/main.css">
7+
</head>
8+
9+
<body>
10+
<h1>Accessibility</h1>
11+
<h2>The tasks:</h2>
12+
13+
<section class="intro">
14+
15+
<ul>
16+
<li>Show outline only for tab navigation, not on focus</li>
17+
<li>Handle clicks and key pressing for elements</li>
18+
</ul>
19+
20+
<p>Use "Tab" on keyboard to navigate. </p>
21+
</section>
22+
23+
<h2>Implementation</h2>
24+
25+
<section class="buttons">
26+
<h3>Buttons</h3>
27+
<p>Classical buttons do not solve due to appearance.</p>
28+
<button id="b1">No action</button>
29+
<button id="b2" onclick="handleBtnClick()">Click me!</button>
30+
<button id="b3">Press Me!</button>
31+
</section>
32+
33+
<section class="d-buttons">
34+
<h3>div Buttons</h3>
35+
<p>Pseudo buttons work but are not recommended.<p>
36+
<div id="db1" role="button">Wrong Button, no 'tabindex'</div>
37+
<div id="db2" role="button" tabindex="0">Click me!</div>
38+
<div id="db3" role="button" tabindex="0">Press Me!</div>
39+
</section>
40+
41+
<section class="stripped-buttons">
42+
<h3>Stripped Buttons</h3>
43+
<div>
44+
<button id="sb1">Wrong Stripped ('all: inherit' from div)</button>
45+
</div>
46+
<div>
47+
<button id="sb2">Click Me!</button>
48+
</div>
49+
<div>
50+
<button id="sb3">Press Me!</button>
51+
</div>
52+
</section>
53+
54+
<section>
55+
<h2>References</h2>
56+
<ul>
57+
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">ARIA: button role</a></li>
58+
<li><a href="https://css-tricks.com/keyboard-only-focus-styles/">Keyboard-Only Focus Styles</a></li>
59+
</ul>
60+
</section>
61+
62+
<script src="js/main.js"></script>
63+
<script src="js/focus-visible.min.js"></script>
64+
</body>
65+
66+
</html>

‎accessibility/js/focus-visible.min.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎accessibility/js/main.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// click
2+
let idsClick = ["b2","db2","sb2"];
3+
let elementsClick = [];
4+
5+
for (let i = 0; i < idsClick.length; i++) {
6+
elementsClick[i] = document.getElementById(idsClick[i]);
7+
elementsClick[i].addEventListener("click", function(event) {
8+
alert('Clicked!')
9+
});
10+
}
11+
12+
// keyup
13+
let idsPress = ["b3","db3","sb3"];
14+
let elementsPress = [];
15+
16+
for (let i = 0; i < idsPress.length; i++) {
17+
elementsPress[i] = document.getElementById(idsPress[i]);
18+
elementsPress[i].addEventListener("keyup", function(event) {
19+
if (event.key === " " || event.key === "Enter" || event.key === "Spacebar") { // "Spacebar" for IE11 support
20+
// Cancel the default action, if needed
21+
event.preventDefault();
22+
// Trigger the button element with a click
23+
alert('Pressed!')
24+
}
25+
});
26+
}
27+

‎front-end-sandbox/css/main.css

+5-5
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ div#dog span {
216216
margin: 10px auto;
217217
}
218218

219-
.button {
219+
.buttons {
220220
border-radius: 4px;
221221
background-color: #080708;
222222
border: none;
@@ -231,14 +231,14 @@ div#dog span {
231231
margin: 5px;
232232
}
233233

234-
.button span {
234+
.buttons span {
235235
cursor: pointer;
236236
display: inline-block;
237237
position: relative;
238238
transition: 0.5s;
239239
}
240240

241-
.button span:after {
241+
.buttons span:after {
242242
content: '\00bb';
243243
position: absolute;
244244
opacity: 0;
@@ -248,11 +248,11 @@ div#dog span {
248248
border: none;
249249
}
250250

251-
.button:hover span {
251+
.buttons:hover span {
252252
padding-right: 25px;
253253
}
254254

255-
.button:hover span:after {
255+
.buttons:hover span:after {
256256
opacity: 1;
257257
right: 0;
258258
}

‎front-end-sandbox/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ <h2>Elements</h2>
4444
<ul class="elements">
4545
<li><span>span</span></li>
4646
<li>
47-
<button class="button"><span>Hover </span></button>
47+
<button class="buttons"><span>Hover </span></button>
4848
</li>
4949
</ul>
5050

0 commit comments

Comments
 (0)