Skip-To Navigation
~ A11y Nav

The skip to navigation components (also known as a11y nav) provides a way for screen reader users to easily skip to some of the primary content areas (or landmarks) of your page that is likely to be of interest to them. While primarily meant to assist screen reader users, this is a classic example of the curb cut effect as this could also help those users who do not use a pointing device such as a mouse.

Using the skip-to web component

To use the component could not be easier. Add the HTML as the first element after your body element and include the JavaScript file before the closing body tag.


<skip-to-nav></skip-to-nav>
<script type="module" src="js/skip-to-nav.js"></script>

The attributes

The utility of the component is in its attributes. The component currently supports three custom attributes.

The value for each attribute should match the text of the id attribute on the element the link will skip to. For example:


<main id="main-content">
    <p>You main content goes here.</p>
</main>

With the above in place, you can use the skip-to component as follows:


<skip-to-nav content="main-content"></skip-to-nav>

How about styling?

In order to change the styling of the component, the component exposes a couple of CSS customer properties which will allow you to pierce through the ShadowDOM.

--skip-to-nav-z-index
The z-index of the component to ensure it will be shown above all other content on your page. The default value is 300.
--skip-to-nav-link-background-color
The background of the links when they are focused. The default value is rgba(255, 255, 255, 0.9).
--skip-to-nav-link-color
The color of the link text when they are focused. The default value is #212121. Note: When choosing your background and link text colors take a moment to ensure that the color combination passes contrast requirements.
--skip-to-nav-typography-font-family
The font family of used by the component. The default value is sans-serif.
--skip-to-nav-typography-weight
The font weight of the link text. The default value is bold.
--skip-to-nav-box-shadow
The CSS box shadow of the component. The default value is 0.2rem 0.2rem 5px #eee.
--skip-to-nav-focus-outline
The focus outline style to use when the links receive focus. The default value is 1px solid #212121.