ARIA Techniques - Marking logical group of fields using role=group / role=radiogroup when using fieldset-legend is not practical

Submitter's Name: Sailesh Panchang
Submitter's Email: sailesh.panchang@deque.com

Technique ID: UNKNOWN
Short Name: Marking logical group of fields using role=group / role=radiogroup  when using fieldset-legend is not practical
Technique Category: ARIA Techniques
Success Criterion Reference: UNKNOWN

Applicability:
Controls within a form that need to be grouped and referenced by a common label - SC 1.3.1 

UA Issues:
None; works with JAWS, NVDA, VoiceOver and Internet Explorer 8/9, Firefox, Safari and Google Chrome 

Description:
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. Screen reading software announce the start and end of the group  and the group’s label as one navigates into 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 (H71). (The WAI-ARIA 1.0 "Role Model" lists the HTML FIELDSET as a related concept).  
For a group of radio buttons, one could also use role=”radiogroup” instead of role=”group.

Note: The group can be labeled using aria-labelledby.  

This technique is not meant for wrapping  all controls on a form within a single container with role=group.


Example 1 Head: Social security number fields which are 9 digits long and broken up into 3 segments can be grouped u
Example 1 Description:
<div role="group" aria-labelledby="ssn1">
<span id="ssn1">Social Security#</span> <span style="color: red;"> * </span>
<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" />
</span></div>


Example 2 Head: Form controls that need to be grouped within a table as a container: 
Example 2 Description:
<h2>Credit Card Application</h2>
<form id="form3">
<table border="" role="presentation">
<tr>
      <td><label for="amt">Credit limit requested $:</label></td>
<td><input id="amt" type="text" size="5" /></td>
    </tr>
<tr><td colspan="2" role="group" aria-labelledby="ctype"><span id="ctype">Credit Card Type: 
</span> 
<span>
<input type="radio" id="ct1" name="cc" />
<label for="ct1">Visa </label>
        |
<input type="radio" id="ct2" name="cc" />
<label for="ct2">Mastercard </label>
        |
<input type="radio" id="ct3" name="cc" />
<label for="ct3">American Express </label>
        |
<input type="radio" id="ct4" name="cc" />
<label for="ct4">Discover </label>
        </span></td>
    </tr>
<tr>
      <td colspan="2" style="text-align: right;"><input type="submit" value="Next Step" 
/></td></tr>  
</table></form>


Resource 1 Title: The Roles Model | Accessible Rich Internet Applications (WAI-ARIA) 1.0
Resource 1 URI: http://www.w3.org/TR/wai-aria/roles#group

Related Techniques:
H71

Test Procedure:
1. Do the form controls appear together  as one block within a form?
2. Do they have a common text label without which it is difficult to fully comprehend the purpose of the individual controls?
3. Are there other controls in the form that are not part of this group? 


Expected Result:
If the answer to all above is "Yes", the role=group may be employed

Additional Notes:
Example page at
http://mars.dequecloud.com/demo/aria-group.htm

Note to WCAG-WG:

I believe this is a sufficient technique for SC 1.3.1 like H71 because of wide AT and browser support

No guidelines reference was submitted!
No resource 2 title submitted!
No resource 2 URI submitted!
No test file 1 was submitted!
No test file 1 pass/fail was submitted!
No test file 2 was submitted!
No test file 2 pass/fail was submitted!


------------------------------------------------

<technique id="UNKNOWN">
<short-name>Marking logical group of fields using role=group / role=radiogroup  when using fieldset-legend is not practical</short-name>
<applies-to>
<guideline idref="" />
<success-criterion idref="UNKNOWN" />
</applies-to>

<applicability>
Controls within a form that need to be grouped and referenced by a common label - SC 1.3.1 
</applicability>
<ua_issues>
None; works with JAWS, NVDA, VoiceOver and Internet Explorer 8/9, Firefox, Safari and Google Chrome 
</ua_issues>
<description>
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. Screen reading software announce the start and end of the group  and the group’s label as one navigates into 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 (H71). (The WAI-ARIA 1.0 &quot;Role Model&quot; lists the HTML FIELDSET as a related concept).  
For a group of radio buttons, one could also use role=”radiogroup” instead of role=”group.

