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(link is external) 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(link is external). 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(link is external) and install it on the operating system of your choice.
2. Get the latest code from Github from https://github.com/paypal/skipto(link is external).

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(link is external) if something doesn't work or you have ideas on how to improve the script.

Happy skipping!

PayPal Accessibility Team Twitter: @PayPalInclusive(link is external)

Authors

Prem Nawaz Khan https://github.com/mpnkhan(link is external) || @mpnkhan(link is external)

Victor Tsaran https://github.com/vick08(link is external) || @vick08(link is external)

Ron Feathers https://github.com/rfeathers(link is external) || @ronfeathers(link is external)

Marc Kocher https://github.com/mdkocher(link is external) || @marckocher(link is external)

Jon Gunderson https://github.com/jongund(link is external)

Nicholas Hoyt https://github.com/nhoyt(link is external)

**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(link is external).