Adding SkipTo.js to a Web Page
Benefits of Page Script
- Easy and powerful way to conform to the “Bypass Blocks” requirement of the Web Content Accessibility Guidelines.
- 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.
- When the “Skip To Content” menu button is visible when the page is loaded everyone can use it to identify and navigate to important regions on a page.
- Authors can configure SkipTo.js to identify the most important regions, ideally about 7-12 items to make it easier for people to read the list and choose an option. Remember the more items, the longer it will take for the user to identify which item they want to choose.
Websites using SkipTo.js Page Script
There are two main ways to use the menu button for SkipTo.js in a page. In the default configuration the menu button is always visible making it useful to everyone to easily find and navigate to the important content regions identified by the author. This is similar to how curb cuts help more than just people using wheelchairs. It is also easier for people using voice recognition to activate the button using the “click skip to content” command and use similar voice commands to activate SkipTo.js menu items. The “popup” option is the more traditional approach to fulfilling the “bypass bocks” requirement of the Web Content Accessibility Guidelines, but this option makes the feature less visible to people who might benefit.
Visible Menu Button (default)
- Open Web Accessibility Services
- OpenA11y Evaluation Library
- DRES Accessible IT Group
- AInspector for Firefox
- College of Applied Health Sciences
- University Housing
Popup Menu Button
- ARIA Authoring Practices Guide
- Admissions at the University of Illinois
- cPanel Web Hosting Service @ Illinois
- College of Education (Web components)
NOTE: Popup menu button option is available through configuration of SkipTo.js when it is loaded.
How it works
- The SkipTo.js menu button should be the first tabable element (e.g. Tab key)on the page, and by default the button is visible, but can be configured to “popup” when the button becomes receives focus.
- Once focus is on the menu button, pressing the Enter, Space, Down Arrow or Up Arrow keys will pull down the list of important landmarks and headings on the page. The button is based on the ARIA Authoring Practice design pattern for menu button.
- Use arrow keys to select your choice and press Enter to move focus to the section of the page.
Menu Shortcut key
A shortcut key can be used to open the SkipTo.js menu from anywhere on the page. Version 5 changes the shortcut key operation from using the HTML accesskey
attribute to use a scripted method to improve consistency of the shortcut keys between browsers and to support screen reader users, since some screen readers do not support accesskeys.
To use the “SkipTo.js” shortcut key, you would press either alt + 0 (Windows/Unix/Linux) or Option + 0 (macOS). Apple keyboards do not have an Alt key, so the Option key is used as the modifier for the shortcut. The shortcut key is the same for Firefox, Chrome and Safari on the same operating system.
- Alt+0 : Windows, Unix and Linux.
- Option+0 : macOS.
Features
- The "Skip To Content" button can be visible or hidden after the page completes loading.
- If the "Skip To Content" button is hidden it becomes visible when it receives keyboard focus when the user uses the tab key.
- When focus is on the button, users can open the menu using the space or down arrow key to view or select the landmarks and headings on the page.
- In the landmark regions group the landmarks are ordered by the importance of the landmark, main first, followed by search, navigation, complemntary, and contentinfo.
- In the heading group the headings are in document order.
- Moving keyboard focus or hovering over menu items scrolls the assocaited area on the page into view.
- The menu can be reopened at any time by using the short cut key, option + 0 on the macOS or alt + 0 on Windows and Linux.
What You Need To do
All you need are either skipto.js
or skipto.min.js
from the “/dist/” directory of this repository. The skipto.min.js
script is a minified (a lighter version) of skipto.js
script.
CDN Service
The easiest way is to include a reference to skipto.min.js
on your HTML page or template is through the CDN service, as follows:
github.com CDN service:
<script src="https://skipto-landmarks-headings.github.io/page-script-5/dist/skipto.min.js"></script>
NOTE: CDN referenced files may not be available to computers behind firewall protected networks.
Local File on Your Web Server
Copy the skipto.js or skipto.min.js to the file system of your web server and reference it from your web page or templates using a script
tag, as follows:
<script src="https://[path to Javascript files]/skipto.min.js"></script>
Warning Messages
The following warning messages may be rendered to the console:
Message | Action |
---|---|
Skipto is already loaded | Additional SkipTo’s are ignored |
No headings found in main | Searches for headings anywhere on the page |
No headings found on page | SkipTo menu reports no headings on the page |
No landmarks found on page | SkipTo menu reports no landmarks on the page |
Error in heading configuration | Sets configuration to look for any h1 of h2 headings |
Error in landmark configuration | Sets configuration to look for main search and navigation landmarks |
Unsuported or deprecated configuration option “abc” | “abc” option is ignored and/or default setting is used |
Feedback and Reporting Issues
We welcome your 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 SkipTo.js.
Happy skipping!