Skip link
The first tab stop of a page, hidden until it receives keyboard focus, that jumps past the chrome to the main content.
stable · light DOM · 4.0.0. Light DOM retains static content, native semantics, label relationships and host composition without duplicating controls.
Live variants
default
Example destination: main
<j3w1-skip-link id="example-skip-link-default"><a class="skip-link" href="#example-skip-link-default-main">Skip to content</a><p id="example-skip-link-default-main" tabindex="-1" class="j3w1-example-target">Example destination: main</p></j3w1-skip-link>Install and register
Use the exact version. If npm publication is pending, install the release tarball from the installation guide.
npm install --save-exact @j3w1/ui@4.0.0import '@j3w1/ui/tokens.css';
import '@j3w1/ui/styles/skip-link.css';
import '@j3w1/ui/register/skip-link';Insert the maintained markup above after loading these imports. Its native children provide accessible names and form behavior; the empty custom tag alone does not create a control.
Copy the complete implementation
npx --package=@j3w1/ui@4.0.0 j3w1-ui copy skip-link --out ./vendor/j3w1/skip-linkThe CLI verifies every file before writing and refuses overwrites. Serve the output over HTTP and open index.html. Keep its modules, CSS, tokens and licence notices together.
Public API
attributes
| Name | Type / signature | Meaning |
|---|---|---|
disabled | CustomEvent | Disable the native controls owned by this instance. |
loading | CustomEvent | Mark the primary control busy and prevent duplicate activation. |
properties
| Name | Type / signature | Meaning |
|---|---|---|
disabled | boolean | Delegates disabled state to native children. |
name | string | Native control name; application form keys remain explicit. |
methods
| Name | Type / signature | Meaning |
|---|---|---|
refresh | (): void | Reconnect behavior after replacing native child structure. |
focus | (options?: FocusOptions): void | Focus the first usable native control. |
events
| Name | Type / signature | Meaning |
|---|
Dependencies and verification
Registered components: none. Style dependencies: none.
Package presence establishes an available implementation. Actual passes depend on the tested artifact and environment. Read specification execution evidence; read packed-consumer evidence; inspect the complete state matrix.
Full implementation manifest, API and token dependency closure
Canonical specification
Skip link skip-link
The first tab stop of a page, hidden until it receives keyboard focus, that jumps past the chrome to the main content.
Report an issue with this component
Tokens
Focus a role to inspect its values; follow its link for persistent usage and source details.
| Part | Role | Value | Use |
|---|---|---|---|
root.bg | color.surface.raisedapproveduse | #140b0b | D-041 surface.raised: color.primitive.modern.raised. |
root.text | color.text.brightapproveduse | #ffa2a7 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
root.border | color.border.overlayapproveduse | #c81a1a | D-041 owner correction: red control and floating-frame borders, distinct from rose text. |
root.ring | color.interaction.focus.ringobserveduse | #e53935 | 1px dashed focus ring on controls and rows. |
State matrix
Every declared state and combination, statically rendered; the default cell is live. Sizes: compact, comfortable (switch with the density control above).
| State | Default |
|---|---|
default | |
focus-visible |
Purpose
Lets a keyboard user bypass the header, navigation and toolbars in one press,
satisfying WCAG 2.4.1. A page with nothing before main does not need one.
Anatomy
A small raised card: color.surface.raised, 1px color.border.overlay, text
color.text.bright.
States
| State | Visual | Non-colour channel |
|---|---|---|
| default | off-screen; nothing painted | still in the tab order and the accessibility tree |
| focus-visible | appears in the top corner; 1px dashed color.interaction.focus.ring ring at −2px | the link appears; the ring |
No hover state: a pointer cannot reach the hidden link, and once visible it behaves as a link.
Keyboard
As in the key table; after Enter the next Tab continues inside the content.
Accessibility
The link text names the destination (“Skip to content”), translated.
aria-hidden defeats it as surely as display: none or visibility: hidden.
The reveal is an instant position change, so reduced motion needs no special
case. Text meets 4.5:1; frame and ring 3:1. The visible target is at least 24
CSS pixels tall.
Portability
Web-only. Frameworks that render their own header keep this exact markup first in the body; a host stylesheet that removes outlines must restore the ring here. The reference site uses this component for its own skip link.
Non-examples
Always visible. Hidden with display: none or visibility: hidden. Not the
first tab stop. Pointing at an element without tabindex="-1", so focus does
not move. Sliding in from the side and causing horizontal scroll while hidden.
A rounded pill. Rendered without the frame on the canvas.
Contrast report
6 declared pairs measured on resolved sRGB values with the WCAG 2.x formula; 0 waived (decorative only), 0 failing. A pass is a design target for the named role, not an application-wide conformance claim.
| Pair | State | Kind | Foreground | Background | Ratio | Min | Result |
|---|---|---|---|---|---|---|---|
| skip-link default text | default | text | color.text.bright #ffa2a7 | color.surface.raised #140b0b | 10.14 | 4.5 | pass |
| skip-link default border | default | ui | color.border.overlay #c81a1a | color.surface.raised #140b0b | 3.34 | 3 | pass |
| skip-link focus-visible text | focus-visible | text | color.text.bright #ffa2a7 | color.surface.raised #140b0b | 10.14 | 4.5 | pass |
| skip-link focus-visible border | focus-visible | ui | color.border.overlay #c81a1a | color.surface.raised #140b0b | 3.34 | 3 | pass |
| skip-link focus-visible outline | focus-visible | ui | color.interaction.focus.ring #e53935 | color.surface.raised #140b0b | 4.59 | 3 | pass |
| ring on the raised surface | focus-visible | ui | color.interaction.focus.ring #e53935 | color.surface.raised #140b0b | 4.59 | 3 | pass |
Keys
| Key | Action |
|---|---|
| Tab | From the address bar or the top of the document, focuses the skip link and reveals it. |
| Enter | Moves focus to the main landmark (which carries tabindex="-1") and scrolls it into view. |
| Tab (again) | Leaves the link without activating it; it hides again. |
For agents
Component JSON ·Implementation brief ·Build a task kit ·
Related: link sidebar-nav toolbar
Stress fixtures: FX-320 FX-ZOOM-200 FX-I18N FX-RTL FX-RM FX-HC FX-STATE-MATRIX