Skip to content
This repository has been archived by the owner on Jun 30, 2018. It is now read-only.

Aria status role #777

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Aria status role #777

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
adaf542
Introduction text
mbgower Feb 22, 2018
b10c86a
Added examples, procedures and expected results
mbgower Feb 23, 2018
becab06
Modified the example and procedure based on feedback
mbgower Feb 27, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
81 changes: 81 additions & 0 deletions techniques/aria/aria-status-role.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!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 ARIA role=status</h1>
<section class="meta">
<h2>Metadata</h2>
<p class="id">ID: W##</p>
<p class="technology">Technology: ARIA</p>
<p class="type">Type: Technique</p>
</section>
<section class="applicability">
<h2>When to Use</h2>
<p class="instructions">This technique relates to:
<ul>
<li>Success Criterion 3.2.6 Status Changes</li>
</ul>
</p>
</section>
<section class="description">
<h2>Description</h2>
<p class="instructions">
The purpose of this technique is to notify Assistive Technologies (AT) when content has been updated with information about the user's or application's status. The aria live region role of <code>status</code> has an implicit <code>aria-live</code> value of "polite", 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 an <code>aria-atomic</code> value of <code>true</code>, so that updates to the region marked with a role of <code>status</code> will result in the AT presenting the entire contents of the region to the user, including any author-defined label. The 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/#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>
<div class="code">
<pre>
<code>
<div role="status">5 results returned.</div>
</code>
</pre>
</div>
<p>Working example: link</p>
</section>
<section class="example">
<h3>Updating the shopping cart status</h3>
<p>After a user presses an Add to Shopping Cart button, a section of content near the Shopping Cart icon updates the text to read "6 items". The <code>div</code> containing this text is marked with the role of <code>status</code>. For maximum compatibility with current assistive technology and user agents, the default <code>aria-live</code> value is explicitly set. Because the shopping cart icon adds visual context, a label is added with aria. A screen reader will announce "Shopping cart, six items".</p>
<div class="code">
<pre>
<code>
<div class="total-items" id="cart-items" role="status" aria-label="shopping cart" aria-live="polite">6 items</div>
</code>
</pre>
</div>
<p>Working example: link</p>
</section>
</section>
<section class="tests">
<h2>Tests</h2>
<section class="test-procedure">
<h3>Procedure</h3>
On a page that contains a status message:
<ol>
<li>Check that status message text is inside a container given a role of <code>status</code>.</li>
</ol>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<ul>
<li>#1 is true.</li>
</ul>
</section>
</section>
<section class="related">
<h2>Related Techniques</h2>
<ul>
<li>ID</li>
</ul>
</section>
</body>
</html>