Skip-to-content link

A skip link lets keyboard and screen reader users bypass repeated navigation and jump straight to main.

Code

<a href="#main" style="position:absolute;left:-9999px;top:0;background:#1f6feb;color:#fff;padding:0.6rem 1rem;z-index:1000">Skip to main content</a>
<style>
  a[href="#main"]:focus { left: 0; }
</style>
<main id="main">...</main>

Preview

Explanation

The link is hidden off-screen (left:-9999px) until it receives Tab focus — then it appears in the top-left corner.

id="main" must be on the page's actual <main> element.

Related tools

The <main> tag

Purpose of <main>: the page's unique primary content, excluding repeated elements.