-
Notifications
You must be signed in to change notification settings - Fork 285
/
Copy pathARIA23.html
84 lines (82 loc) · 3.6 KB
/
ARIA23.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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>WCAG 2.0 Technique</title>
<link rel="stylesheet" type="text/css" href="sources.css"/>
</head>
<body>
<h1>Using <code>role=log</code> to identify sequential information updates</h1>
<section id="meta">
<h2>Metadata</h2>
<p class="id">ID: W##</p>
<p class="technology">Technology: ARIA</p>
<p class="type">Type: Technique</p>
</section>
<section id="applicability">
<h2>When to Use</h2>
</section>
<section id="description">
<h2>Description</h2>
<p>
The purpose of this technique is to notify Assistive Technologies (AT) when content has been appended to sequential information concerning the application's history or logs. The aria live region role of <code>log</code> has an implicit <code>aria-live</code> value of <code>polite</code> and <code>aria-atomic</code> value of <code>false</code>, which allows a user to be notified via AT (such as a screen reader) when log messages are added. The new content within the aria-live region is automatically read by the AT, without the AT having to focus on the place where the text is displayed. See <a href="https://www.w3.org/TR/wai-aria-1.1/#log">WAI-ARIA 1.1 log (role)</a> for more details.
</p>
</section>
<section id="examples">
<h2>Examples</h2>
<section class="example">
<h3>Updating the contents of a chat conversation</h3>
<section class="description">
<p>Comments that users type into a chat input field are appended to the end of the chat history region. The region is marked with role of <code>log</code> so that new additions are announced by ATs. When each new chat message appears, a screen reader should announce its content (depending on AT/browser compatibility).</p>
</section>
<pre xml:space="preserve">
<code>
<div id="chatRegion" role="log" aria-labelledby="chatHeading">
<h4 id="chatHeading">Chat History</h4>
<ul id="conversation">
<li>The latest chat message</li>
</ul>
</div>
</code>
</pre>
<p class="working-example">Working example: <a href="../../working-examples/aria-role-log/chatlog.html">chatlog.html</a></p>
</section>
<section class="example">
<h3>Updating the log of a server</h3>
<p>An application log records time-stamped activities. The log is exposed in the app as a view, with the region marked with the role of <code>log</code> so that the new additions are announced by the ATs. (The default value for the <code>aria-relevant</code> attribute is "additions", so the removal of the old top entries due to log size limitations will not be announced.) When each new log entry is added, a screen reader announces it.</p>
<pre>
<code>
<div id="activityLog" role="log">
<h4 id="logHeading">Recent activity</h4>
<ul id="logentries"">
<li>08:03 UserX logged off</li>
</ul>
</div>
</code>
</pre>
<p class="working-example">Working example: <a href="../../working-examples/aria-role-log/serverlog.html">serverlog.html</a></p>
</section>
</section>
<section id="tests">
<h2>Tests</h2>
<section class="test-procedure">
<h3>Procedure</h3>
<p>On a page that contains sequentially updating information:</p>
<ol>
<li>Check that the container for the information is given a role of <code>log</code>.</li>
</ol>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<ul>
<li>#1 is true.</li>
</ul>
</section>
</section>
<section id="related">
<h2>Related Techniques</h2>
<ul>
<li>ID</li>
</ul>
</section>
</body>
</html>