Bugcrowd Design System

Bugcrowd Design System

Search/

Skip to

Last modified:

Visually-hidden ‘skip-links’ that are keyboard accessible.

Back to top

Example of Skip to - default

<nav class="bc-skip-to">
  <a class="bc-skip-to__link" href="#content">Skip to main content &darr;</a>
  <a class="bc-skip-to__link" href="#nav">Skip to main navigation &darr;</a>
</nav>
Open in Playroom

React documentation

Last modified:

ℹ️ This feature doesn’t have a corresponding React component yet.

HTML

Last modified:

Testing the rendered example: Skip-to links are visually hidden until they receive focus. Use the keyboard by pressing Tab to bring the links into :focus.

Visual location of skip-links: Upon receiving :focus, skip-to links will always visually appear to the top left of the page, layered at the ‘overlay’ z-index context layer.

Design

Last modified:

Accessibility

Last modified:

Use to provide keyboard-accessible jump points to main sections of a page. Ideal for users that interact with our product with screen reader software and/or keyboard navigation instead of a mouse.

Same page links are great for accessibility because they provide in page mechanisms for skipping content or finding sections that might be of interest. Most screen readers even announce that a link is a “same page link.”

Rationale

Last modified:

Use to provide keyboard-accessible jump points to main sections of a page.

Typically skip-links link users to:

  • Main navigation (the primary <nav>)
  • Main content container (eg <main>)

The links are established by pointing to the ID for each endpoint.

⚠️ Avoid ID collisions: Ensure the page content ID does not conflict with the ID the Modals rely on.

See also

Last modified: