tabindex
WebAIM Tabindex contains an excellent description of how to use the HTML tabindex
attribute. The attribute can have three distinct uses:
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 positivetabindex
will receive tab focus before elements withouttabindex
or with atabindex
value of0
. Assigning a positive tabindex and changing the logical flow must be avoided. Instead change the HTML structure of the underlying document.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.tabindex="-1"
takes an element out of the logical navigation flow but allows to set a programmatic focus throughfocus()
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 assigntabindex="-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 withtabindex
is probably the best strategy.
Comments