Skip link

The first focusable thing on the page: a link to the content landmark, off screen until it has focus.

Demo

Property editor

Change a value and apply it; the demo renders with the new values. A refused value is reported at its field and the demo keeps the starting value.

Properties

Property	Type	Default	Allowed values	Description
`target`	`string`	required		The id of the content landmark the link goes to.
`label`	`string`	required		The link text, in the page's language.

Events

This component sends no events.

Keyboard

Keys	Does
`Tab`	Reaches the link first on the page; it becomes visible.
`Enter`	Moves focus to the content landmark.

Accessibility

Off screen by a transform, not display: none, so it stays in the Tab order and appears on focus.
In this demo the link is visible when it has focus: press Tab into the demo.

Rationale

A keyboard user reaches the content without tabbing through the header and the menu on every page. The link is the first line of the body and becomes visible on focus, so a sighted keyboard user sees where focus is. The target, <main id="content" tabindex="-1">, takes focus without an outline of its own.

References

rule 15 item 1

Uses

This component uses no other component.

Used by

No usages recorded yet.

README

skip-link

The first focusable thing on the page: a link to the content landmark, off screen until it has focus.

Change log

2026-10-14: component.json (the manifest: the props now live there) and demo.php (the demos the inspector and the catalogue page show) added; see docs/architecture/inspector.md.
2026-10-14: new, from the first line of the body in header.php.