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
Jump to: navigation, search


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


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