Implementation

Implementation

The Skip link is a block-level element.

Ensure focus is programmatically moved

The link must properly move focus to the targeted area.

For example, using a matching HTML ID: <a href="#main-content">Skip to main content</a> points to <main id="main-content">.

The historical hack of using JavaScript and adding tabindex="-1" to non-interactive target elements is no longer necessary.

DOM order

Place the skip link before all other page content, ideally immediately after <body> tag. However, if a global alert is active, place the skip link directly after the global alert/s so users don’t accidentally bypass important information.

Don’t place the skip link inside a landmark region like <nav> or <header> (Leber, 2001 and GOV.UK Design System, n.d.).