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
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.