- From: WCAG 2.0 Techniques Submission Form <nobody@w3.org>
- Date: Thu, 23 May 2013 02:16:53 +0000
- To: public-wcag2-techs@w3.org
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 "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.
</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="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>
</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="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>
</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 "Yes", 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