What is the HTML tabindex attribute?

html tabindex
sleep picture sleep · Nov 6, 2010 · Viewed 150.7k times · Source

What is the tabindex attribute used for in HTML?

Answer

Konstantin Smolyanin picture Konstantin Smolyanin · Sep 25, 2013

tabindex is a global attribute responsible for two things:

  1. it sets the order of "focusable" elements and
  2. it makes elements "focusable".

In my mind the second thing is even more important than the first one. There are very few elements that are focusable by default (e.g. <a> and form controls). Developers very often add some JavaScript event handlers (like 'onclick') on not focusable elements (<div>, <span> and so on), and the way to make your interface be responsive not only to mouse events but also to keyboard events (e.g. 'onkeypress') is to make such elements focusable. Lastly, if you don't want to set the order but just make your element focusable use tabindex="0" on all such elements:

<div tabindex="0"></div>

Also, if you don't want it to be focusable via the tab key then use tabindex="-1". For example, the below link will not be focused while using tab keys to traverse.

<a href="#" tabindex="-1">Tab key cannot reach here!</a>

Related questions

How to ignore HTML element from tabindex?

Is there any way in HTML to tell the browser not to allow tab indexing on particular elements? On my page though there is a sideshow which is rendered with jQuery, when you tab through that, you get a lot …

Read More
Tab Index on div

Please see the form HTML code below <form method="post" action="register"> <div class="email"> Email <input type="text" tabindex="1" id="email" value="" name="email"> </div> </div> <div class="…

Read More
focus on next tabindex of HTML element onEnter keypress by JQuery

Hi Friends, I'm working on a small task which is to enable the user to tabindex the html element upon enter keypress. As im new to jquery , I have written some code which seems to me that It will work ,…

Read More