How To Improve Website Accessibility With Invisible Links

"Talk Code to Me" Image by Jan Alexander - Pixabay

There are many keyboard users who tab through the page instead of using the mouse. Some find it easier and more convenient to keep their hands on the keyboard to traverse the page versus taking the time to use the mouse. Others are only able to use their keyboard for a variety of reasons.

One inconvenience for these users is tabbing through the navigation bar at the top of a page. They have to press tab multiple times to get through all the links on the navigation bar just to get to the main content. Helping to increase accessibility in the website for these keyboard users significantly improves their user experience. Simply adding an “invisible link” at the top of the page allows keyboard users to skip these navigation links.


Frustrating experience for keyboard users


Accessibility is crucial for user experience. 

By making your website easier to use, users are likely to stay longer on the website and engage more with your brand.  

Having to tab through multiple links before getting to the main content makes for an annoying and inconvenient experience that may cause users to abandon your site prematurely.


Many top websites already do this  

Popular websites such as Amazon, ebay, Target, The New York Times, and more have an invisible link at the top of their page which allows users to skip to the main content. Keyboard users simply tab once on that link, press enter, and then skip to the main content if they would like to.  If they want to go to the other links at the top, they can just continue to tab. This dramatically helps keyboard users save time, thus adding to their user experience and encouraging them to stay on their website to continue exploring the main content.


How to add an invisible link at the top of the page

We know having this invisible link at the top of websites will help accessibility for keyboard users, but how difficult is it to add this link? It is surprisingly easy for developers to do:

  1. Add this link right before the nav bar 
  2. Make the href be the id of the main content container
  3. Add css styling to make it hidden. 

And it’s that easy!


Now whenever a user tabs initially on the page, it’ll reveal this hidden link. They can press the enter key and it’ll skip the navigation links and place the user onto the main section. This saves a bit of time and frustration. The user can get straight to the meat of the content using their keyboard.


Try adding this invisible link on your next project

Small things can make a big impact. This small invisible link can improve many users’ experience with your site. Try adding this into your next project or even to current projects in place. You can view my example code here!


Looking for more ways to increase accessibility on your site but not sure where to start? Contact Key Lime Interactive. We will help you create irresistible user experiences with UX/CX research, strategy, and design.


What are your favorite accessibility tricks? Share in the comments below!

More by this Author
Andrew Truong

Andrew Truong is a passionate Frontend Developer with experience in multiple tech stacks. He has a B.S. degree in Biology and Computer Science from the University of Houston-Downtown. Andrew looks for opportunities to learn new technologies and use them in his personal and professional projects. Andrew enjoys the problem solving involved in building applications. The more challenging the project is, the bigger potential there is for him to grow. Andrew wants to share his passion for programming with others through teaching aspiring developers how to code. He is also an instructor at a Coding Bootcamp where he enjoys meeting new people with various backgrounds and interests.


Add Comment