-
Notifications
You must be signed in to change notification settings - Fork 2
/
visually-hidden-focus-test.html
executable file
·82 lines (69 loc) · 3.52 KB
/
visually-hidden-focus-test.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>visibility:hidden - focus test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*Hidden visually, available for screenreaders. Same technique as in HTML5 boilerplate.*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
:focus {
outline-offset: 2px;
outline: 2px green dashed;
}
</style>
</head>
<body>
<h1>Hidden elements - focus test</h1>
<p>These buttons are hidden in different ways. Let's see if they are focusable!</p>
<ul>
<li>Even-numbered buttons are hidden using various CSS techniques.</li>
<li>Odd-numbered buttons are visible, to help you to keep track of your position in the tab order.</li>
<li>Each button has a pop up to say which button was pressed.</li>
</ul>
<div class="buttons">
<button>1</button>
<button style="display:none;">2</button>
<button>3</button>
<button style="visibility:hidden;">4</button>
<button>5</button>
<button style="position:relative; left:-2000px;">6</button>
<button>7</button>
<button class="visuallyhidden">8</button>
<button>9</button>
<button style="opacity:0;">10</button>
<button>11</button>
<button hidden>12</button>
<button>13</button>
<button tabindex="-1" class="visuallyhidden">14</button>
<button>15</button>
</div>
<p> Button Two is hidden using CSS <code>display:none</code>. It isn't expected to be focusable. Focus will jump from Button 1 to Button 3.</p>
<p> Button Four is hidden using CSS <code>visibility:hidden</code>. It has space reserved, so this paragraph is indented. It isn't expected to be focusable. Focus will jump from Button 3 to Button 5</p>
<p> Button 6 is hidden "off-viewport" with negative positioning. Even though we can't see it, we can focus on it.</p>
<p> Button 8 is hidden using a <code>.visuallyhidden</code> class technique, similar to HTML5 boilerplate or Drupal8. Even though we can't see it, we can focus on it.</p>
<p> Button 10 is hidden using CSS <code>opacity:0;</code> Even though we can't see it, we can focus on it.</p>
<p>Button 12 is hidden using the HTML <code>hidden</code> attribute. This usually gets treated the same as using CSS <code>display:none</code>. Focus should jump from Button 11 to Button 13.</p>
<p>Button 14 is hidden using a <code>.visuallyhidden</code> class technique, AND it has <code>tabindex="-1"</code> to remove it from the tabbing order. When using the tab key, focus should jump from button 13 to button 15. <strong>However,</strong> it is still present in the browser's accessibility tree. It can be discovered by screen readers! For example, when using browse mode instead of forms mode, a list-all-buttons tool, or a skip-to-next-button command. Will speech control be able to operate it? For example using the "click 14", "show numbers", or "click button" commands.</p>
<script>
var buttons = document.querySelectorAll('button');
buttons.forEach(function(button) {
button.addEventListener(
'click',
function() {
alert("Button " + button.textContent + " clicked.");
}
);
});
</script>
</body>
</html>