Skip Link

Skip links let a user bypass repetitive content and navigate directly to a section of the page, meeting WCAG's bypass-blocks requirement.

Usage

forge-skip-link targets another element by id through target, and controls its own visibility and placement through persistent, inline, muted, and theme. Place one as the first child of <body>, targeting the page’s main content, on any page that repeats navigation or other content across multiple pages — this satisfies WCAG 2.4.1, not just a nice-to-have.

Rules

Place a skip link as the first child of the body, targeting the page's main content.

Give the target element tabindex="-1" if it isn't otherwise focusable, so the browser can focus it without adding it to the tab order.

Write skip link text that clearly states what it navigates to.

Don't

Don't add more skip links than a page genuinely needs — assistive technology users already have their own ways to navigate between landmarks.

Don't assume a skip link behaves identically everywhere — see the Accessibility tab for a Safari-specific difference.

Basic usage

Set target to the id of the element the link should jump to.

A skip link targeting the page's main content.

<div>
  <forge-skip-link target="main-content">
  </forge-skip-link>
  <div id="main-content" tabindex="0">
    Target
  </div>
</div>

Inline skip links

A skip link doesn’t have to sit only at the top of the page — set inline to position one within the normal page flow, useful for bypassing a specific section, like search filters, to jump straight to its results.

Appearance

Set persistent to keep the link visible even when it isn’t focused, and muted for a lower-contrast color scheme. Set theme to match the link’s color to the surrounding UI.

The Forge Skip Link component is used to provide an accessible way for users to skip repetitive content and navigate directly to a section of the page. This is used for screen reader and keyboard users to improve the overall accessibility of web applications.

import "@tylertech/forge/skip-link";

Properties

Property	Attribute	Type	Default	Description
`target`	`target`	`string`	`''`	The IDREF of the element to which the skip link should navigate.
`theme`	`theme`	`SkipLinkTheme`	`'default'`	The theme applied to the skip link.
`muted`	`muted`	`boolean`	`false`	Whether or not the skip link uses a muted color scheme.
`persistent`	`persistent`	`boolean`	`false`	Whether or not the skip link should remain visible when not focused.
`inline`	`inline`	`boolean`	`false`	Whether or not the skip link is positioned within its container.
`skipUrlChange`	`skip-url-change`	`boolean`	`false`	Sets the skip link to skip browser navigation and scroll to the target element.

Slots

Name	Description
`(default)`	The default/unnamed slot for link text.

CSS Parts

Name	Description
`::part(anchor)`	The root anchor element.
`::part(focus-indicator)`	The focus indicator element.
`::part(state-layer)`	The state layer element.

CSS Custom Properties

Name	Description
`--forge-skip-link-background`	The background color of the skip link.
`--forge-skip-link-color`	The text color of the skip link.
`--forge-skip-link-shape`	The border radius of the skip link.
`--forge-skip-link-inset`	The skip link's inset from the edge of the viewport.
`--forge-skip-link-z-index`	The z-index of the skip link.
`--forge-skip-link-elevation`	The box shadow of the skip link.
`--forge-skip-link-padding-block`	The interior padding of the skip link along the block axis.
`--forge-skip-link-padding-inline`	The interior padding of the skip link along the inline axis.
`--forge-skip-link-focus-indicator-color`	The color of the focus indicator.
`--forge-skip-link-transition-duration`	The duration of the skip link's animations.
`--forge-skip-link-transition-timing-function`	The timing function of the skip link's animations.

Skip target

The target element needs tabindex="-1" if it isn’t already focusable, so the browser can move focus to it after navigation without adding it to the normal tab order.

Don’t overuse it

You may use more than one skip link to reach multiple areas of a page, but be judicious — assistive technology users already have their own methods for navigating between landmarks, and too many skip links can become their own source of frustration rather than a convenience.

Safari behavior

In Safari, a skip link doesn’t behave quite like it does in other browsers, because Safari never includes anchor links in the tab order. Screen reader users can still perceive and use the skip link to navigate the page — this only affects sighted keyboard-only navigation.