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:
- Add this link right before the nav bar
- Make the href be the id of the main content container
- 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!
Comments
Add Comment