This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.
Techniques/CSS/Using an invisible header text in the sidebar navigation
From WCAG WG
See also Response to this technique.
Using an invisible header text in the sidebar navigation
- Submitter's Name: Devarshi Pant
- Submitter's Email: firstname.lastname@example.org
All technologies that support CSS
This technique relates to:
- Success Criterion 2.4.6 (Headings and Labels))
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
Example 1: Left Navigation driven website
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 are for information purposes only, no endorsement implied.
- 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
- 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.
- Checks 1, 2, 3, and 4 above are true.
Insert non-formatted text here