-
Notifications
You must be signed in to change notification settings - Fork 379
Expand file tree
/
Copy pathSCR39.html
More file actions
139 lines (127 loc) · 5.14 KB
/
SCR39.html
File metadata and controls
139 lines (127 loc) · 5.14 KB
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
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
<title>Making content on focus or hover hoverable, dismissible, and persistent</title>
<link rel="stylesheet" type="text/css" href="../../css/editors.css">
</head>
<body>
<h1>Making content on focus or hover hoverable, dismissible, and persistent</h1>
<section id="meta">
<h2>Metadata</h2>
<p id="id"></p>
<p id="technology"></p>
<p id="type"></p>
</section>
<section id="applicability">
<h2>When to Use</h2>
<p>The Technique is applicable to any technology that supports the display of additional content on pointer hover.
</p>
</section>
<section id="description">
<h2>Description</h2>
<p>Additional content that is displayed when a user moves the pointer over a trigger or moves the keyboard focus to the trigger (for example, a pop-up) must remain visible to allow users time to read and interact with the content and must allow the user to move the pointer over the additional content.</p>
<p>Low vision users who magnify their screens often see only a small part of the screen at a time (their viewport).
This means that the additional content may not be fully visible in the current viewport and users may need to move
their mouse over the additional content to read it. web authors should therefore ensue that additional content stays visible
when the pointer moves away from the trigger to the (mostly adjacent) additional content. additional content should also be
dismissible without moving the focus, so that users can read content covered by the additional content.</p>
</section>
<section id="examples">
<h2>Examples</h2>
<section class="example">
<h3>Content preview for links</h3>
<p>When hovering over or focusing on a link, a content preview for the link appears just above or below that link.
Users can move the pointer over the additional content (pop-up) so that they can fully read the additional content. Pressing the <kbd>Esc</kbd>
key dismisses (closes) the additional content.</p>
<section>
<h4>HTML of example 1</h4>
<pre><code class="language-html"><p>This is the
<a class="a-and-tooltip" id="parent" href="index.html">trigger
<span id="popup" role="tooltip">And this additional text
gives additional context on the trigger term
</span>
</a>.
Text and popup are <strong>in one link (a)</strong> element.
</p></code></pre>
</section>
<section>
<h4>CSS of example 1</h4>
<pre><code class="language-css">[role="tooltip"] {
display: none;
padding: 0.5em;
background:white;
color: black;
border:solid black 2px;
width:10em;
}
.a-and-tooltip {
position: relative;
}
[role="tooltip"] {
position: absolute;
left:0;
top:1em;
}</code></pre>
</section>
<section>
<h4>JavaScript of example 1</h4>
<pre><code class="language-javascript">// trigger and popup inside the same link
var parent = document.getElementById("parent");
parent.onmouseover = function() {
document.getElementById("popup").style.display = "block";
}
parent.onmouseout = function() {
document.getElementById("popup").style.display = "none";
}
parent.onfocus = function() {
document.getElementById("popup").style.display = "block";
}
parent.onblur = function() {
document.getElementById("popup").style.display = "none";
}
// hide when ESC is pressed
document.addEventListener("keydown", (e) => {
if ((e.keyCode || e.which) === 27)
document.getElementById("popup").style.display = "none";
});</code></pre>
</section>
<p class="working-example"><a href="../../working-examples/script-hoverable/">Working example of content on hover
or focus</a></p>
</section>
</section>
<section id="tests">
<h2>Tests</h2>
<section class="test-procedure">
<h3>Procedure</h3>
<p>For additional content that appears on hover check that:</p>
<ol>
<li>The pointer can be moved over the additional content without the additional content disappearing.</li>
<li>The additional content stays visible and does not automatically close after a time.</li>
<li>The content can be closed without moving the pointer way from the trigger. Either by pressing <kbd>Esc</kbd>, by pressing another documented keyboard shortcut, or by activating the trigger.</li>
</ol>
<p>For additional content that appears on focus check that:</p>
<ol>
<li>The additional content stays visible and does not automatically close after a time.</li>
<li>The content can be closed without moving the focus way from the trigger. Either by pressing <kbd>Esc</kbd>, by pressing another other documented keyboard shortcut, or by activating the trigger.</li>
</ol>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<p>For content that appears on hover:</p>
<ul>
<li>#1, #2 and #3 are true.</li>
</ul>
<p>For content that appears on focus:</p>
<ul>
<li>#1 and #2 are true.</li>
</ul>
</section>
</section>
<section id="related">
<h2>Related Techniques</h2>
<ul>
<li><a href="../failures/F95.html">F95</a></li>
</ul>
</section>
</body>
</html>