Wow you have been viewing my site since 20 seconds!
+
As regular users we tend to ignore the problems which we do not come across, one such problem can be related to accessibility. I was approached by a visually disabled individual who had a feedback for a website that we recently built. The guy was working in the same organization as a Sales Associate and was a good friend.
The problem was he had to always navigate through the long menu items before reaching the content of any page.
For example :
Menu has 20 links which he had to tabthrough to get to the blog content or the page content.
This little problem is what we can solve for our users who for some reason can not navigate with the mouse.
To skip the menu for keyboard users we can add a button which only pops up when we focus on it with the tab key. Once the user hits enter they can skip the menu and jump to the main content without going through long nested menu items.
This little accessibility button can help save a lot of time for the users which are not using their mouse and may have accessibility related problems.
This trick is seen in most of the modern web applications we use.
<!-- index.html -->
<body>
<!-- skip menu btn -->
<a class="skip-menu-btn" href="#main-content">
Skip to Main Content
</a>
<nav>
<div class="logo">
<h1><a href=""> Demo Website</a></h1>
</div>
<div class="menu">
<ul>
<li><a href=""> Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</nav>
<main>
<img src="//source.unsplash.com/1200x600?accessibility" alt="" />
<!-- main content -->
<section id="main-content">
<!-- main content -->
</section>
</main>
</body>/* Style.css */
/* hide btn by default */
.skip-menu-btn{
background:black;
color:white;
padding:1.25rem 1rem;
position:absolute;
left:45%;
transform:translateY(-120%);
transition:300ms ease-in-out;
}
/* show on focus with {tab)*/
.skip-menu-btn:focus{
transform:translateY(0);
}Check live example at https://tvrd7.csb.app/
I hope you learned something new today if you did then please share this post with your friends who might find this useful aswell. Have any questions? Feel free to connect with me on LinkedIn Twitter @singhkunal2050. You can also write me here.
Happy Coding 👩💻!