Improving My Website’s Skip Link

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 the starbucks website:

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.