-
Notifications
You must be signed in to change notification settings - Fork 285
/
Copy pathARIA22.html
72 lines (70 loc) · 4.37 KB
/
ARIA22.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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="sources.css"/>
</head>
<body>
<h1>Using role=status to present status messages</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>
This technique uses the <code>status</code> role from the ARIA specification to notify Assistive Technologies (AT) when content has been updated with information about the user's or application's status. This is done by adding <code>role="status"</code> to the element that contains the <a href="https://www.w3.org/TR/WCAG21/#dfn-status-messages">status message</a>. The aria live region role of <code>status</code> has an implicit <code>aria-live</code> value of <code>polite</code>, which allows a user to be notified via AT (such as a screen reader) when status messages are added. The role of <code>status</code> also has a default <code>aria-atomic</code> value of <code>true</code>, so that updates to the container marked with a role of <code>status</code> will result in the AT presenting the entire contents of the container to the user, including any author-defined labels (or additional nested elements). Such additional context can be critical where the status message text alone will not provide an equivalent to the visual experience. The content of the aria-live container 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/#status">WAI-ARIA 1.1 status (role)</a> for more details.
</p>
</section>
<section id="examples">
<h2>Examples</h2>
<section class="example">
<h3>Including a search results message</h3>
<p>After a user presses a Search button, the page content is updated to include the results of the search, which are displayed in a section below the Search button. The change to content also includes the message "5 results returned" near the top of this new content. This text is given an appropriate role for a status message. A screen reader will announce "Five results returned".</p>
<pre xml:space="preserve">
<code>
<div role="status">5 results returned.</div>
</code>
</pre>
<p class="working-example"><a href="../../working-examples/aria-role-status-searchresults/">Working example: role=status on search results</a></p>
</section>
<section class="example">
<h3>Updating the shopping cart status</h3>
<p>After a user presses an Add to Shopping Cart button, content near the Shopping Cart icon updates to read "1 items". The container for this text (in this case a <code><p></code>) is marked with the role of <code>status</code>. Because it adds visual context, the shopping cart image -- with succinct and accurate ALT text -- is also placed in the container. Due to the default <code>aria-atomic</code> value, a screen reader will announce "Shopping cart, six items".</p>
<pre xml:space="preserve">
<code>
<p role="status" >
<img src="shopping-cart.png" alt="Shopping Cart">
<br>
<span id="cart">0</span> items
</p>
</code>
</pre>
<p class="working-example"><a href="../../working-examples/aria-role-status-shoppingcart/">Working example: role=status on a shopping cart</a></p>
</section>
</section>
<section id="tests">
<h2>Tests</h2>
<section class="test-procedure">
<h3>Procedure</h3>
<p>For each <a href="https://www.w3.org/TR/WCAG21/#dfn-status-messages">status message</a>:</p>
<ol>
<li>Check that the container destined to hold the status message has a <code>role</code> attribute with a value of <code>status</code> <em>before</em> the status message occurs.</li>
<li>Check that when the status message is triggered, it is inside the container.</li>
<li>Check that elements or attributes that provide information equivalent to the visual experience for the status message (such as a shopping cart image with proper ALT text) also reside in the container.</li>
</ol>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<ul>
<li>#1, #2 and #3 are true.</li>
</ul>
</section>
</section>
</body>
</html>