Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add skip-link

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

Someone navigating by keyboard starts at the top of the document. Without a skip link they tab through every navigation item on every page before reaching what they came for.

<x-aura::skip-link> is invisible until it takes focus, then appears above everything else. It is the single cheapest accessibility improvement most sites can make, and WCAG asks for it: 2.4.1 Bypass Blocks.

Basic Usage

Put it as the very first element inside <body>, and give the target the matching id.

<body>
    <x-aura::skip-link href="#main" />

    <x-aura::navbar>…</x-aura::navbar>

    <x-aura::main id="main">
        …
    </x-aura::main>
</body>

Press x-aura::kbdTab</x-aura::kbd> on this page to see one appear.

Props

Prop Type Default Description
href string '#main' The id to jump to, including the #.

The label defaults to a translated "Skip to main content". Pass a slot to override it:

<x-aura::skip-link href="#content">Skip navigation</x-aura::skip-link>

Notes

The target must be able to receive focus for the jump to move the keyboard, not just the scroll position. Main merges any attribute you pass, so id="main" is enough in most browsers; add tabindex="-1" if you need to be certain.

Only the first skip link is usually worth having. Two or three of them recreate the problem they solve.