Skip to Main Content

Developer guide - skip to main content

Ever come across a Skip to Main Content link? The name is pretty self explanatory. It allows a keyboard-only user to bypass navigation menus that are tiresome to navigate through without a mouse, and takes them straight to what they want – your content.

As a mouse user you might be wondering why it’s worth including this in your site or why we’ve gone to the trouble of even making this guide.

Here’s a challenge for you.

Go to YouTube. Using nothing but the keyboard play the very first video on the page. That’s a lot of tab clicking, right? Now imagine that this is the only way you have to use a website. Makes you want to tear your hair out, doesn’t it?

It’s not just YouTube that has this issue, please don’t think I’m picking unfairly on them. This is a similar experience across the web. Try johnlewis.com. They’ve at least tried. They have a Skip to Main content button. It just doesn’t work.

Clearly, even some of the best developers need a little help with this one.

So please, go ahead, watch the following videos to learn more about this feature, the need for it and how to best implement it. We’ve separated out the developer section so that those of you who want to jump straight into fixing your websites, can.

This first video is for everyone, detailing the problem and what can be done about it.

How-to Guide for Developers

This next video is aimed more at the developers out there looking to fix their websites.

There are a couple of techniques used in the videos that have been covered elsewhere on the blog. If you want to look more into these please follow these links:

Screen Reader Only Content >>

I had to make the “Skip to Main Content” link visible to screen readers but not to sighted users, which I achieved using CSS.

Adding Tab Focus to the Content >>

By default, you can’t set tab focus to the main content <div> element. I used the tabindex attribute to make it possible for the JavaScript to set focus to it, even though you can’t tab to it manually with the keyboard.

Simple Solution – Use My Plugin

Last thing, I promise. If you’re a developer and you’re really busy (and let’s face it, who isn’t?), we even have a ready-to-go plugin for you hosted by our friends over at GitHub. Simply implement this on your website using the instructions on this page:

Skip to Main Content Plugin >>

Click here to add a comment

Leave a comment: