Why a skip navigation link is useful | Adam Laki

I'd never heard of a "skip link" before but it's a neat idea that's clearly been around for some time. Basically, it's a link placed at the very start of the <body> that's visually hidden until focused, but which provides a direct anchor link to the main content of the page. That allows keyboard users/screen readers to skip over headers, navigation bars, etc. if they just want to get to an article. Here's a simple HTML/CSS pattern:

<a class="skip-link" href="#main">Skip to content</a>
<main id="main">Your main content...</main>

.skip-link {
    color: #fff;
    background: #000;
    padding: 0.5rem 1rem;
    display: inline-block;
    font-weight: 700;
    border-radius: 4px; 
    box-shadow: 0 0 25px rgba(0,0,0,0.2);
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
}

.skip-link:focus {
    top: 2rem;
    outline: 5px solid rgba(0,0,0,0.1);
}

Explore Other Notes

⬅ Newer

Clever quote design and arrow use

The Markup have recently been doing a great job of analysing some of the big names in the tech world and highlighting some less-than-stellar behaviour or situations. However, what's really caught my […]
  • I'd never heard of a "<strong>skip link</strong>" before but it's a neat idea that's clearly been around for some time. Basically, it's a link placed at the very start of the &lt;body&gt; that's [&#8230;]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.