SkipTo.js for Bypass Blocks

SkipTo.js is a replacement for your old classic “Skip To Main Content” link for implementing the WCAG 4.2.1 Bypass Blocks requirement. The SkipTo.js creates a drop-down menu consisting of the links to important landmarks and headings on a given web page. Once installed and configured, the menu makes it easier for keyboard and screen reader users to quickly jump to the desired region of a page by simply choosing it from the list of options.

NOTE: SkipTo.js 5 Page Script is a total rewrite of SkipTo.js 4 to support custom web components and solidify SkipTo.js 5 in promoting the proper understanding and use of headings and landmark regions by making them visible to everyone, not just screen reader users. The SkipTo.js 5 code uses Javascript Modules for improved development and maintenance of SkipTo.js features.

Benefits

• 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.

Websites using SkipTo.js

There are two main ways to use the menu button for SkipTo.js in a page. In the default configuration the menu button is always visible making it useful to everyone to easily find and navigate to the important content regions identified by the author. This is similar to how curb cuts help more than just people using wheelchairs. It is also easier for people using voice recognition to activate the button using the “click skip to content” command and use similar voice commands to activate SkipTo.js menu items. The “popup” option is the more traditional approach to fulfilling the “bypass bocks” requirement of the Web Content Accessibility Guidelines, but this option makes the feature less visible to people who might benefit.

Visible Menu Button (default)

• DRES Accessible IT Group
• AInspector for Firefox
• College of Applied Health Sciences

Popup Menu Button

• ARIA Authoring Practices Guide
• Admissions at the University of Illinois
• cPanel Web Hosting Service @ Illinois
• College of Education (Web components)

NOTE: Popup menu button option is available through configuration of SkipTo.js when it is loaded.

How it works

1. The SkipTo.js menu button should be the first tabable element (e.g. Tab key)on the page, and by default the button is visible, but can be configured to “popup” when the button becomes receives focus.
2. Once focus is on the menu button, pressing the Enter, Space, Down Arrow or Up Arrow keys will pull down the list of important landmarks and headings on the page. The button is based on the ARIA Authoring Practice design pattern for menu button.
3. Use arrow keys to select your choice and press Enter to move focus to the section of the page.

Shortcut key

A shortcut key can be used to open the SkipTo.js menu from anywhere on the page. Version 5 changes the shortcut key operation from using the HTML accesskey attribute to use a scripted method to improve consistency of the shortcut keys between browsers and to support screen reader users, since some screen readers do not support accesskeys.

To use the “SkipTo.js” shortcut key, you would press either alt + 0 (Windows/Unix/Linux) or Option + 0 (macOS). Apple keyboards do not have an Alt key, so the Option key is used as the modifier for the shortcut. The shortcut key is the same for Firefox, Chrome and Safari on the same operating system.

• Alt+0 : Windows, Unix and Linux.
• Option+0 : macOS.

Feedback and Reporting Issues

We welcome your feedback! Please do not hesitate to raise issues and comment on Github if something doesn’t work or you have ideas on how to improve the script.

Happy skipping!