-
Notifications
You must be signed in to change notification settings - Fork 285
/
Copy pathARIA20.html
92 lines (82 loc) · 6.16 KB
/
ARIA20.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
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the region role to identify a region of the page</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the region role to identify a region of the page</h1><section class="meta"><p class="id">ID: ARIA20</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
<p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications</a>.</p>
</section><section id="description"><h2>Description</h2>
<p>This technique demonstrates how to assign a generic <code class="prop">region</code> role to a section of a page so that user agents and assistive technologies may be able to programmatically identify it. The <code class="prop">region</code> role demarcates a segment of the page that contains content of significance so that it is more readily discoverable and navigable. The generic region should be used when the section cannot be marked up using a standard document landmark role (see <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA11">ARIA11</a>).</p>
<p>It is important to name regions, because they are generic grouping elements and users will need some way to tell which region they are in. Regions can be named using <code class="att">aria-labelledby</code>, <code class="att">aria-label</code>, or another technique. Doing so helps to better expose content and information relationships on the page. The role of <code class="prop">region</code> should be used prudently, because if overused they can make the page overly verbose for screen reader users.</p>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<h3>Region on a news website</h3>
<p>A section on the home page of a news website that contains a poll that changes every week is marked up with role="region". The h3 text above the form is referenced as the region's name using <code class="att">aria-labelledby</code>.</p>
<pre xml:space="preserve">
<div role="region" aria-labelledby="pollhead">
<h3 id="pollhead">This week's Poll</h3>
<form method="post" action="#">
<fieldset>
<legend>Do you believe the tax code needs to be overhauled?</legend>
<input type="radio" id="r1" name="poll" />
<label for="r1">No, it's fine the way it is</label>
<input type="radio" id="r2" name="poll" />
<label for="r2">Yes, the wealthy need to pay more</label>
<input type="radio" id="r3" name="poll" />
<label for="r3">Yes, we need to close corporate loopholes</label>
<input type="radio" id="r4" name="poll" />
<label for="r4">Changes should be made across the board</label>
</fieldset>
</form>
<a href="results.php">See Poll Results</a>
</div>
</pre>
</section>
<section class="example">
<h3>Identifying a region on a banking site</h3>
<p>A user can expand links on a bank website after logging in to see details of term deposit accounts. The details are within a span marked up with <code class="prop">region</code> role. The heading for the region has role=heading and is included in the <code class="att">aria-labelledby</code> that names the region.</p>
<pre xml:space="preserve">
<ol>
<li><a id="l1" href="#" aria-expanded="false" title="Show details" aria-controls="block1" >John Henry's Account</a><img src="images/panel_expand.gif" alt="" />
<div id="block1" class="nowHidden" tabindex="-1" aria-labelledby="l1 cd1" role="region"><span id="cd1" role="heading" aria-level="3">Certificate of Deposit:</span>
<table>
<tr><th scope="row">Account:</th> <td>25163522</td></tr>
<tr><th scope="row">Start date:</th> <td>February 1, 2014</td></tr>
<tr><th scope="row">Maturity date:</th><td>February 1, 2016</td></tr>
<tr><th scope="row">Deposit Amount:</th> <td>$ 3,000.00</td></tr>
<tr><th scope="row">Maturity Amount:</th> <td>$ 3,072.43</td></tr>
</table>
</div>
</li>
</ol>
</pre>
</section>
<section class="example">
<h3>Identifying a portlet with a generic region</h3>
<p>This example shows how a generic <code class="prop">region</code> landmark might be added to a weather portlet. There is no existing text on the page that can be referenced as the label, so it is labelled with <code class="att">aria-label</code>.
</p>
<pre xml:space="preserve">
<div role="region" aria-label="weather portlet">
...
</div> </pre>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<p>For each section marked up with role="region":</p>
<ol>
<li>Examine the content and ensure that it is important enough to have an independent landmark</li>
<li>Ensure that a standard landmark role is not appropriate for this content</li>
<li>Check that the region has a programmatically determined name</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>Checks #1-3 are true.</li>
</ul>
</section>
</section><section id="related"><h2>Related Techniques</h2><ul>
<li><a href="../aria/ARIA11">ARIA11</a></li>
<li><a href="../aria/ARIA12">ARIA12</a></li>
<li><a href="../aria/ARIA13">ARIA13</a></li>
</ul></section><section id="resources"><h2>Resources</h2>
<ul>
<li>
<a href="https://www.w3.org/TR/wai-aria/#region">The Roles Model (role=region)</a>
</li>
</ul>
</section></body></html>