J3W1 / DESIGN SYSTEM
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 · 1.1.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@1.1.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@1.1.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
Purpose
Lets a keyboard user bypass the header, navigation and toolbars in one
press. It satisfies WCAG 2.4.1 for pages that have repeated blocks before
the content; a page with nothing before main does not need one.
Anatomy
One anchor, first in the body, with href pointing at the main landmark.
It is a small raised card: color.surface.raised, 1px color.border.overlay,
text color.text.bright, at the top inline-start corner at z.skip-link.
Off-screen at rest (a negative top), on-screen while focused.
States
| State | Visual | Non-colour channel |
|---|---|---|
| default | off-screen; nothing is painted | the link is still in the tab order and the accessibility tree |
| focus-visible | appears in the top corner; ring 1px dashed color.interaction.focus.ring at −2px | the link appears; the ring |
There is no hover state: a pointer cannot reach it while it is hidden, and once visible it behaves as a link.
Keyboard
Tab from the top of the document reaches it first. Enter moves focus to
main, which carries tabindex="-1" so the browser’s focus actually lands
there and the next Tab continues inside the content. Tab away hides it again.
Accessibility
The link text names the destination (“Skip to content”), translated. Hiding
uses position only, so the link remains in the accessibility tree; display: none, visibility: hidden and aria-hidden all defeat it. The reveal is an
instant position change: nothing slides, so reduced motion needs no special
case. Contrast: text 10.10:1 on the raised surface, frame 4.57:1,
ring 4.57: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
A skip link that is always visible. One hidden with display: none or
visibility: hidden. One that is not the first tab stop. One that points at
an element without tabindex="-1", so focus does not move. A skip link
that slides in from the side and causes horizontal scroll while hidden. A
rounded pill. One rendered without the frame on the canvas.