CSS Techniques - Adding off-screen header in front of a custom widget or a complex control

Submitter's Name: Devarshi Pant
Submitter's Email: devarshipant@gmail.com

Technique ID: UNKNOWN
Short Name: Adding off-screen header in front of a custom widget or a complex control
Technique Category: CSS Techniques
Success Criterion Reference: UNKNOWN

Applicability:
Applicable to fly out menus, accordion menus, drop down menus, and form controls that initiate incremental changes below.

UA Issues:
None

Description:
The objective of this technique is to allow screen reader and screen magnification technologies discover the type and behavior of custom widgets and controls by adding an off-screen text marked up as header level 5 in front of the control. The technique uses no more than twenty-five words to describe the widget type and any complex behavior that may cause disorientation amongst users. The technique uses header level 5 and the wording follows the format: <h5>Flyout menu: tab to navigate and escape to move out. Use Alt + x to get back to the menu</h5> etc.

Often times, a complex form control either incrementally adds or removes content from the page without letting users know of the impending behavior. Using this technique by adding an off-screen header in front of a control, for example: <h5>Selecting X checkbox displays a list of ten additional choices. After selecting the checkbox, it is recommended to use the forms list</h5>, etc. This empowers blind and low vision users with information on the impending control, its behavior, and tips (if any, from testers) on how to interact with the control. 

The technique uses CSS to hide the text off-screen.


Related Techniques:
C22

Test File 1:
CSS:

.hidden 	{
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

HTML:
<span class="hidden"><h5 class="h-four">Selecting X checkbox displays a list of ten additional choices. After selecting the checkbox, it is recommended to use the forms list (hidden)</h4></span>

Test File 1 Pass/Fail: pass

Additional Notes:
This will be an advisory techniqie to meet SC 1.3.1. In addition, this may also partially satisfy part of SC 4.1.2.

No guidelines reference was submitted!
No example 1 header was submitted!
No example 1 description was submitted!
No example 2 header was submitted!
No example 2 description was submitted!
No resource 1 title submitted!
No resource 1 URI submitted!
No resource 2 title submitted!
No resource 2 URI submitted!
No test procedure was submitted!
No expected result was submitted!
No test file 2 was submitted!
No test file 2 pass/fail was submitted!


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

<technique id="UNKNOWN">
<short-name>Adding off-screen header in front of a custom widget or a complex control</short-name>
<applies-to>
<guideline idref="" />
<success-criterion idref="UNKNOWN" />
</applies-to>

<applicability>
Applicable to fly out menus, accordion menus, drop down menus, and form controls that initiate incremental changes below.
</applicability>
<ua_issues>
None
</ua_issues>
<description>
The objective of this technique is to allow screen reader and screen magnification technologies discover the type and behavior of custom widgets and controls by adding an off-screen text marked up as header level 5 in front of the control. The technique uses no more than twenty-five words to describe the widget type and any complex behavior that may cause disorientation amongst users. The technique uses header level 5 and the wording follows the format: <h5>Flyout menu: tab to navigate and escape to move out. Use Alt + x to get back to the menu</h5> etc.

Often times, a complex form control either incrementally adds or removes content from the page without letting users know of the impending behavior. Using this technique by adding an off-screen header in front of a control, for example: <h5>Selecting X checkbox displays a list of ten additional choices. After selecting the checkbox, it is recommended to use the forms list</h5>, etc. This empowers blind and low vision users with information on the impending control, its behavior, and tips (if any, from testers) on how to interact with the control. 

The technique uses CSS to hide the text off-screen.

</description>

<examples>
<ex_head_1>

</ex_head_1>
<ex_desc_1>

</ex_desc_1>
<ex_head_2>

</ex_head_2>
<ex_desc_2>

</ex_desc_2>
</examples>

<resources>
<resources_title1>

</resources_title1>
<resource_uri1>

</resource_uri1>
<resources_title2>

</resources_title2>
<resource_uri2>

</resource_uri2>
</resources>

<related_techniques>
<related_technique>
C22
</related_technique>
</related_techniques>

<tests>
<procedure>

</procedure>
<expected_result>

</expected_result>
<test_file_1>
CSS:

.hidden 	{
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

HTML:
<span class=&quot;hidden&quot;><h5 class=&quot;h-four&quot;>Selecting X checkbox displays a list of ten additional choices. After selecting the checkbox, it is recommended to use the forms list (hidden)</h4></span>
</test_file_1>
<pass_fail_1>
pass
</pass_fail_1>
<test_file_2>

</test_file_2>
<pass_fail_2>

</pass_fail_2>
</tests>

</technique>

Additional Notes:

This will be an advisory techniqie to meet SC 1.3.1. In addition, this may also partially satisfy part of SC 4.1.2.

Received on Tuesday, 28 June 2011 14:51:40 UTC