Note: The group can be labeled using aria-labelledby.  

This technique is not meant for wrapping  all controls on a form within a single container with role=group.

</description>

<examples>
<ex_head_1>
Social security number fields which are 9 digits long and broken up into 3 segments can be grouped u
</ex_head_1>
<ex_desc_1>
<div role=&quot;group&quot; aria-labelledby=&quot;ssn1&quot;>
<span id=&quot;ssn1&quot;>Social Security#</span> <span style=&quot;color: red;&quot;> * </span>
<span><input size=&quot;3&quot; type=&quot;text&quot; aria-required=&quot;true&quot; title=&quot;First 3 digits&quot; />-
<input size=&quot;2&quot; type=&quot;text&quot; aria-required=&quot;true&quot; title=&quot;Next 2 digits&quot; />-
<input size=&quot;4&quot; type=&quot;text&quot; aria-required=&quot;true&quot; title=&quot;Last 4 digits&quot; />
</span></div>

</ex_desc_1>
<ex_head_2>
Form controls that need to be grouped within a table as a container: 
</ex_head_2>
<ex_desc_2>
<h2>Credit Card Application</h2>
<form id=&quot;form3&quot;>
<table border=&quot;&quot; role=&quot;presentation&quot;>
<tr>
      <td><label for=&quot;amt&quot;>Credit limit requested $:</label></td>
<td><input id=&quot;amt&quot; type=&quot;text&quot; size=&quot;5&quot; /></td>
    </tr>
<tr><td colspan=&quot;2&quot; role=&quot;group&quot; aria-labelledby=&quot;ctype&quot;><span id=&quot;ctype&quot;>Credit Card Type: 
</span> 
<span>
<input type=&quot;radio&quot; id=&quot;ct1&quot; name=&quot;cc&quot; />
<label for=&quot;ct1&quot;>Visa </label>
        |
<input type=&quot;radio&quot; id=&quot;ct2&quot; name=&quot;cc&quot; />
<label for=&quot;ct2&quot;>Mastercard </label>
        |
<input type=&quot;radio&quot; id=&quot;ct3&quot; name=&quot;cc&quot; />
<label for=&quot;ct3&quot;>American Express </label>
        |
<input type=&quot;radio&quot; id=&quot;ct4&quot; name=&quot;cc&quot; />
<label for=&quot;ct4&quot;>Discover </label>
        </span></td>
    </tr>
<tr>
      <td colspan=&quot;2&quot; style=&quot;text-align: right;&quot;><input type=&quot;submit&quot; value=&quot;Next Step&quot; 
/></td></tr>  
</table></form>

</ex_desc_2>
</examples>

<resources>
<resources_title1>
The Roles Model | Accessible Rich Internet Applications (WAI-ARIA) 1.0
</resources_title1>
<resource_uri1>
http://www.w3.org/TR/wai-aria/roles#group
</resource_uri1>
<resources_title2>

</resources_title2>
<resource_uri2>

</resource_uri2>
</resources>

<related_techniques>
<related_technique>
H71
</related_technique>
</related_techniques>

<tests>
<procedure>
1. Do the form controls appear together  as one block within a form?
2. Do they have a common text label without which it is difficult to fully comprehend the purpose of the individual controls?
3. Are there other controls in the form that are not part of this group? 

</procedure>
<expected_result>
If the answer to all above is &quot;Yes&quot;, the role=group may be employed
</expected_result>
<test_file_1>

</test_file_1>
<pass_fail_1>

</pass_fail_1>
<test_file_2>

</test_file_2>
<pass_fail_2>

</pass_fail_2>
</tests>

</technique>

Additional Notes:

Example page at
http://mars.dequecloud.com/demo/aria-group.htm

Note to WCAG-WG:

I believe this is a sufficient technique for SC 1.3.1 like H71 because of wide AT and browser support

Received on Thursday, 23 May 2013 02:16:58 UTC