Skip Links
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
Skip links are a tool to help keyboard users navigate web apps more easily. They are hidden links that only appear when a user tabs onto them, allowing keyboard users to bypass repetitive content like nav bars and jump straight to the main content of a page.
To meet the WCAG 2.4.1 criterion, it's probably sufficient to just use appropriate landmarks, HTML elements, and headings. However, adding skip links adds an extra layer that is useful for more than just screen reader users.
Screen reader users are more likely to have tools that assist with navigation via these landmarks, regions, and headings. Whereas a user that just prefers to navigate with a keyboard may not have such shortcuts and benefit from a skip link.
A skip link that appears when tabbed onto and links to the main content can be seen below:
How to fix
The example above uses some annoying javascript because raw links don't seem to work within the Iframe without navigating.
However, the simplest form of a skip link is:
<a href="#main">Skip to main content</a>
<main id="main">
<h1>Main content</h1>
</main>The provides a link that the user can use to skip to the main content of the page. Not pictured here is the navigation links that this skip link is avoiding, usually between the link and the main content. The skip link should be the first element in the page so that users tab onto it first.
Additionally, this example above doesn't explain any of the styling for a skip link. Often, the ideal skip link is one that is not always visible and only appears when focused by a keyboard user.
This can be achieved with styling like the below:
.skip-link {
// ... normal link/button styling
position: absolute;
top: -40px;
left: 0;
z-index: 1000;
transition: top 0.3s;
&:focus-visible {
top: 0;
}
}This boils down to being positioned off of the screen when not focused, and then sliding onto the screen when focused.
The z-index is high to ensure it overlays most if not all other content on the page, but this and the transition are optional.
Workarounds
Sometimes, this simplest form of a link to an ID on the page doesn't work. As above, the Iframe seems to be a pain, but also there can be issues in some Javascript frameworks or browsers that may need to be worked around.
The workaround for any time it doesn't seem to work is to instead use javascript to find the #main element and focus it
when the skip link is clicked.
In this case, the #main element may need to have a tabindex attribute added to it to ensure it can be focused.
tabindex={-1} is the value to use to ensure it can be focused but not tabbed to.
<a href="#main" onClick={onClick}>Skip to main content</a>
<main id="main" tabindex={-1}>
<h1>Main content</h1>
</main>A couple examples of the onClick function can be found below:
// Used in the Iframe at the start of this page
const onClick = (event) => {
event.target.parentElement.querySelector('#main').focus();
};
// More likely to be used in normal apps
const onClick = () => {
const mainBodyElement = document.getElementById('main').focus();
};This approach obviously doesn't work without Javascript, but it's good for if the link approach isn't working.
As long as the skip link is the first thing a user encounters, and when activated (Enter) it focuses the main content,
it should be sufficient as a skip link.