SkipTo 4 Script

The SkipTo Script is a replacement for the old school “Skip To Main” link, (so please use it as such)! The SkipTo script 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, voice recognition and screen reader users to quickly jump to the desired location by simply choosing it from the list of options.

Benefits of SkipTo

  • All users can get an outline of the major content areas on the page.
  • 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.

Websites using SkipTo

There are two main ways to include the menu button for SkipTo 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 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)

Popup Menu Button

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

How it works

  1. The SkipTo menu button should be the first tabable element on the page, and if it is configured not to be visible when the page is loaded, the menu button becomes visible when it receives focus.
  2. Once the keyboard 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.
  4. If you decide to reach the menu again, simply press the built-in access key (0 by default). See the notes on Access keys for More information on how to use them.

Access keys

Access keys work just like regular shortcut keys except that they need a browser-specific modifier key in order to work. For example, to use the “SkipTo” access key, you would press the modifier key + the access key (“0” is the default accesskey). A list for how this would work in most popular browsers and operating systems.

  • Mozilla Firefox — Alt+Shift+0 (Windows or Linux) and Control+Option+0 (Mac OS)
  • Google Chrome and Opera — Alt+0 (Windows or Linux) and Control+Option+0 (Mac OS).
  • Safari — Control+Option+0 (MacOS).

NOTE: Browsers on iOS and iPadOS devices support accesskeys to move focus to the menu button, but do not support the menu button keyboard commands to use the menu at this time. Browsers on Android devices do not support accesskeys at this time.

Give It A Try

  • SkipTo is used in this website, and is the “Skip To Content” button on the top of the page.
  • SkipTo information on installation and configuration.

Use the CDN reference to the script, to make sure you have the latest version of the script:
https://cdn.disability.illinois.edu/skipto.min.js