Skip Links

01 Dec 2012 | One-minute read

An earlier post of mine describes the purpose of skip links. Now that you want to implement it, what is the best way? Searching online gives lots of options and an equal number of exceptions. What actually works?

After testing various options, I use the following HTML on my website. The HTML is simple, and the skip link is the first item following the body.

<body>
<a href="#maincontent" class="skip">Skip to content</a>
...
<div id="maincontent">
...
</div>
...
</body>

The CSS ensures that the link normally doesn’t show. The key thing it to make sure that the link does show when it gets focus/activate, otherwise it won’t be read in some cases. My CSS is

a.skip
{
position: absolute;
left: -999px;
}
a.skip:focus,
a.skip:hover,
a.skip:active
{
left: 5px;
}

The important part is the testing. This wasn’t my first approach, but it was the first and simplest that works in all scenarios I tested. This approach works in at least the following cases.

Operating SystemScreen ReaderBrowserStatus
Mac Lion VoiceOver Safari OK
Mac Lion VoiceOver Chrome OK
Windows 8 NVDA 2012.3 Internet Explorer 10 OK
Windows 8 NVDA 2012.3 Chrome 23 OK
Whether this approach works using some operating systems, screen readers, and browser combinations.

For things not in the table, such as Firefox, Android, iOS, etc, I simply don’t know. If it works (or if it doesn’t) let me know and help me populate the table.