Skip To Main Content Accessibility

The Skip To Main Content script is an accesibility feature for keyboard users. It allows them to skip to the main content of a page and avoid tabbing through the navigation links.

Usage

The button is hidden from view and with the first tab keypress it will be focused and appear on screen. By default it will focus on the element with id="main", in the starter kit this is on the <main> HTML Element. This can be overridden by adding id="main-content" to any element on the page, in which case id="main" is the fallback.

This is useful if you have navigation links inside of the <main> element and want to skip past them. This page is a good example. The main element contains the navigation directory, so we added id="main-content" to ensure that the main content is focused when the button is clicked.