Adding SkipTo.js to a Web Page
Why Use Page Script?
- Make your website comply with WCAG 2.4.1 Bypass Blocks requirement.
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 dDo
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 the script.
Happy skipping!