SkipTo.js for Bypass Blocks

SkipTo.js is more than a just replacement for your old classic “Skip To Main Content” link for implementing the WCAG 2.4.1 Bypass Blocks requirement. The page script, bookmarkets and browser extensions create a drop-down menu consisting of the links to important landmarks and headings on a given web page. The bookmarklets and browser extensions include powerful keyboard shortcuts for navigating landmark regions and headings on web pages, similar to the feature available in screen readers.

Once the page script is installed and configured, the menu and shortcuts make it easier for keyboard and screen reader users to quickly jump to the desired region of a page by simply choosing it from the list of options.

Three Ways to Use Skipto.js

	Menu Button	Keyboard Shortcuts		Configuration	Benefits
		Landmark Regions	Headings
Browser Extensions	Yes	Yes	Yes	Extension options panel.	An assistive technology for keyboard only users to navigate the landmark regions and headings on any web page. A testing tool to examine the landmark regions and headings on any web page.
Bookmarklets	Yes	Yes	Yes	Use the data-skipto attribute of the script tag in the link to customize the features of SkipTo.js.	Try out SkipTo.js on any web page to learn how it works. A testing tool to examine the landmark regions and headings on any web page.
Page Script	Yes	no	no	Authors can use: Use the data-skipto attribute to customize the features of SkipTo.js (preferred). Global configuration object (legacy support).	Authors can use it to replace the simple "Skip To Main" link on the pages. Provides a powerful and reliable way to navigate the structure of a web page for people with disabilities.

Anatomy of the SkipTo.js Menu

Detailed Information on SkipTo.js Menu

Feature	Description
"Skip To Content" Button	Opens and closes the menu of landmark regions and headings. Button can initially be hidden or visible on the web page. A shortcut key is used to activate the button (e.g. Option+0 or Alt+0). Button is first tab stop on the web page.
Landmark Regions	Landmark regions are the first section of the menu. First menu item is the group label "Landmark Regions" and the number indicates how many landmarks are in the menu. By default the landmarks are listed in order of importance on the page: Main Search Navigation Complementary Contentinfo When a landmark region has an accessible name, it is included in the menu item after the region type.
Headings	Heading are the second section of the menu. The section includes a group label "Headings" and the number indicates how many headings are in the menu. The headings are listed in document order. The number before the heading name indicates the level of the sub-section heading. Level 2 headings are sub-sections of level 1 headings, level 3 headings are subsections of level 2 headings and so on up to heading leel 6. The accessible name is after the heading level.
Shortcuts	The Shortcuts group label indicates whether the shortcuts are currently enabled or disabled. The first menu item is used to change the state of the shortcuts. The second menu item opens a dialog box showing the current keyboard shortcuts.

---

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!