How to create a Skip Navigation link

When navigating a website with a keyboard, it's often that you'll have to tab through the website's navigation header before getting to the main content. It gets especially frustrating when you get through loads of pages to get where you want. In this tutorial, I will walk you through creating a "Skip Navigation" link so that your keyboard users can easily avoid tabbing through the navigation and get straight to the main content.

##What are we building?

What we are creating here is basically a link that is invisible while browsing the website but becomes visible once it gains focus when the user navigates the site with the Tab key.

##Why?

Before we move on to the tutorial let's answer the common question: Why do I need to make my site fully accessible with a keyboard? Some users rely on the keyboard for navigating the web. Users with motor disabilities often find it difficult to navigate with a mouse or any other device. We therefore need to make sure that our website is 100% accessible with a keyboard.

##Conclusion

As soon as you open the page and press the Tab button, the Skip Navigation button should show up. Pressing the Enter key should take you straight to the main content!