Skip Link
Definition
The pattern is old and small: the first focusable element in the document is an anchor whose href points at the id of the main content, usually written as a hash followed by main. Press Tab on a fresh page, the link appears, press Enter, and focus moves past the masthead. It is one of the accepted techniques for success criterion 2.4.1 Bypass Blocks at Level A, alongside landmark regions and a proper heading structure. The reason to add one anyway is that landmarks only help people whose software exposes them. A sighted keyboard user, a switch user or someone using speech input gets nothing from a main element, and everything from a link they can see and activate.
Why It Matters
Repeated navigation is a cost paid on every page view rather than once. A site with a thirty-link header costs a keyboard user thirty presses before the content starts, and roughly the same again if they go back. Over a ten-page visit that is six hundred keystrokes for someone who may have limited hand movement. A skip link reduces it to two. The other reason to care is that the implementation is a few lines, and the most common way it breaks is equally small: hidden with display of none, it is removed from the tab order and can never be reached, which leaves a page that appears to have a skip link and does not.
How It Works
Put the anchor as the first element inside body, before the header. Give the target an id and, in most browsers, a tabindex of -1, so that focus really lands there rather than only scrolling the page — without it, some browsers move the scroll position but leave focus where it was, and the next Tab press returns to the navigation. Hide the link with CSS that keeps it focusable: position it absolutely and move it off the visible area, then reset those properties under :focus so it slides into view. Never use display of none or visibility of hidden, and never a negative tabindex on the link itself. Then test it the only way that counts: load the page and press Tab once.
Real-World Example
A documentation site published at handbook.99helpers.site repeats a sidebar of forty-one links on every page. Adding a skip link that reads 'Skip to content', hidden until focused, and a main element with an id and a tabindex of -1, cuts the journey from forty-two keystrokes to two. The link is styled to appear top-left on a solid background with a visible focus ring, so it reads clearly rather than flashing over the logo. Since the site is a folder of static HTML files, the change goes into the shared header of each page and is re-uploaded to 99helpers in one go.
Common Mistakes
- ✕Hiding the link with display of none or visibility of hidden — both remove it from the tab order, so the link exists in the source and can never be used
- ✕Pointing the link at an element with no id or at a container that cannot take focus — the page scrolls, focus stays behind, and the next Tab drops the user back in the menu
- ✕Putting the skip link after a cookie banner or a promotional bar — it has to be the first focusable thing in the document to do its job
Related Terms
Keyboard Navigation
Keyboard navigation is operating a page without a mouse: Tab and Shift+Tab to move between controls, Enter and Space to activate them, arrow keys inside composite widgets such as menus and radio groups.
Landmark Region
A landmark region is a section of a page with an announced role — banner, navigation, main, complementary, contentinfo — that a screen reader user can jump straight to instead of reading through everything above it.
Focus Indicator
A focus indicator is the visible ring or outline showing which element the keyboard is currently on. Switching it off with an outline of none and putting nothing back is one of the most common faults in hand-written CSS.
Tab Order
Tab order is the sequence in which pressing Tab moves focus through a page's interactive elements. By default it follows the order those elements appear in the HTML source.
index.html
index.html is the file a web server returns when a visitor asks for a folder rather than a named file. It is the default document for the site root and for every directory inside it.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →