Techniques/CSS/Using an invisible header text in the sidebar navigation
See also Response to this technique.
- Submitter's Name: Devarshi Pant
- Submitter's Email: devarshipant@gmail.com
Status
Based on https://www.w3.org/2002/09/wbs/35422/20010623misc/results#xnavhead and discussion in 2/10/2015 meeting we will not be pursuing this technique.
Applicability
All technologies that support CSS
This technique relates to:
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.
Examples of successful application of the Technique
A blind user navigates the page using the headings list. A level three header that reads "Sidebar Navigation:" etc., allows a user:
- To gain quick entry into the sidebar
- To understand the structure of the page
- To correlate the links underneath the header text
Resources
Resources are for information purposes only, no endorsement implied.
Related Techniques
- G96: Providing textual identification of items that otherwise rely only on sensory information to be understood
- G112: Using inline definitions
- G117: Using text to convey information that is conveyed by variations in presentation of text
- G128: Indicating current location within navigation bars
- G141: Organizing a page using headings
Tests
Procedure
- Pull up the headings list using the screen reader.
- Notice the header that states “Sidebar Navigation:” etc.
- Check if activating the header places the focus inside the sidebar.
- Tabbing once, check, if the second element to receive focus is below the invisible header.
Expected Results
- Checks 1, 2, 3, and 4 above are true.
Insert non-formatted text here