SkipTo.js Browser Extensions

Get SkipTo.js Extensions

Note: The menu can be reopened at any time by using the short cut key, option + 0 on the macOS or alt + 0 on Windows and Linux.

Why Use the SkipTo.js Extensions?

  • People with disabilities can navigate landmarks regions and headings of any website using keyboard commands, extending the browser’s simple tab keyboard navigation to links and form controls.
  • All users can get an outline of the page in a single menu to more easily explore the content of a web page.
  • Testing your website for using SkipTo.js page script to implement WCAG 2.4.1 Bypass Blocks requirement.
  • Testing websites for proper use of landmark regions and headings.

Features

  • NEW: Navigation using keyboard shortcuts to landmark regions and headings on a page.
  • The “Skip To Content” button can be visible or hidden (e.g. popup version) after the page completes loading.
  • If the “Skip To Content” button is hidden it becomes visible when it receives keyboard focus when the user uses the tab key.
  • When focus is on the button, users can open the menu using the space or down arrow key to view or select the landmarks and headings on the page.
  • In the landmark regions group the landmarks are ordered by the importance of the landmark, main first, followed by search, navigation, complemntary, and contentinfo.
  • In the heading group the headings are in document order.
  • Moving keyboard focus or hovering over menu items scrolls the assocaited area on the page into view.
  • The menu can be reopened at any time by using the short cut key, option + 0 on the macOS or alt + 0 on Windows and Linux.

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 touchpad to navigate the content of a web page and they typically rely on only using the keyboard for operating the browser. However, the built-in keyboard support in browsers is limited to the Tab key for navigating to links and form controls.

The “Skip To” extension adds additional keyboard support for navigating the landmarks 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 to view and use for page navigation. The outline provides a convenient way for users to get an overview the content of a page without having to scroll through the entire page.

The outline makes the actual sections and subsections of the page visible, which is often difficult to see when just viewing the graphical rendering of a portion of a web page. It also provides an easy way for web page authors to check the heading structure of their page to make sure they have properly identified the section and subsection topics on the page.

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 provides additional benefits. By providing a unified and filtered list of the most frequently used landmark regions and top level headings, the screen reader user has access to much shorter lists of items to read in order to get to the most important parts of the page.

Source Code

SKipTo.js is open source software and the code can be found at the GitHub SkipTo.js repository.

Original Browser Extension

“Skip to Landmarks and Headings” extend the Chrome and Firefox browsers by identifying and providing navigation to the ARIA landmark regions and HTML section headings (h1–h6) of a web page. The extension provides a menu divided into two groups: (1) the important landmark regions and (2) an outline of the heading structure of the page.

The keyboard shortcut for opening the menu is alt+2 (or option+2 on macOS) and cursors keys can be used to navigate the menu. Activating a menu item scrolls the item into view and moves keyboard focus to the corresponding section of the page.

“Skip to Landmarks and Headings” provides a means for people using the keyboard to efficiently navigate to specific content on the page. The outline of headings provides an easy way for people to view the topics on a web page without having to scroll through the entire page.

The SkipTo extension can be installed in Firefox and/or Brave/Chrome by visiting their respective extensions websites:

 

Source Code

“Skip to Landmarks and Headings” is open source software and the code can be found at the GitHub SKipTo Extension repository.