Skip Links and Landmarks: Quick Wins for Accessibility
Imagine having to tab through 20 menu links on every page before reaching the content. That's what keyboard and screen reader users face without a skip link and proper page regions. Both fixes are simple and make a big difference.
Skip links
A skip link is a link at the very top of the page that jumps straight to the main content. It's usually hidden until it receives keyboard focus, then appears on screen.
How to add one
- Make it the first focusable element in the page.
- Link it to the main content region, for example with an
hrefpointing to the id of your main element. - Give the main element a matching
id(and, for broad compatibility, make sure focus moves there when the link is used). - Use clear text such as "Skip to main content."
- Make it visible when focused, with a strong contrast and a clear focus style.
<a class="skip-link" href="#main">Skip to main content</a>
...
<main id="main">Don't hide it permanently. If it's off-screen and never appears when focused, sighted keyboard users can't see it. Test by pressing Tab as soon as the page loads.
This also supports a WCAG requirement for a way to bypass repeated blocks of content.
Landmarks
Landmarks are page regions that screen reader users can list and jump between. HTML5 elements create them automatically:
| Element | Landmark role | Use for |
|---|---|---|
header | Banner | Site-wide header (when not nested in an article or section) |
nav | Navigation | Main menus and other link groups |
main | Main | The primary content of the page |
aside | Complementary | Related side content |
footer | Content information | Site-wide footer |
form or search | Form or Search | Forms with a name, and search regions |
Rules of thumb
- One
mainper page. It shouldn't contain the header, site navigation, or footer. - Label repeated landmarks. If there are two
navregions, give each a distinct accessible name usingaria-label, such as "Main" and "Footer." - Put all content inside a landmark. Content outside landmarks can be missed by people who navigate by region.
- Don't overuse them. Too many landmarks create noise.
- Prefer native elements over ARIA role attributes. See ARIA basics
Headings work alongside landmarks
Landmarks show the big regions, and headings show the structure within them. Use both. See how to use headings for SEO.
Why it helps everyone
Keyboard-only users, screen reader users, people using switch devices, and anyone who finds repetitive tabbing painful benefit. Clear structure also helps search engines interpret your pages.
How to test
- Reload your page and press Tab once. Does a skip link appear? Press Enter. Does focus move to the main content?
- Use a screen reader's landmark list to check that regions are present and labeled. See how to test with a screen reader
- Tab onward and confirm that focus continues from the main content, not back at the top
Related reading
See accessible navigation menus, keyboard navigation and focus, and website accessibility basics.
The bottom line
Add a visible-on-focus skip link and use proper landmark elements. It takes minutes and removes a daily frustration for many visitors.