CSS Techniques - Using an invisible header text in the sidebar navigation.

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

Technique ID: UNKNOWN
Short Name: Using an invisible header text in the sidebar navigation.
Technique Category: CSS Techniques
Success Criterion Reference: UNKNOWN

Applicability:
This technique allows screen reader users to differentiate sidebar navigation links from other links in the page.

UA Issues:
None

Description:
The objective of this technique is to allow screen reader users to get to sidebar links by adding an invisible heading positioned off screen. The wording of the header is something like, “Sidebar Navigation:” and is a semantic <H3> header text.

Example 1 Head: Left Navigation driven website
Example 1 Description:
A blind user navigates the page using the headings list. A level three header that reads "Sidebar Navigation:" etc., allows a user: 
1) To gain quick entry into the sidebar 
2) To understand the structure of the page 
3) To correlate the links underneath the header text


Resource 1 Title: WebAIM Article on off-screen positioning
Resource 1 URI: http://webaim.org/techniques/css/invisiblecontent/

Related Techniques:
G96
G112
G117
G128
G141

Test Procedure:
1. Pull up the headings list using the screen reader.
2. Notice the header that states “Sidebar Navigation:” etc.
3. Check if activating the header places the focus inside the sidebar. 
4. Tabbing once, check, if the second element to receive focus is below the invisible header.


Expected Result:
Checks 1, 2, 3, and 4 above are true.


No guidelines reference was submitted!
No example 2 header was submitted!
No example 2 description 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!
No additional notes were submitted!


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

<technique id="UNKNOWN">
<short-name>Using an invisible header text in the sidebar navigation.</short-name>
<applies-to>
<guideline idref="" />
<success-criterion idref="UNKNOWN" />
</applies-to>

<applicability>
This technique allows screen reader users to differentiate sidebar navigation links from other links in the page.
</applicability>
<ua_issues>
None
</ua_issues>
<description>
The objective of this technique is to allow screen reader users to get to sidebar links by adding an invisible heading positioned off screen. The wording of the header is something like, “Sidebar Navigation:” and is a semantic <H3> header text.
</description>

<examples>
<ex_head_1>
Left Navigation driven website
</ex_head_1>
<ex_desc_1>
A blind user navigates the page using the headings list. A level three header that reads &quot;Sidebar Navigation:&quot; etc., allows a user: 
1) To gain quick entry into the sidebar 
2) To understand the structure of the page 
3) To correlate the links underneath the header text

</ex_desc_1>
<ex_head_2>

</ex_head_2>
<ex_desc_2>

</ex_desc_2>
</examples>

<resources>
<resources_title1>
WebAIM Article on off-screen positioning
</resources_title1>
<resource_uri1>
http://webaim.org/techniques/css/invisiblecontent/
</resource_uri1>
<resources_title2>

</resources_title2>
<resource_uri2>

</resource_uri2>
</resources>

<related_techniques>
<related_technique>
G96
</related_technique>
<related_technique>
G112
</related_technique>
<related_technique>
G117
</related_technique>
<related_technique>
G128
</related_technique>
<related_technique>
G141
</related_technique>
</related_techniques>

<tests>
<procedure>
1. Pull up the headings list using the screen reader.
2. Notice the header that states “Sidebar Navigation:” etc.
3. Check if activating the header places the focus inside the sidebar. 
4. Tabbing once, check, if the second element to receive focus is below the invisible header.

</procedure>
<expected_result>
Checks 1, 2, 3, and 4 above are true.
</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:

Received on Monday, 20 June 2011 17:49:41 UTC