SkipLink and VisuallyHidden
SkipLink lets keyboard users jump past repeated navigation to the content. VisuallyHidden keeps text for screen readers only, such as the unit after a price or the name of an icon.
- SkipLink
- VisuallyHidden
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, SkipLink and VisuallyHidden
Skip to content
Tab into this panel: the first stop is a link that appears in the top corner of the window.
Content
Price: 40 PLN
Dark theme, SkipLink and VisuallyHidden
Skip to content
Tab into this panel: the first stop is a link that appears in the top corner of the window.
Content
Price: 40 PLN
High contrast theme, SkipLink and VisuallyHidden
Skip to content
Tab into this panel: the first stop is a link that appears in the top corner of the window.
Content
Price: 40 PLN
UsageLink to the section Usage
import { SkipLink, VisuallyHidden } from '@skribly/ui/theme'<SkipLink targetId="content">Skip to content</SkipLink>
<main id="content">…</main>
<span aria-hidden>/mo</span>
<VisuallyHidden> per month</VisuallyHidden>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The skip link is hidden until it has focus, then appears in the top corner with a 44px target.
- Following it moves focus to the target as well as the scroll position, so the next Tab continues from the content.
- Prefer a visible label to hidden text wherever there is room.
This demo runs through axe in all three themes on every test run. See what the tests check.