Here is a very short article about TABINDEX which is an useful HTML attribute.

You can specify an order and navigate between HTML elements by pressing “TAB” button, thanks to this cute attribute. Using of tabindex will increase accessibility of your website and keyboard users will love you 💓

Let’s make a quick sidemenu. Here is HTML code:

<div class=”menu”>
   <div class=”item” id=”homepage” tabindex=”1">Homepage</div> 
   <div class=”item” id=”about” tabindex=”2">About</div>
   <div class=”item” id=”news” tabindex=”3">News</div>
   <div class=”item” id=”services” tabindex=”4">Services</div>
   <div class=”item” id=”contact” tabindex=”5">Contact</div>
</div>

As you see, we ordered our divs with using tabindex attribute. Let’s add some very basic style. Here is our CSS:

.menu {
   position: fixed;
   top: 0;
   left: 0;
   width: 10vw;
   height: 100vh;
   background: #eee;
   overflow: auto;
}

.menu .item {
   padding: 18px;
   border-bottom: 2px solid #ddd;
}

.menu .item:focus {
   background: #ddd;
   font-weight: bold;
   outline: none;
}

Now I am pressing “Tab” button. And now you should see something like this:

That is it. Thank you for reading. 🎉

Github repo of these codes:
https://github.com/inancakduvan/tabindex

My github profile:
https://github.com/inancakduvan

My twitter account:
https://twitter.com/InancAkduvan