A keyboard user landing on a page with 40 navigation items must press Tab 40 times before reaching the main content — unless a skip link is provided. This is not a minor inconvenience; for users who navigate exclusively by keyboard, it is a significant time cost on every page view.
Skip Links
A skip link is a visually hidden anchor that becomes visible on focus and jumps to the main content. Implementation is straightforward but the details matter:
export function SkipLink() {
return (
<a
href="#main-content"
className="
sr-only focus:not-sr-only
focus:fixed focus:top-4 focus:left-4 focus:z-50
focus:px-4 focus:py-2
bg-bg border border-border
font-mono text-sm text-ink
"
>
Skip to main content
</a>
);
}
The target <main id="main-content"> must have tabIndex={-1} to receive focus programmatically in all browsers.
Landmark Regions
Beyond skip links, landmark roles (<main>, <nav>, <aside>, <footer>) allow screen reader users to jump directly between page sections. Multiple navigation landmarks must be distinguished with aria-label.
The implementation added landmarks to 14 page templates and added aria-labels to disambiguate the primary nav, breadcrumb nav, and pagination nav.
The Measurement
User testing with keyboard-only participants showed an 80% reduction in time-to-task for tasks that began from the top of the page. The skip link alone accounted for 60% of that improvement.