# Skip Links: Improving Accessibility and Navigation on Your Website πŸ”— Skip links allow screen readers, keyboard users, and other assistive technology users to quickly navigate to the main content and skip over large headers or navigation. In this article, I’ve explained the need for skip links, how skip links improve accessibility, and the steps to build a skip link. ## 1\. Understanding the Problem πŸ’» Nowadays websites have large headers or navigation. This makes it difficult for screen reader and keyboard users to quickly navigate to the main content. They need to tab through each navigation link before reaching the main content. This results in a bad user experience. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675438331195/457e2544-9483-4527-a5ff-655ae754eeea.gif align="center") ## 2\. Skip Links: The Solution πŸ”— To make it easy for screen readers, keyboard users, and other assistive technology users to navigate to the main content, skip links should be built. * Skip links are present at the top of the website and are visually hidden. * On the first `Tab` press, this link gains focus and is visible to the users. * The users can then navigate directly to the main content by using the link. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675438343066/4777cff0-2ed0-4a11-8772-7f9681cc7e81.gif align="center") ## 3\. Building a Skip Link πŸ‘©β€πŸ’» Following are the steps to build a skip link: 1. Create a link that navigates it to the main content. 2. Place the link at the top of the website so that it gains focus on the first `Tab` press. 3. Make the link visually hidden. 4. Show the link on focus. ### 3.0 The basic setup The body of the HTML has 4 navigation links and then the main content. Screen readers or keyboard users will travel through all these navigation links before going to the main content. ```jsx

Hello world

About us
``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675438358064/574634db-76d1-48e0-aa11-5afa31a27ded.gif align="center") ### 3.1. Creating a link * Create a link to the main content on the page. * Place it at the top of the web page. ```jsx

Hello world

About us
``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675438468263/ab19ee7b-60f1-406b-a063-8057441ffba9.png align="center") ### 3.2. Hiding the link Giving the link an absolute position and translating it by the X-axis by `-100%` will make it hidden. ```jsx .skip-link { position: absolute; background: white; transform: translateX(-100%); overflow: hidden; width: 1px; } ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675438478683/8c63bd6b-20f7-4245-89bd-799c4ff89e50.png align="center") ### 3.3. Showing the link on focus Translating the skip link to 0% will make the link visible. ```jsx .skip-link:focus { transform: translateX(0%); overflow: auto; width: auto; } ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675438492463/b417e840-c9a1-4ba3-965f-8db952437861.png align="center") ## 4\. Result ✨ Now, on `Tab` press, the Skip to content link is visible. By clicking on that link, we can skip the navigation links and go directly to the main content. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1675438372910/48b72040-98e3-4b03-a2ad-8f199cfd85cb.gif align="center") ## 5\. That’s all folks πŸ™Œ By providing a quick and easy way for users to navigate directly to the main content, skip links can improve the overall user experience and accessibility of a website. Let’s connect: * [**Twitter**](https://twitter.com/SiddhiGate) * [**GitHub**](https://github.com/siddhigate) * [**LinkedIn**](https://www.linkedin.com/in/siddhigate/)