SkipTo.js for WCAG Bypass Blocks

SkipTo.js Bookmarklets

Screen shot of SkipTo.js menu using a Bookmarklet

The SkipTo.js bookmarklet allows you to use SkipTo.js on any web page. The bookmarklet is a link that contains JavaScript that loads SkipTo.js. When the bookmarklet link is activated the "Skip to Content" menu will appear on the web page.

Why Use A Bookmarklet?

  • Testing your website for using SkipTo.js page script to implement WCAG 2.4.1 Bypass Blocks requirement.
  • Testing a web page for proper use of landmark regions and headings.

Features

Feature Description
Single Key Shortcuts Navigation using single key keyboard shortcuts to landmark regions and headings on a page.
Button Visibility

The "Skip To Content" button can be visible (default) or hidden after the page completes loading.

Note:When the SkipTo.js button is visible when the page loads and is obscuring page content use the "hide" button to change SkipTo.js to popup mode.

tab After the page loads, pressing the tab key will bring focus to the "Skip To Content" button. If the button was hidden it becomes visible.
space and
down arrow		 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.
Landmark Items In the landmark regions group the landmarks are ordered by the importance of the landmark for navigation: main, search, navigation, complemntary and contentinfo.
Heading Items In the heading group the headings are in document order. By default only h1 and h2 headings are shown in the list. More headings can be shown using configuration options.
Scrolling into View Moving keyboard focus or hovering over menu items scrolls the associated area on the page into view.
Menu Shortcut Key

A shortcut key can be used to open the SkipTo.js menu from anywhere on the page.

  • Alt+0 : Windows, Unix and Linux.
  • Option+0 : macOS.

Installing

The most common way of installing a bookmarklet is to drag and drop the bookmarklet link into your browser's bookmarks or favorites toolbar. The shortcut for toggling the display of the bookmarks toolbar in Chrome, Firefox and Safari is Shift + Ctrl/Cmd + B.

Bookmarklet Link (Static, Default): SkipTo.js

Bookmarklet Link (Popup): SkipTo.js Popup

Bookmarklet Link (Popup with Border): SkipTo.js Popup with Border