Skip link

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Usage
  2. Behavior
  3. Writing content
  4. Best practices
  1. Usage
  2. Behavior
  3. Writing content
  4. Best practices

Usage

A skip link is used to make navigation easier for keyboard and screen reader users by letting them skip navigation.

Behavior

A skip link is hidden off-screen by default. When users navigate to it, it will appear to drop down from the top of the viewport, making it visible for sighted users.

Activating the skip link will hide it again and move the keyboard or screen reader focus to the main content area.

Writing content

The recommended text label for a skip link is “Skip to main content” because it describes where users will go after activating the link. If it’s necessary to adjust the wording, make sure that the text label clearly describes what the skip link will do.

Character count

The recommended maximum character count is listed below and includes spaces.

Element Character count
Text label 20

Best practices

The vast majority of pages will need only one skip link, unless it is a very complex page with many repeated elements. The purpose of a skip link is to help users navigate a page more quickly and easily. Adding too many skip links detracts from this goal. If you’d like users to be able to jump from one section to the other, consider using jump links instead.

Wireframe of a webpage with one skip link at the top

Use a skip link to help users avoid tabbing through multiple navigation items.

 Wireframe of a webpage with skip links at the top of the page and at the top of every tile

Do not use more than one skip link per page, unless it’s necessary for a very complex page with many repeated elements.

Main content

“Main content” in a skip link’s text label refers to the content that appears immediately after the navigation. Ensure that users skip only the navigation, or adjust the element's text to give a more accurate description of what will be skipped.

Wireframe of a webpage with arrow pointing from skip link to the first interactive element on the page

Ensure that users skip only the navigation, or adjust the text of the skip link to give a more accurate description.

 Wireframe of a webpage with arrow pointing from skip link to the second interactive element on the page

Do not allow the skip link to skip content without mentioning it in the skip link.

Visibility

To prevent the skip link from being visually distracting, hide a skip link until users navigate to it. The most accessible way to hide it is to position the skip link outside of the viewport, rather than using display: none or the hidden attribute in CSS.

Wireframe of webpage that has a tile in focus and no visible skip link

Hide the skip link by default, until the user navigates to it.

 Wireframe of a webpage that has a tile in focus and a visible skip link

Do not keep the skip link visible if the user hasn’t navigated to it or if the user has already moved to the main content.
Edit this page on GitHub