-
Notifications
You must be signed in to change notification settings - Fork 21
/
Copy pathlive03-aria-live-off.html
87 lines (82 loc) · 3.23 KB
/
live03-aria-live-off.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
83
84
85
86
87
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>aria-live="off"</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico">
<link href="assets/css/examples.css" rel="stylesheet">
</head>
<body>
<h1><code>aria-live="off"</code></h1>
<p>← <a href="index.html">Return to main list</a></p>
<p>This test case is designed to determine how <code>aria-live="off"</code> is announced by various screen readers.</p>
<p>After a 10 second pause, an error message is injected onto the page. This error message should be not be announced.</p>
<h2>Example</h2>
<div id="message" class="info" aria-live="off"></div>
<p>Not all that Mrs. Bennet, however, with the assistance of her five daughters, could ask on the subject, was sufficient to draw from her husband any satisfactory description of Mr. Bingley. They attacked him in various ways. With barefaced questions, ingenious suppositions, and distant surmises; but he eluded the skill of them all.</p>
<h2>Code</h2>
<!-- start code -->
<pre><code><div aria-live="off">
</div></code></pre>
<!-- end code -->
<h2>Assistive technologies</h2>
<div class="note">
<h3>VoiceOver</h3>
<ul class="browser-list">
<li><b>Chrome:</b><br>
When reading: <span class="green">Message not announced</span>.<br>
When silent: <span class="green">Message not announced</span>.
</li>
<li><b>Firefox:</b><br>
When reading: <span class="green">Message not announced</span>.<br>
When silent: <span class="green">Message not announced</span>.
</li>
<li><b>Safari:</b><br>
When reading: <span class="green">Message not announced</span>.<br>
When silent: <span class="green">Message not announced</span>.
</li>
</ul>
</div>
<div class="note">
<h3>NVDA</h3>
<ul class="browser-list">
<li><b>Chrome:</b><br>
When reading: <span class="green">Message not announced</span>.<br>
When silent: <span class="green">Message not announced</span>.
</li>
<li><b>Firefox:</b><br>
When reading: <span class="green">Message not announced</span>.<br>
When silent: <span class="green">Message not announced</span>.
</li>
<li><b>Edge:</b><br>
When reading: <span class="green">Message not announced</span>.<br>
When silent: <span class="green">Message not announced</span>.
</li>
</ul>
</div>
<div class="note">
<h3>JAWS</h3>
<ul class="browser-list">
<li><b>Chrome:</b><br>
When reading: <span class="green">Message not announced</span>.<br>
When silent: <span class="green">Message not announced</span>.
</li>
<li><b>Edge:</b><br>
When reading: <span class="green">Message not announced</span>.<br>
When silent: <span class="green">Message not announced</span>.
</li>
</ul>
</div>
<p>← <a href="index.html">Return to main list</a></p>
<script type="text/javascript">
(function()
{
window.setTimeout(function()
{
document.getElementById('message').innerHTML = '<p><strong>Hello:</strong> This is an information notification.</p>';
}, 10000);
})();
</script>
</body>
</html>