-
Notifications
You must be signed in to change notification settings - Fork 21
/
Copy pathlive01-aria-live-assertive.html
87 lines (82 loc) · 3.55 KB
/
live01-aria-live-assertive.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="assertive"</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="assertive"</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="assertive"</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 announced immediately, even if the screen reader is in the process of reading other content.</p>
<h2>Example</h2>
<div id="message" class="error" aria-live="assertive"></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="assertive">
</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">Interrupts and announces message immediately</span>.<br>
When silent: <span class="green">Announces message immediately</span>.
</li>
<li><b>Firefox:</b><br>
When reading: <span class="green">Interrupts and announces message immediately</span>.<br>
When silent: <span class="green">Announces message immediately</span>.
</li>
<li><b>Safari:</b><br>
When reading: <span class="green">Interrupts and announces message immediately</span>.<br>
When silent: <span class="green">Announces message immediately</span>.
</li>
</ul>
</div>
<div class="note">
<h3>NVDA</h3>
<ul class="browser-list">
<li><b>Chrome:</b><br>
When reading: <span class="orange">Interrupts and announces message at end of sentence</span>.<br>
When silent: <span class="green">Announces message immediately</span>.
</li>
<li><b>Firefox:</b><br>
When reading: <span class="orange">Interrupts and announces message at end of sentence</span>.<br>
When silent: <span class="green">Announces message immediately</span>.
</li>
<li><b>Edge:</b><br>
When reading: <span class="orange">Interrupts and announces message at end of sentence</span>.<br>
When silent: <span class="green">Announces message immediately</span>.
</li>
</ul>
</div>
<div class="note">
<h3>JAWS</h3>
<ul class="browser-list">
<li><b>Chrome:</b><br>
When reading: <span class="red">Announces message at end of page</span>.<br>
When silent: <span class="green">Announces message immediately</span>.
</li>
<li><b>Edge:</b><br>
When reading: <span class="red">Message not announced</span>.<br>
When silent: <span class="green">Announces message immediately</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 error notification.</p>';
}, 10000);
})();
</script>
</body>
</html>