Skip link

Skip links are internal page links that aid navigation around a page. They are accessible by screen reader and keyboard users, and help users quickly jump to and over content on the page.

View in Storybook View in Github

import { ... } from '@ag.ds-next/react/skip-link';

<React.Fragment>
	<SkipLinks
		links={[
			{ href: '#main-content', label: 'Skip to main content' },
			{ href: '#main-nav', label: 'Skip to main navigation' },
		]}
	/>
	<MainNav id="main-nav" ... />
	<main id="main-content" tabIndex={-1} css={{ '&:focus': { outline: 'none' } }}>
		...
	</main>
</React.Fragment>

Skip links help screen reader and keyboard-only users skip to noteworthy sections of a page. Skip links are not visual until they receive focus.

Skip links can be read by screen readers and exist to address WCAG 2.1 SC 2.4.1.

include between the opening of the <body> and the page <header>
use a label for screen readers – for example, Skip to main content
use for skipping to important UI elements such as Main navigation and Main content
make sure links go to the correct location.

Don’t

have more than 5 on a page
use for unimportant elements such as the footer
link to content on other pages.

A11y – Utilities for improving accessibility.

Edit this page

Skip link

Related components