A utility used to add a hidden skip link, visible on focus, for screen readers and other non-mouse users
The skip-link utility is used to add visibly hidden links for screen readers and non-mouse users. The links are always
the first links the user will reach when pressing tab. This allows them to skip straight to areas of the page, most
commonly the main content area, and not have to tab through all the navigation links.
To use a skip-link, add the following HTML near the start of your opening <body> tag:
<a class="skip-link" href="#content-wrapper">Skip to content</a>Then make sure the destination of the skip link - #content-wrapper in this case - is always available:
<main id="content-wrapper">...</main>You can see how it works by clicking in the URL bar of this page, and then pressing the tab key. You'll see our skip to content skip-link displayed in the top left of the screen.
See customization options for more information on customizing the styles added.
The sr-only utility, and its counterpart, not-sr-only work great for in-place links and helper text.
Skip-links are usually position: absolute however, and the not-sr-only utility would set them to static when focused.
The skip-link utility allows for the specific creation of skip-links, while also making them clear when reading source code.
You can add styles to the skip-link if you would like in several ways.
The simplest way would be straight in your tailwind.config.js file, by specifying the styles using the styles option in the theme.skipLink section:
// tailwind.config.js
module.exports = {
theme: {
skipLink: {
+ styles: (theme) => ({
+ backgroundColor: theme('colors.white'),
+ }),
}),
},
}The styles object is merged into the main styles of the .skip-link class, and will override any defaults set by Captain.
Therefore, any CSS-in-JS can be used here.
Alternatively, you can style the .skip-link class directly in your css, or in a component.
Target the .skip-link selector and add any styles you need.
.skip-link {
background-color: theme('colors.white');
}// Example Vue SFC
<template>
<a class="skip-link" href="#content-wrapper">Skip to content</a>
</template>
<style>
.skip-link {
background-color: theme('colors.white');
}
</style>By default, no variants are generated for skip link utilities.
You can control which variants are generated for the skip link utilities by modifying the skipLink property in the variants section of your tailwind.config.js file.
For example, this config will generate active variants:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ skipLink: ['active'],
}
}
}If you don't plan to use the skip link utilities in your project, you can disable them entirely by setting the skipLink property to false in the captain.plugins section of your config file:
// tailwind.config.js
module.exports = {
captain: {
plugins: {
// ...
+ skipLink: false,
}
}
}