-
Notifications
You must be signed in to change notification settings - Fork 285
/
Copy pathARIA17.html
84 lines (78 loc) · 5.61 KB
/
ARIA17.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 lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using grouping roles to identify related form controls</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using grouping roles to identify related form controls</h1><section class="meta"><p class="id">ID: ARIA17</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 (WAI-ARIA)</a>. </p>
</section><section id="description"><h2>Description</h2>
<p>The objective of this technique is to mark up a set of related controls within a form as a group. Any label associated with the group also serves as a common label or qualifier for individual controls in the group. Assistive technologies can indicate the start and end of the group and the group’s label as one navigates into and out of the group. This is a viable alternative for grouping form controls programmatically when the user interface’s design makes it difficult to employ the fieldset-legend technique (<a href="H71">H71</a>).</p>
<p>For a group of radio buttons, one could also use role="radiogroup" instead of role="group".</p>
<p>The group can be labeled using <code class="att">aria-labelledby</code>.</p>
<p>This technique is not meant for wrapping all controls on a form within a single container with role="group".</p>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<h3>Social Security Number</h3>
<p>Social security number fields which are 9 digits long and broken up into 3 segments can be grouped using role="group".</p>
<pre xml:space="preserve"><div role="group" aria-labelledby="ssn1">
<span id="ssn1">Social Security#</span>
<span style="color: #D90D0D;"> * </span>
<input size="3" type="text" aria-required="true" title="First 3 digits" />-
<input size="2" type="text" aria-required="true" title="Next 2 digits" />-
<input size="4" type="text" aria-required="true" title="Last 4 digits" />
</div></pre>
<p class="working-example">Working example: <a href="../../working-examples/aria-grouping-multipart-fields-ssn/">Multiple part field groups</a>.</p>
</section>
<section class="example">
<h3>Identifying radio groups</h3>
<p>This example demonstrates use role=radiogroup. Note also that the radio buttons are custom controls with role=radio. (But the script to make the span actually work like radio buttons is not included in this example. ) One may optionally employ CSS to place a border around groups of such fields to visually reinforce the group relationship. The CSS properties are available below the form.</p>
<pre xml:space="preserve"><h3>Set Alerts for your Account</h3>
<div role="radiogroup" aria-labelledby="alert1">
<p id="alert1">Send an alert when balance exceeds $ 3,000</p>
<div>
<span role="radio" aria-labelledby="a1r1" name="a1radio"></span>
<span id="a1r1">Yes</span>
</div>
<div>
<span role="radio" aria-labelledby="a1r2" name="a1radio"></span>
<span id="a1r2">No</span>
</div>
</div>
<div role="radiogroup" aria-labelledby="alert2">
<p id="alert2">Send an alert when a charge exceeds $ 250</p>
<div>
<span role="radio" aria-labelledby="a2r1" name="a2radio"></span>
<span id="a2r1">Yes</span>
</div>
<div>
<span role="radio" aria-labelledby="a2r2" name="a2radio"></span>
<span id="a2r2">No</span>
</div>
</div>
<p><input type="submit" value="Continue" id="continue_btn" name="continue_btn" /></p></pre>
<p>Related CSS Style Definition to place a border around the group of fields :</p>
<pre xml:space="preserve">div[role=radiogroup] {
border: black thin solid;
} </pre>
<p class="working-example">Working example: <a href="../../working-examples/aria-grouping-related-fields/">using grouping roles to identify related form controls</a>.</p>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<p>For groups of related controls where the individual labels for each control do not provide a sufficient description, and an additional group level description is needed:
</p>
<ol>
<li> Check that the group of logically related input or select elements are contained within an element with role=group.
</li>
<li> Check that this group has an accessible name defined using <code class="att">aria-label</code> or <code class="att">aria-labelledby</code>.
</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>#1 and #2 are true.</li>
</ul>
</section>
</section><section id="related"><h2>Related Techniques</h2><ul>
<li><a href="../html/H71">H71</a></li>
</ul></section><section id="resources"><h2>Resources</h2>
<ul>
<li>
<a href="https://www.w3.org/TR/wai-aria/#group">Accessible Rich Internet Applications (WAI-ARIA), The Roles Model</a>
</li>
</ul>
</section></body></html>