SkipTo is a replacement for your old classic "Skipnav" link. Once installed on a site, the script dynamically determines the most important places on the page and presents them to the user in a drop-down menu.
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.
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.
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.
Copy the
skipto.jsor
skipto.min.jsto the file system of your web server and reference it from your web page or templates using a
scripttag, as follows:
The easiest way is to include a reference to
skipto.min.json your HTML page or template is through the CDN service, as follows:
NOTE: CDN referenced files may not available to computers behind firewall protected networks.
A module is under development for WordPress.
Setting properties is optional, when a property is not defined it's default value is used.
buttonelement
The following options are useful for identify where the menu will be in the DOM structure of the page and which elements will be used as the container for the menu button. The options are of type
string.
| Property | default | Description | | :------------- | :---------- | :---------- | |
displayOption| 'static' | Values of
static,
fixedor
popupare defined. The value
staticthe button is always visible, the value
fixedthe button is always visible at the top of the page even when the page scrolls, and the value
popupis used the button is initially not visible, but becomes visible when it receives focus. | |
accessKey| '0' | Accesskey provides a way to open the Skip To menu from anywhere on the page, the default is the number zero. | |
attachElement| 'header' | A CSS selector for identifying which element to attach the menu button container. | |
containerElement| 'div' | Element to use as a container for the button and the menu. |
customClass| none | CSS class added to the container element. Can be used for customize styling of the button and menu with author supplied stylesheet. | |
containerRole| none | Optional landmark role added to a container element, if the container element is not within a landmark. Ideally the menu button is placed within the
bannerlandmark (e.g.
headerelement. |
| Property | Type | Default | Description | | :------------- | :----- | :------ | :---------- | |
positionLeft| length |
46%| The position of the "Skip To Content" button from left margin. |
The
landmarksand 'headings' options are CSS selectors used to identify the important landmarks and headings on the page for the purpose of keyboard navigation. The list of landmarks and headings should be relatively short, the more items the menu contains the more time the user will need to scan and navigate to the section they want to "skip to".
The options are of type
string.
| Property | Default | Description | | :------------- | :------ | :---------- | |
landmarks| 'main, [role="main"], [role="search"], nav, [role="navigation"], aside, [role="complementary"]' | A set of CSS selectors used by
querySelectorAllto get an array of landmark nodes. | |
headings| 'main h1, [role="main"] h1, main h2, [role="main"] h2' | A set of CSS selectors used by
querySelectorAllto get an array of headings nodes. |
A color theme sets all the color options defined by the theme. There is only one theme at this time.
| Property | Type | Default | Description | | :------------- | :----- | :------ | :---------- | |
colorTheme| string |
default| A predefined color scheme for skipTo, currently values 'default', 'illinois' and 'aria'|
Color values must use CSS color values, for example
#8AF,
rgb(40, 50, 90),
#a0bf32,
blue.
| Property | Type | Default | Description | | :------------- | :----- | :------ | :---------- | |
buttonTextColor| Color |
#1a1a1a| Color of text for "Skip To Content" button. | |
buttonBackgroundColor| Color |
#eeeeee| Background color of text for "Skip To Content" button. | |
focusBorderColor| Color |
#1a1a1a| Border color for items with keyboard focus. | |
menuTextColor| Color |
#1a1a1a| Menu text color | |
menuBackgroundColor| Color |
#dcdcdc| Menu background color. | |
menuitemFocusTextColor| Color |
#eeeeee| Menuitem text color when a menuitem has focus. | |
menuitemFocusBackgroundColor| Color |
#1a1a1a| Menuitem text background when a menuitem has focus. |
NOTE: Make sure colors meet the color contrast requirements of WCAG 2.1 for text
The inclusion of heading level shortcut keys and the more landmarks and more headings action buttons are enabled by default, but they can be disabled through configuration. The values are of type boolean.
| Property | Default | Description | | :------------- | :------ |:---------- | |
enableActions| 'true' | Enable ('true') or disable ('false') the action buttons in the menu. | |
enableHeadingLevelShortcuts| 'true' | Enable ('true') or disable ('false') the heading levels on the heading menu items. |
The text labels and messages can be updated through configuration to local language requirements.
The labels and messages can be localized for specific languages or updated to reflect custom selectors.
| Property | Default | Description | | :------------- | :------ |:---------- | |
buttonLabel| 'Skip to Content' | Change the label for the button. | |
buttonTitle| 'Keyboard Navigation' | Help message when accesskey is not defined. | |
buttonTitleWithAccesskey| 'Keyboard Navigation\nAccesskey is "$key"' | Help message when an accesskey is defined. | |
accesskeyNotSupported| ' is not supported on this browser.' | Help message when a browser does not support accesskeys. |
The labels and messages can be localized for specific languages or updated to reflect custom selectors.
| Property | Default | Description | | :------------- | :------ |:---------- | |
menuLabel| 'Landmarks and Headings' | Change the label for the menu. | |
landmarkGroupLabel| 'Landmarks' | Menu group label for landmarks . | |
headingGroupLabel| 'Headings' | Menu group label for headings. | |
mofnGroupLabel| '$m of $n' | Provides information on the number of items that are displayed and the total number of items in the document. The information is added to the landmark and heading group labels. | |
headingLevelLabel| 'Heading level' | Used for
aria-labelto improve labeling of heading menu items for screen reader users. | |
mainLabel| 'main' | The label in the menu for
mainlandmarks | |
searchLabel| 'search' | The label in the menu for
searchlandmarks | |
navLabel| 'navigation' | The label in the menu for
navigationlandmarks | |
asideLabel| 'aside' | The label in the menu for
complementarylandmarks | |
footerLabel| 'footer' | The label in the menu for
contentinfolandmarks | |
headerLabel| 'header' | The label in the menu for
bannerlandmarks | |
formLabel| 'form' | The label in the menu for
formlandmarks | |
msgNoLandmarksFound| 'No landmarks to skip to'| Message for when no landmarks are found. | |
msgNoHeadingsFound| 'No main headings to skip to'| Message for when no headings are found. |
The labels and messages can be localized for specific languages or updated to reflect custom selectors.
| Property | Default | Description | | :------------- | :------ |:---------- | |
menuLabel| 'Landmarks and Headings' | Change the label for the menu. | |
landmarkImportantGroupLabel| 'Important Landmarks' | Menu group label for |
actionGroupLabel| 'Actions' | The group label for the action menu items. | |
actionShowHeadingsHelp| 'Toggles between showing "All" and "Important" headings.' | The value of the title attribute for the show headings action menu item. | |
actionShowImportantHeadingsLabel| 'Show Important Headings ($num)' | The label for the menu item when the button action is to show "Important" headings. | |
actionShowAllHeadingsLabel| 'Show All headings ($num)'| The label for the menu item when the button action is to show "All" headings. | |
actionShowLandmarksHelp| 'Toggles between showing "All" and "Important" landmarks.' | The value of the title attribute for the show landmarks action menu item. | |
actionShowImportantLandmarksLabel| 'Show Important landmarks ($num)' | The label for the menu item when the button action is to show "Important" landmarks. | |
actionShowAllLandmarksLabel| 'Show All landmarks ($num)' | The label for the menu item when the button action is to show "All" landmarks. | |
actionShowImportantHeadingsAriaLabel| 'Show $num Important Headings' | The
aria-labelfor the menu item when the button action is to show "Important" headings. | |
actionShowAllHeadingsAriaLabel| 'Show All $num headings'| The
aria-labelfor the menu item when the button action is to show "All" headings. | |
actionShowImportantLandmarksAriaLabel| 'Show $num Important landmarks' | The
aria-labelfor the menu item when the button action is to show "Important" landmarks. | |
actionShowAllLandmarksAriaLabel| 'Show All $num landmarks' | The
aria-labelfor the menu item when the button action is to show "All" landmarks. |
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:
The source code in this section is for developers to understand the HTML, classes and ids used in the SkipTo menu button and menu for use in custom styling.
Skip To ContentImportant LandmarksMainNavigation: SkipTo test pages<!-- // // Heading group label and menu items // --> <div id="id-skip-to-group-headings-label" role="separator"> Important Headings </div> <div role="group" aria-labelledby="id-skip-to-group-headings-label" id="id-skip-to-group-headings"> <div role="menuitem" class="heading skip-to-h1" data-id="9" data-level="1"> <span class="level"><span>1</span>)</span> <span class="label">Example Content</span> </div> <div role="menuitem" class="heading skip-to-h2" data-id="10" data-level="2"> <span class="level"><span>2</span>)</span> <span class="label">Pastrami</span> </div> <!-- ... more menu items ... --> </div> <!-- End Headings Group --> <!-- // // Action group label and menu items // --> <div role="separator" id="id-skip-to-group-actions-label"> Actions </div> <div role="group" aria-labelledby="id-skip-to-group-actions-label" id="id-skip-to-group-actions"> <div role="menuitem" class="action" data-id="skip-to-more-headings" data-show-heading-option="all"> <span class="label skip-to-action">Show All headings (15)</span> </div> <div role="menuitem" class="action last" data-id="skip-to-more-landmarks" data-show-landmark-option="all"> <span class="label skip-to-action">Show All landmarks (10)</span> </div> </div> <!-- End Action Group -->
.skipTo.MyCustomClass { background: red; left: 50px; top: 50px; }
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
compiledwith the necessary files in it.
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.
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.
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!
Jon Gunderson https://github.com/jongund
Nicholas Hoyt https://github.com/nhoyt
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
menuTextColorproperty.
displayOptionscustomization.
aria-labelfor action menu items to make the label screen reader friendly
aria-labelto make the label more like a screen reader
aria-roledescriptionfor labeling landmark roles in menu
Copyright 2021, PayPal and University of Illinois under the BSD license.