tabindex

WebAIM Tabindex contains an excellent description of how to use the HTML tabindex attribute. The attribute can have three distinct uses:

  1. tabindex="1" (or any integer number greater than 0) defines an explicit tab or keyboard navigation order that is different from the logical order of the page (otherwise assigning the tabindex wouldn´t be necessary). An element with a positive tabindex will receive tab focus before elements without tabindex or with a tabindex value of 0. Assigning a positive tabindex and changing the logical flow must be avoided. Instead change the HTML structure of the underlying document.
  2. tabindex="0" allows any element besides links and form elements (which by default can receive focus through keyboard tabbing) to receive a keyboard focus. It does not change the tab order but places the element in the logical navigation flow. It´s questionable if elements different from links and form elements should be made interactive, because the Enter and Space keyboard interaction has to be scripted into those elements in addition to make them keyboard-interactive.
  3. tabindex="-1" takes an element out of the logical navigation flow but allows to set a programmatic focus through focus() scripting. The element cannot receive keyboard focus through tabbing. Examples include a modal dialog window that should be focused when it is opened, or a form submission error message that should be immediately focused when an errant form is submitted. Do not assign tabindex="-1" to any element that must be keyboard navigable, such as a link or button that sighted users can click on with the mouse.

Ire Aderinokun has a page about tabindex with the same guidance but additional code samples. See How and when to use the tabindex attribute.

 Note

My learning: I should have a very special and well thought of use case to start assigning values to the tabindex attribute. In most cases not doing anything with tabindex is probably the best strategy.

Comments