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 …

  • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>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 …</p> </body> </html>
  • Murray Adcock.
Journal permalink