What is the HTML tabindex attribute?

by

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>

More Related Contents:

  1. How to ignore HTML element from tabindex?
  2. Tab Index on div
  3. My Website is Mirror-flipped on iPhone Devices
  4. Fill SVG path element with a background-image
  5. How to use the “required” attribute with a “radio” input field
  6. Thick underline behind text
  7. Linking a UNC / Network drive on an html page
  8. How to make HTML input tag only accept numerical values?
  9. HTML 5 Geo Location Prompt in Chrome
  10. Why does percentage padding break my flex item?
  11. How to trigger a phone call when clicking a link in a web page on mobile phone
  12. What makes the text on a element vertically centered?
  13. How to hide drop down arrow in IE8 & IE9?
  14. Table tbody scroll in IE8
  15. How can I prevent the scrollbar overlaying content in IE10?
  16. CSS3 border-radius clipping issues
  17. Are self-closing input tags valid in HTML 4?
  18. Make Input Type=”Password” Use Number Pad on Mobile Devices
  19. highlight the navigation menu for the current page
  20. CSS transform origin issue on svg sub-element
  21. IE8 embedded PDF iframe
  22. HTML: Characters allowed for name attribute of input element?
  23. transition for background-image in firefox?
  24. CSS Layout 2-Column fixed-fluid [closed]
  25. Create a Reverse Clip-Path – CSS or SVG
  26. What is the difference between phrasing content and flow content?
  27. z-index and iFrames!
  28. Rendering a hierarchy of “OPTION”s in a “SELECT” tag
  29. Dashed border not showing in firefox [duplicate]
  30. Random Querystring to avoid IE caching

Leave a Comment