Improving My Website's Skip Link


(Updated: )

Ever since I discovered the power of the skip link, I’ve done my best to ensure that I’ve added them wherever I have repetitive content.

One problem in my implementations of it however is that I assumed that it would only be used by users with screenreaders, overlooking people who use navigate with a range of input devices. Ideally, the link should be invisible until focused on, like this

THe skip link with the words 'skip to main content' next to the starbucks logo and above the site's navigation

What I did was just made the link invisible, meaning that people would tab on nothing the first time. Not sure why I was so proud of such a glaring flaw so I fixed it. Only problem is that now when one focuses on it, the page shifts.

Here’s the code I used.

<header id="site-header">
    <a href="#main" id="skip-link">Skip to main content</a>
    <nav id="site-nav">
        <span id="site-title"><a href="/">{{ .Site.Title }}</a></span>
        <ul>
            {{ range .Site.Menus.main }}
                <li><a href="{{ .URL }}">{{ .Name }}</a></li>
            {{ end }}
        </ul>
    </nav>
</header>
#skip-link {
    position: absolute;
    left: -999999px;
}

#skip-link:focus:link {
    position: relative;
    left: 0;
    color: white;
    font-weight: bold;
}

I doubt it’s the best way to do this, but I’m plannning to fix this in my next website redesign.