SkipTo Documentation

script.html

SkipTo.js

SkipTo.js Page Script

SkipTo.js page script is a replacement for the classic “Skip To Main Content” link for implementing the WCAG 2.4.1 Bypass Blocks requirement. The page script creates a drop-down menu consisting of the links to important landmarks and headings on a given web page.

Features

  • Easy and powerful way to conform to the “Bypass Blocks” requirement of the Web Content Accessibility Guidelines.
  • Screen reader users can get a higher level navigation menu without having to use the screen reader landmark and header navigation commands which typically include longer lists of lower level headings and less used landmarks.
  • Keyboard only users can more efficiently navigate to content on a page.
  • Speech recognition users can use the menu to more efficiently navigate to content on a page.
  • When the “Skip To Content” menu button is visible when the page is loaded everyone can use it to identify and navigate to important regions on a page.
  • Authors can configure SkipTo.js to identify the most important regions, ideally about 7-12 items to make it easier for people to read the list and choose an option. Remember the more items, the longer it will take for the user to identify which item they want to choose.

SkipTo.js Browser Extensions

SkipTo.js browser extensions fill a void in browsers to provide the navigation features to meet WCAG 2.4.1 Bypass Blocks requirement and keyboard shortcuts to navigate to landmark regions and headings. The extension creates a drop-down menu of the landmark regions and headings on the current web page. Selecting an option in the menu or using a shortcut key moves keyboard focus to the landmark region or heading and scrolls the content into view. The menu also provides a convenient table of contents of what is on the page for ALL users.

Additional keyboard shortcuts provide sequential navigation to landmark regions and headings. Similar to how the TAB key sequentially navigates to controls and links.

Source Code

SkipTo.js is open source software. The code is available at https://github.com/skipto-landmarks-headings/page-script-5/.