How do you make a div "tabbable"?

html

responsive-design

css

javascript

byAnton Shumikhin·Feb 14, 2025

The gist is simple, make a div keyboard-focusable by setting the tabindex="0" attribute:

<div tabindex="0">
  Hey, I am now tabbable!
</div>

This magic line empowers users to approach the div by tapping the Tab key. The tabindex="0" attribute places this element orderly in the page's keyboard tab sequence. To polish the user engagement, you might want to deal with the div focus style using :focus in your CSS, and for upgraded interactivity, utilize JavaScript click events.

The nitty-gritty of keyboard engagement

Dressing up your focus style

div:focus {
  outline: 2px solid #00f; /* Blue - way cooler than red, right? */
}

Making divs act like buttons

Now, if you desire to make your div play the role of a real-deal button, marry JavaScript with your DOM to whip up an event upon focus and keyboard inputs like Enter or Space:

document.addEventListener('DOMContentLoaded', function() {
  // Find me a div that's dressed to impress (i.e., set to 'tabindex="0"')
  var divLuredByTab = document.querySelector('div[tabindex="0"]');
  divLuredByTab.addEventListener('keypress', function(event) {
    if (event.key === 'Enter' || event.key === ' ') {
      this.click(); // Mimicking a click event because who doesn't like pretending!
      event.preventDefault(); // Because Space deserves a break from scrolling duty.
    }
  });
});

Highlighting clickable friends

Don't play hide and seek. Make your div scream "I'm clickable!" with onclick attribute or a distinctive class:

<div tabindex="0" class="clickable" onclick="alert('Clicked!')">Click me</div>
<style>
.clickable {
  cursor: pointer; /* Turn that arrow into a hand, will ya? */
}
</style>

Custom tab sequences - use with caution!

Sometimes, you might need to force a custom tab order with positive numeric values for tabindex. However, tread lightly and use it as a last resort as this can disrupt the natural flow and confuse your users:

<div tabindex="5">Wait, am I fifth or am I high five-ing?</div>

Molding divs for diverse use-cases

Crafting a keyboard-navigable grid

Imagine crafting an interactive grid where each cell is your puppet, dancing on the tunes of keyboard navigation:

<div tabindex="0" class="grid-cell">Cell 1</div>
<div tabindex="0" class="grid-cell">Cell 2</div>
<!-- some more divs doing the grid-cell boogie -->
<style>
.grid-cell:focus {
  background-color: lightblue; /* Because a little spotlight never hurt anyone */
}
</style>

Keeping some elements aloof

Keeping user experience in mind, some elements might prefer to keep a low profile. Bless them with the inert attribute to disable interactivity:

<div tabindex="-1" inert>Can't touch this (MC Hammer style) 🎵</div>

Summoning a handy jQuery plugin

For those still riding the jQuery train, here's a reusable plugin for you:

(function($) {
  $.fn.tabbableEnchantments = function() {
    this.attr('tabindex', '0').addClass('tabbable');
    this.on('keypress', function(e) {
      if (e.which === 13 || e.which === 32) {
        $(this).click(); // Space and Enter, the Tab magician's assistants.
        return false; // No scrolling, please!
      }
    });
    return this;
  };
}(jQuery));

$('.my-div').tabbableEnchantments(); // Spread some magic to your divs