SkipTo, version 2.0

by PayPal Accessibility Team

See the Authors section for more information.

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. The menu will make it easier for keyboard and screen reader users to quickly jump to the desired location by simply choosing it from the list of options.

Example Screen Shot

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 below. The SkipTo can also be related from the Drupal and Wordpress repositories.

To sweeten your day even more, the GreaseMonkey script and Safari bookmarklet are also available. See the “downloads” section below for related links. By the way, this page is a great chance to see the “SkipTo menu” in action! Did you find the menu at the top?

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 will include the following places on the page:

and options:

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",
			"landmarks": "[role=banner], [role=navigation], [role=main], [role=search]",
			"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


.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 http://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:

sh sudo npm install grunt-cli -g npm install grunt

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

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 Gang Twitter: @PayPalInclusive

Authors

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

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.

Downloads

  1. Wordpress plugin zip
  2. Drupal plugin Tar
  3. GreaseMonkey User Script
  4. Skip To bookmarklet