For users who navigate the web with a keyboard, tabbing through a long list of navigation links on every single page is a tedious and frustrating experience. A “skip to main content” link is a crucial accessibility feature that provides a shortcut, allowing users to bypass these repeated blocks of content. However, for a skip link to work, its destination target must exist and be focusable. If the target isn’t focusable, the user’s focus won’t move, and the shortcut will fail.
Think of your website as a grocery store. A skip link is like an express lane that allows people to bypass the long lines and go directly to the items they need. But if the express lane just leads back to the front of the store, it’s useless. By making sure that your skip links have a focusable target, you can create a more accessible and user-friendly experience for everyone. For a deeper dive into the world of accessibility, see our article on accessibility.
The ‘Focusable’ Problem
When a user activates a skip link, the browser should move the user’s focus to the target element (typically the `<main>` landmark). However, elements like `<main>`, `<div>`, and `<section>` are not naturally focusable. To make them focusable, you need to add the `tabindex=”-1″` attribute. As explained in the MDN guide to tabindex, a value of `-1` allows an element to receive focus from a script or a link, but does not add it to the natural tab order.
How to Implement a Proper Skip Link
Fixing a broken skip link is a simple but important task. It involves ensuring the target element has an `id` and a `tabindex=”-1″`. For another excellent resource, check out this guide to skip navigation from WebAIM.
<!-- Before: Skip link with a non-focusable target --> <body> <a href="#main-content">Skip to main content</a> <header>...</header> <main id="main-content"> <!-- Missing tabindex="-1" --> <h1>Page Title</h1> </main> </body> <!-- After: Correctly implemented skip link and target --> <body> <a href="#main-content">Skip to main content</a> <header>...</header> <main id="main-content" tabindex="-1"> <!-- Correct --> <h1>Page Title</h1> </main> </body>
Frequently Asked Questions
What is a skip link?
A skip link is a link that allows users to bypass repeated blocks of content, such as navigation menus and headers. It’s an important accessibility feature, as it can help users who rely on a keyboard to navigate your site to quickly and easily get to the main content of the page.
Should my skip link be visible?
Yes, but it’s a common and acceptable practice to hide the skip link off-screen and only make it visible when it receives keyboard focus (i.e., when a user hits the Tab key on page load). This keeps the design clean for mouse users while providing a crucial shortcut for keyboard users.
Why is it important for my skip links to have a focusable target?
It’s important for your skip links to have a focusable target so that when a user activates the link, their keyboard focus moves to the start of the main content. If the target isn’t focusable, the user’s focus remains at the top of the page, and the skip link has failed to do its job.
Ready to make your skip links more accessible? Start your Creeper audit today and see how you can improve your website’s accessibility.