Skip Link
Accessible skip-to-content link, invisible until focused. On focus shows as accent-primary filled pill with glow ring above the page.
<arc-skip-link>Overview
SkipLink is invisible during normal browsing and appears when a keyboard user presses Tab at the top of the page. When focused, it shows as an accent-primary filled pill with a glow ring above all other content, so the user can jump past repetitive navigation to the main content.
This pattern is a WCAG 2.1 Level A requirement (Success Criterion 2.4.1) and helps keyboard users, screen-reader users, and anyone navigating with assistive technology. One keystroke takes them to the primary content landmark instead of many Tab presses.
The component accepts a target prop, typically an ID selector like #main, that controls where focus moves when the link is activated. Place SkipLink as the very first focusable element inside your <body> or AppShell so it is the first thing a Tab keypress reveals. It automatically hides itself once focus moves away, so mouse users never see it.
Guidelines
When to use
- Place SkipLink as the very first focusable element in the page
- Point the target at your main content landmark (e.g. #main)
- Ensure the target element has tabindex="-1" so it can receive focus
- Test by pressing Tab immediately after page load
- Include SkipLink on every page for consistent keyboard navigation
When not to use
- Do not hide SkipLink with display:none or visibility:hidden: it must remain focusable
- Do not place SkipLink after other interactive elements: it must be first
- Do not use a target that does not exist on the page
- Do not add multiple SkipLinks unless the page has distinct content regions
- Do not remove SkipLink to "simplify" the UI: it is a WCAG requirement
Features
- Invisible by default, revealed only on keyboard focus
- Accent-primary filled pill with glow ring when visible
- Positioned above all content with fixed/absolute placement
- Configurable target selector for the skip destination
- Meets WCAG 2.1 Level A Success Criterion 2.4.1
- Automatically hides when focus moves away
- Works with any ID-based content landmark
- Token-driven theming via CSS custom properties
Preview
SkipLink is invisible by default. Press Tab at the top of any page to reveal it.
Usage
This component requires JavaScript. No pure HTML/CSS version is available. Use the Web Component directly or a framework wrapper.
<script type="module" src="@arclux/arc-ui"></script>
<!-- Place as the very first element inside <body> -->
<arc-skip-link target="#main">Skip to main content</arc-skip-link>
<!-- ...header, nav, etc... -->
<main id="main" tabindex="-1">
<!-- Page content -->
</main>import { SkipLink } from '@arclux/arc-ui-react';
export function App() {
return (
<>
<SkipLink target="#main">Skip to main content</SkipLink>
{/* ...header, nav, etc... */}
<main id="main" tabIndex={-1}>
{/* Page content */}
</main>
</>
);
}<script setup>
import { SkipLink } from '@arclux/arc-ui-vue';
</script>
<template>
<SkipLink target="#main">Skip to main content</SkipLink>
<!-- ...header, nav, etc... -->
<main id="main" tabindex="-1">
<!-- Page content -->
</main>
</template><script>
import { SkipLink } from '@arclux/arc-ui-svelte';
</script>
<SkipLink target="#main">Skip to main content</SkipLink>
<!-- ...header, nav, etc... -->
<main id="main" tabindex="-1">
<!-- Page content -->
</main>import { Component } from '@angular/core';
import { SkipLink } from '@arclux/arc-ui-angular';
@Component({
imports: [SkipLink],
template: `
<arc-skip-link target="#main">Skip to main content</arc-skip-link>
<!-- ...header, nav, etc... -->
<main id="main" tabindex="-1">
<!-- Page content -->
</main>
`,
})
export class AppComponent {}import { SkipLink } from '@arclux/arc-ui-solid';
export function App() {
return (
<>
<SkipLink target="#main">Skip to main content</SkipLink>
{/* ...header, nav, etc... */}
<main id="main" tabIndex={-1}>
{/* Page content */}
</main>
</>
);
}import { SkipLink } from '@arclux/arc-ui-preact';
export function App() {
return (
<>
<SkipLink target="#main">Skip to main content</SkipLink>
{/* ...header, nav, etc... */}
<main id="main" tabIndex={-1}>
{/* Page content */}
</main>
</>
);
}API
targetstring'#main'- CSS selector for the element that should receive focus when the skip link is activated. Typically an ID like #main.