You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
update ARIA 17 and supporting working examples (#2466)
closes#2465
1. update code examples to:
1. make the required field's label conform to 3.3.2 Labels Or
Instructions.
2. remove invalid HTML.
3. add required `aria-checked` property for `role=radio` components.
2. mark up note as a note.
3. remove original author's publicly-visible name and employer from one
working example.
4. change "#" to "number".
5. improve the `<title>` of "Multi-part fields like social security
number and telephone number" example to remove text about reporting
violations for forms, which the example isn't about.
6. make custom radio buttons round instead of square.
7. correct description of Resources links.
8. tweak the vertical alignment of some elements
---------
Co-authored-by: Patrick H. Lauke <[email protected]>
Co-authored-by: Mike Gower <[email protected]>
<!DOCTYPE html><htmllang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using grouping roles to identify related form controls</title><linkrel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"/></head><body><h1>Using grouping roles to identify related form controls</h1><sectionclass="meta"><pclass="id">ID: ARIA17</p><pclass="technology">Technology: aria</p><pclass="type">Type: Technique</p></section><sectionid="applicability"><h2>When to Use</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 <codeclass="language-html">fieldset</code> / <codeclass="language-html">legend</code> technique (<ahref="../html/H71">H71</a>).</p>
5
12
<p>For a group of radio buttons, one should use <codeclass="language-html">role="radiogroup"</code> instead of <codeclass="language-html">role="group"</code>.</p>
6
13
<p>The group can be labeled using <codeclass="language-html">aria-labelledby</code>.</p>
7
14
<p>This technique is not meant for wrapping all controls on a form within a single container with <codeclass="language-html">role="group"</code>.</p>
8
-
</section><sectionid="examples"><h2>Examples</h2>
15
+
</section>
16
+
<sectionid="examples">
17
+
<h2>Examples</h2>
9
18
<sectionclass="example">
10
19
<h3>Social Security Number</h3>
11
-
12
-
<p>Social security number fields which are nine digits long and broken up into three segments can be grouped using <codeclass="language-html">role="group"</code>.</p>
20
+
<p>Social security number fields which are nine digits long and broken up into three segments can be grouped using <codeclass="language-html">role="group"</code>.</p>
<p>This example demonstrates use <codeclass="language-html">role=radiogroup</code>. Note also that the radio buttons are custom controls with <codeclass="language-html">role=radio</code>. (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>
34
+
<p>This example demonstrates use <codeclass="language-html">role=radiogroup</code>. Note also that the radio buttons are custom controls with <codeclass="language-html">role=radio</code>. 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>
27
35
<prexml:space="preserve"><codeclass="language-html"><h3>Set Alerts for your Account</h3>
<pclass="working-example">Working example: <ahref="../../working-examples/aria-grouping-related-fields/">using grouping roles to identify related form controls</a>.</p>
65
+
66
+
<divclass="note">
67
+
The script to make the <codeclass="language-html">span</code> actually work like radio buttons is not included in this example. For a similar, but coded slightly differently, working example, see the the ARIA Authoring Practices' <ahref="https://www.w3.org/WAI/ARIA/apg/patterns/radio/examples/radio-activedescendant/">Radio Group Example Using aria-activedescendant</a> example.
68
+
</div>
57
69
58
70
</section>
59
-
</section><sectionid="tests"><h2>Tests</h2>
60
-
<sectionclass="procedure"><h3>Procedure</h3>
71
+
</section>
72
+
<sectionid="tests">
73
+
<h2>Tests</h2>
74
+
<sectionclass="procedure">
75
+
<h3>Procedure</h3>
61
76
<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>
62
77
<ol>
63
-
<li> Check that the group of logically related input or select elements are contained within an element with <codeclass="language-html">role=group</code>.</li>
78
+
<li> Check that the group of logically related input or select elements are contained within an element with <codeclass="language-html">role=group</code>, or <codeclass="language-html">role=radiogroup</code> depending on the type of elements the group contains.</li>
64
79
<li> Check that this group has an accessible name defined using <codeclass="language-html">aria-label</code> or <codeclass="language-html">aria-labelledby</code>.</li>
<h1>Example of using grouping roles to identify related form controls</h1>
34
60
35
-
<p>NB: This example does not use the script needed to make it work, but does include enough to understand the grouping mechanism.</p>
36
-
<hr/>
61
+
<divclass="note" role="note">
62
+
<p>This example does not use scripts needed to make the form work, including having a roving <code>tabindex</code>, and checking and un-checking the custom radio buttons.</p>
0 commit comments