[email protected]

by PayPal Accessibility Team & University of Illinois

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 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 location by simply choosing it from the list of options.

Benefits of SkipTo

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

How it works

1. The SkipTo menu button is the first tabable element on the page, and if it is not visible becomes the first time the user tabs into the page.
2. Once the keyboard focus is on the menu button, pressing the ENTER or the SPACEBAR key will pull down the list of high-level headings and 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?

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:

NOTE: Make sure that "src" points to the place where you put the SkipTo Javascript file, otherwise, things will not work as intended.

What About WordPress

A module is being considered for WordPress.

Configuring SkipTo

Setting properties is optional, when a property is not defined it's default value is used.

Options for adding the button

| Property | default | Description | | :------------- | :---------- | :---------- | |

displayOption

static

static

popup

static

popup

accessKey

0

attachElement

header

containerElement

div

customClass

skipTo

containerRole

banner

header

CSS Selectors for identifying Landmarks and Headings

| Property | Default | Description | | :------------- | :------ | :---------- | |

landmarks

main, [role="main"], [role="search"], nav, [role="navigation"], aside, [role="complementary"]

querySelectorAll

headings

main h1, [role="main"] h1, main h2, [role="main"] h2

querySelectorAll

Button and Menu labeling

The labels and messages can be localized for s specific languages or updated to reflect custom selectors.

| Property | Default | Description | | :------------- | :------ |:---------- | |

buttonLabel

menuLabel

landmarkGroupLabel

headingGroupLabel

mainLabel

main

searchLabel

search

navLabel

navigation

asideLabel

complementary

footerLabel

contentinfo

headerLabel

banner

formLabel

form

msgNoLandmarksFound

msgNoHeadingsFound

Colors used for Button and Menu styling

Color values must use CSS color values, for example

#8AF

rgb(40, 50, 90)

#a0bf32

blue

| Property | Type | Default | Description | | :------------- | :----- | :------ | :---------- | |

colorTheme

default

buttonColor

#1a1a1a

buttonBackgroundColor

#eeeeee

buttonBorderColor

#eeeeee

buttonColorFocus

#000000

buttonFocusBackgroundColor

#dcdcdc

buttonFocusBorderColor

#1a1a1a

menuBackgroundColor

#eeeeee

menuBorderColor

1a1a1a

menuitemColor

#1a1a1a

menuitemBackgroundColor

#eeeeee

menuitemFocusColor

#eeeeee

menuitemFocusBackgroundColor

#1a1a1a

menuitemFocusBorderColor

#1a1a1a

NOTE: Make sure colors meet the color contrast requirements of WCAG 2.1 for text

Position of Button

| Property | Type | Default | Description | | :------------- | :----- | :------ | :---------- | |

positionLeft

46%

Example Settings

If have different requirements for your web site and include other heading levels as well as ARIA landmarks, you will need to provide a JSON object containing the necessary configuration parameters. The following is a sample configuration:

Notes

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

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

   git clone https://github.com/paypal/skipto.git
   cd skipto
   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.

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

sh
grunt clean

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

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.

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

Version History

Version 3.0

• Removed id selector options, if ids are needed they could be added to the landmarks selector
• Removed need to call initialization function
• Removed support for Internet Explorer
• Improved code readability and ARIA support, by removing complexity needed to support Internet Explorer
• Improved configuration of button and menu labeling
• Add configuration of button and menu colors, without adding a stylesheet
• Update the landmarks and headings in the menu by querying the DOM every time the menu is opened
• Reduced markup conflicts by using a data attribute rather than an IDREF for targets
• Reduced changes in page markup by only applying tabindex=-1 when focus is moved to a target
• Updated the function for testing if an element is visible

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 2019, PayPal under the BSD license.