The most common type of skip link is the “Skip to Content” link that should be at the top of every page that has a header.
But you can also add skip links to long or repeated sections and complicated areas of your site that take a lot of effort to go through. Think logo grids, embedded maps, social feeds, galleries, long ecommerce filters.
How to decide if you should add a skip link
Review your site for places where a skip link might be helpful, but don’t overuse them. Keep the total number of skip links to a minimum.
Consider adding a visible link or even a table of contents for longer pages before using the skip link.
Some plugins or overlays add additional skip links to the top of the page like “Skip to Navigation”, “Skip to Search”, or “Skip to Footer”, but these should all be use sparingly. The point is to prevent additional tabbing, so only add extra skip links if it truly is a place that a large majority of visitors need to go or it’s something that would require a large number of tabs to get through.
How to add the skip link
They work exactly the same as the main skip link, just changing the link text. Use a phrase that makes the most sense, like “Skip Carousel” or “Skip Embedded Map.”
Take a look at the main skip link that’s already on your site and use the same classes to prevent duplicating or conflicting CSS.
The WordPress Full Site Editor uses a skip link with the following CSS:
.skip-link.screen-reader-text {
border: 0;
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}So any link you add the classes of skip link and screen-reader-text to would behave in the same way the main skip link does.
