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: 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

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:

  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

Resources

Resources are for information purposes only, no endorsement implied.

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.

Expected Results

  • Checks 1, 2, 3, and 4 above are true.


Insert non-formatted text here