Navigation

SkipLink and VisuallyHidden

The first link on the page jumps past the navigation; hidden text gives screen readers context the screen already shows.

Ant Design: -

import { SkipLink, VisuallyHidden } from '@alea/ui';

Examples

Press Tab on this page: the first stop is the skip link (shown here inside the preview).

The first link on the page: hidden until focused, it jumps past the navigation to the content (Chakra SkipNav).

Prop	Type	Default	Description
`children`	`ReactNode`	`'Skip to content'`	The link text. Default "Skip to content".
`target`	`string`	`'main'`	The id of the main content, without #. Default "main".

Content for screen readers only: still read, never shown (MUI visuallyHidden, Chakra VisuallyHidden).

Prop	Type	Default	Description
`children`required	`ReactNode`	-	Text only screen readers should hear.
`as`	`"div" \| "h2" \| "h3" \| "p" \| "span"`	-	Render as another element. Default span.

SkipLink is hidden until it gets focus, then slides in at the top left. Put it first in the body and give your main element the same id.
VisuallyHidden keeps text in the accessibility tree; never use it to hide things sighted keyboard users need.

Key	Does
`Tab (first)`	Shows the skip link
`Enter`	Jumps to the content

Don't