-
Notifications
You must be signed in to change notification settings - Fork 372
/
Copy pathalert.html
145 lines (136 loc) · 5.8 KB
/
alert.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
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
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Alert Example | WAI-ARIA Authoring Practices 1.2</title>
<!-- Core js and css shared by all examples; do not modify when using this template. -->
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
<link rel="stylesheet" href="../css/core.css">
<script src="../js/examples.js"></script>
<script src="../js/highlight.pack.js"></script>
<script src="../js/app.js"></script>
<!-- js and css for this example. -->
<link href="css/alert.css" rel="stylesheet">
<script src="js/alert.js" type="text/javascript"></script>
</head>
<body>
<nav aria-label="Related Links" class="feedback">
<ul>
<li><a href="../../#browser_and_AT_support">Browser and Assistive Technology Support</a></li>
<li><a href="https://github.com/w3c/aria-practices/issues/new">Report Issue</a></li>
<li><a href="https://github.com/w3c/aria-practices/projects/20">Related Issues</a></li>
<li><a href="../../#alert">Design Pattern</a></li>
</ul>
</nav>
<main>
<h1>Alert Example</h1>
<p>
The below example demonstrates the <a href="../../#alert">design pattern for alert</a>.
Activating the <q>Trigger Alert</q> button causes a message to be inserted into the example alert element.
</p>
<p>Similar examples include:</p>
<ul>
<li><a href="../dialog-modal/alertdialog.html">Alert Dialog Example</a>: A confirmation prompt that demonstrates an alert dialog.</li>
</ul>
<section>
<div class="example-header">
<h2 id="ex_label">Example</h2>
</div>
<p>
This is just a test.
A typical alert is triggered by an event, such as an error, warning condition, or the arrival of information that is important in the context of the user's task.
</p>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<div id="ex1">
<button type="button" id="alert-trigger">Trigger Alert</button>
<div id="example" role="alert"></div>
<!-- The following script element contains the content that will be inserted into the alert element. -->
<script type="text/template" id="alert-template">
<p><span lang="da">Hej</span>, hello, <span lang="it">ciao</span>, <span lang="ja">こんにちは</span>, <span lang="ko">안녕</span></p>
</script>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>
<section>
<h2>Accessibility Features</h2>
<p>
Because an alert is for critical information, assistive technologies may provide special behaviors designed to help call attention to changes in the text of an alert.
For example, screen readers may interrupt all other speech and preface announcement of the new alert text with a special sound or phrase.
</p>
</section>
<section>
<h2 id="kbd_label">Keyboard Support</h2>
<p>No keyboard interaction needed.</p>
</section>
<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<table aria-labelledby="rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
</tr>
</thead>
<tbody>
<tr data-test-id="alert-role">
<th scope="row"><code>alert</code></th>
<td></td>
<td><code>div</code></td>
<td>Identifies the element as the container where alert content will be added or updated.</td>
</tr>
<tr data-test-id="test-not-required">
<td></td>
<th scope="row"><code>aria-live=<q>assertive</q></code></th>
<td>Implicit on <code>div</code></td>
<td>
<ul>
<li>This does not have to be declared in the code because it is implicit in the alert role.</li>
<li>Tells assistive technologies to interrupt other processes to provide users with immediate notification of relevant alert container changes.</li>
</ul>
</td>
</tr>
<tr data-test-id="test-not-required">
<td></td>
<th scope="row"><code>aria-atomic=<q>true</q></code></th>
<td>Implicit on <code>div</code></td>
<td>
<ul>
<li>This does not have to be declared in the code because it is implicit in the alert role.</li>
<li>Tells assistive technologies to use the entire content of the alert element as the alert message even if only a portion of it has changed.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>Javascript and CSS Source Code</h2>
<ul id="css_js_files">
<li>
CSS:
<a href="css/alert.css" type="tex/css">alert.css</a>
</li>
<li>
Javascript:
<a href="js/alert.js" type="text/javascript">alert.js</a>
</li>
</ul>
</section>
<section>
<h2 id="sc1_label">HTML Source Code</h2>
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
<pre><code id="sc1"></code></pre>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
<script>
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
sourceCode.make();
</script>
</section>
</main>
<nav>
<a href="../../#alert">Alert Design Pattern in WAI-ARIA Authoring Practices 1.2</a>
</nav>
</body>
</html>