Skip link

Skip links allow for quick navigation to main content by letting the user navigate past repetitive headers or menus. They are visually hidden and only appear on keyboard focus.

Always provide skip links

WCAG guidelines require a method to bypass blocks of repetitive content. Skip links must be available on every page in a site. 

Guidelines for skip links

Skip links should be hidden until the user presses TAB, which exposes them at the top of the page. 

Once accessed, skip links should have a clear and consistent focus state.

Relevant WCAG guidelines

• 2.4.1 Bypass Blocks
• 2.4.4 Link Purpose (In Context)
• 2.4.7 Focus Visible

Code example

See example pen by U-M Library Design System (@umlibrary-designsystem) on CodePen.