Developer mode
Opens components on the React tab by default.
Your bookmarks

SkipLink

Enables users to skip directly to primary content in any component.

When designing with accessibility in mind, it’s important to remember that not everyone will navigate your pages in the same way. Some people will go through all of your content in the order it’s presented, often having to go through irrelevant content to get to what they want.

Offer skip links at the start of complex content, such as cards and itinerary results with multiple actions within them. Then users who navigate in a non-visual way can skip directly to the action they want to take. It can help you satisfy WCAG2.0 Criterion 2.4.1 and won’t clutter up your designs for anyone who isn’t using it.

If you want to skip from the top of a page or you have other actions you want to offer at the start, consider a SkipNavigation component.

Component status

Figma
n/a
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Guidelines

Skip repeated content

Content that repeats on many screens, such as navigation, is easy to skip when you know where it ends. That’s clear when the content is visual. But users need something else when they don’t have visual cues.

Offer links to skip repeated content so everyone can get to the content they’re interested in. 

This is enormously helpful for people who go through your content in the order it’s presented. It lets them find content by what’s important to them, not where it is on the page.

Related components

SkipNav

SkipLink components can work in any other component, such as modals and cards. For links only at the top of the page, consider a SkipNavigation component.