Skip to main content Red Hat Design System logo Contribute on Github v2.0.0 Home
About About the design systemHow we buildRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridPersonalization patternsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements All elements Accordion Alert Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Call to action Card Code block Dialog Footer Health index Icon Navigation (primary)Planned Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Patterns All patternsAnnouncementCardDisclosureFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTabsTileVideo thumbnail
Accessibility FundamentalsContentDesignDevelopmentContributorsQa and testingAssistive technologiesResources
Design/code status Release notes Get support

Skip link

Overview Style Guidelines Code Demos Accessibility
  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.
© 2021-2024 Red Hat, Inc. Deploys by Netlify