Agriculture Design System
Design System for the Export Service

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 StorybookView in Github
import { ... } from '@ag.ds-next/react/skip-link';
{ 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' } }}>

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.


  • 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.