SkipTo is a replacement for your old classic "Skipnav" link, (so please use it as such)! The SkipTo script creates a drop-down menu consisting of the links to the important places 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 location by simply choosing it from the list of options.

How it works

1. The SkipTo menu becomes visible the first time the user tabs into the page.
2. Once the keyboard focus is on the menu, pressing the ENTER or the SPACEBAR key will pull down the list of high-level headings and landmarks on the current page.
3. Use arrow keys to select your choice and press ENTER to skip to it.
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.

How do I get it on my web site?

If you are using Drupal or Wordpress, you are in great luck. We are providing plugins for both of these content management systems that you can download from the SkipTo Github Page. To sweeten your day even more, the GreaseMonkey script and Safari bookmarklet are also available from the page above. Enjoy!

What about plain JavaScript?

All you need are either SkipTo.js or SkipTo.min.js from the "compiled/js" directory. Please note that SkipTo.min.js is a minified (a lighter version) of the script. If you would like to be able to debug your production-ready script, include the provided SkipTo.min.map file as well.

To use the SkipTo script, just include it at the bottom of your HTML page or template, as follows:

<script type="text/javascript" src="http://paypal.github.io/skipto/downloads/js/SkipTo.min.js"></script>

Note that by default the path is set to load the script from the Github external source. If this is not what you want, please make sure that "src" points to the place where you put the Javascript file, otherwise, things will not work as intended.

Configuring SkipTo options

By default, SkipTo menu includes the following places on the page:

• Heading (e.g h1, h2, h3 and h4 elements).
• ARIA landmarks (e.g. banner, navigation, main and search).
• HTML5 Section Elements (e.g. main, section[aria-label], section[aria-labelledby]
• Any element with the id specified via the configuration file.
• Any element with the custom class specified via the configuration file.

and options:

• The "access key" is set to 0.
• The menu is set not to wrap.
• The menu is visible on keyboard focus only (can be changed to be always visible via the "onload" parameter).

You may have different requirements for your web site and include other heading levels as well as ARIA landmarks. If you are using either WordPress plugin or Drupal module, you can change the SkipTo options under the "settings" section of your particular content management system. If, however, you are utilizing the plain vanilla Javascript, you will need to provide a JSON object containing the necessary configuration parameters. This may look like the following:

<script>
var SkipToConfig =
{
    "settings": {
        "skipTo": {
            "headings"     : "h1, h2, h3, h4",
            "main"         : "main, [role=main]",
            "landmarks"    : "[role=navigation], [role=search]",
            "sections"     : "nav",
            "ids"          : "#SkipToA1, #SkipToA2",
            "customClass"  : "MyClass",
            "accesskey"    : "0",
            "wrap"         : "true",
            "visibility"   : "onfocus",
            "attachElement": ".MyCustomClass" // or "attachElement": "#MyCustomId"
        }
    }
};
</script>

The code above will need to be inserted before including the SkipTo.js or SkipTo.min.js into your page or template.

Notes

• Most parameters are optional.
• SkipTo can be attached to any element on the page (see the "attachElement" parameter). if no "attachElement" is found, the script will be attached as the first element after body.
• When the custom class is specified (see the customClass parameter), the user can override the style, EG

.dropMenu .MyCustomClass {
    background:  red;
    left: 50px;
    top: 50px;
}

Compiling CSS and JavaScript

You may feel slightly adventurous and decide to change some colors or even enhance the script with your changes. Once you do this, here is how you compile the skipTo script for production.

1. Get NodeJS from http://nodejs.org and install it on the operating system of your choice.
2. Get the latest code from Github from https://github.com/paypal/skipto.

3. After unzipping or downloading the source code into the directory of your choice, switch to that directory and type these commands:

   sudo npm install grunt-cli -g
   npm install  
   grunt

4. You should now have a directory called compiled with the necessary files in it.
5. See instructions above on which files you need to get the SkipTo script running on your web site.

Note: On Windows, build-win.bat runs npm install and grunt modules (Step 3). To successfully run, you must launch a Windows command prompt as an Admin (Ctrl+Shift+Enter) and then run build-win.bat from this command prompt.

Cleaning up

If you would like to revert your local code repository to its initial state, simply run

grunt clean

from the root directory of your repository.

Of course, we want 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!

PayPal Accessibility Team Twitter: @PayPalInclusive

Authors

Prem Nawaz Khan https://github.com/mpnkhan || @mpnkhan

Victor Tsaran https://github.com/vick08 || @vick08

Ron Feathers https://github.com/rfeathers || @ronfeathers

Marc Kocher https://github.com/mdkocher || @marckocher

Jon Gunderson https://github.com/jongund

Nicholas Hoyt https://github.com/nhoyt

**The rest of the PayPal Accessibility Team.

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 in this particular case). here is a quick list for how this would work in most popular browsers.

• Microsoft Internet Explorer -- ALT+0.
• Mozilla Firefox -- ALT+SHIFT+0.
• Google Chrome -- CONTROL+ALT+0 (Windows) and CONTROL+OPTION+0 (Mac OS).
• Safari -- CONTROL+0.

Version History

Version 2.1

• Ignore hidden landmarks and headings, based on:
  • CSS: display: none
  • CSS: visibility: hidden
  • HTML5 hidden attribute
  • ARIA 1.0 aria-hidden=true attribute
  • ARIA 1.0 role=presentation attribute
  • any element that is less than 4 pixels high or wide

Version 2.0

• Support for HTML5 section elements
• Calculate accessible names for landmarks and headings
• Updated menu to separate headings from landmarks
• Created default for main content
  • main element
  • [role=Main]
• Created default for HTML5 sections
  • nav element
• Updated defaults for landmarks
  • [role=navigation]
  • [role=search]
• Updated defaults for headings
  • h1 element
  • h2 element

Copyright and license

Copyright 2015, PayPal under the BSD license.