Skip to Landmarks and Headings

Description

Keyboard Navigation and WCAG Bypass Blocks

The "Skip To" extension implements a long standing browser accessibility requirement to implement keyboard navigation to landmark regions and section headings based on the W3C WCAG Success Criteria 2.4.1 "Bypass Blocks" requirement and the W3C UAAG Requirement 9.9 "Structured Navigation". Many people with disabilities cannot use a mouse or touch pad to navigate the content of a web page and they typically rely on only using the keyboard for operating the browser. The built-in keyboard support in browsers is limited to the TAB key to navigate to links and form controls. The "Skip To" extension adds additional keyboard support to navigate the landmark and heading structure using the keyboard, a major improvement for accessing the non-interactive content of a page.

Heading Outline

The "Skip To" menu includes an outline of the heading structure of a page for all users view and use for page navigation. The outline provides a convenient way for users to view the content of a page without having to scroll through the web page. The outline makes the actual section and sub sections of the page visible, which is often difficult to see when just viewing the graphical rendering of a portion of a web page. The outline also provides an easy way for web page authors to check the heading structure of their web page to make sure they have properly identified the section and sub-sections of the page content.

Benefits to Screen Reader Users

Screen readers have built-in functions to separately view the landmark regions and headings of a page, but the "Skip To" extension also provides benefit to them. By providing a unified and filtered list of the most frequently used regions and top level headings, the screen reader user has a much shorter lists of items to read to get to the most important parts of a web page.

Keyboard Shortcuts

To open the "Skip To" menu using the keyboard, press Alt+2 (Option+2 on the Mac).

You can move through the menu items by pressing the following keys:

arrow down, arrow up: step through the items one at a time

page down, page up: move eight items forward or backward

home, end: move to first or last item

m: 'main' landmark

n: next 'navigation' landmark

s: next 'search' landmark

1, 2, 3, 4, 5, 6: next heading of that level

Skip To Options

The "Skip To" extension options allow the user to configure the number of heading levels used to create the outline. The benefit of limiting the heading levels is to make the outline shorter and easier to scan for topics of interest. There is an additional option to limit the list of headings to only headings in the main landmark region. In well structured pages, the main region contains the most important information on the page; limiting headings to the main region makes it easier to identify topics of interest by filtering out headings in other parts of the page.

What are ARIA Landmark Regions?

Many designers, developers and people browsing the web are not familiar with ARIA landmark regions, but they are a powerful way to make web pages more accessible by identifying the layout and organization of a page to users of screen readers who cannot see the graphical rendering. Many HTML elements like 'main', 'nav', 'aside', 'header' and 'footer' define landmark regions automatically. These automatic definitions requires web designers and developers to understand how to use and create landmark regions to ensure they are meaningful and useful to users of screen readers. The "Skip To" extension provides a convenient way for designers and developers see a list of landmark regions on the page.