The tabindex Attribute

Live Demo

(3) Will receive focus third
(0) In normal source order
(-1) Will not receive focus
(n/a) In normal source order
(2) Will receive focus second
(1) Will receive focus first
This wouldn’t normally receive focus (4) largest value. Next tab will give focus to the rest of tabnavigable elements in code source order.

	Firefox 4+	Safari 4	Safari 5+	Safari iOS 4+	Chrome 10+	Opera 11.10	Opera 11.50+	IE 10+	Android 2.3

The Low Down

The tabindex attribute allows the developer to customize the tabbing navigation order of a document, enabling a tabbing order that differs from the default source code order, and making elements that are not normally tab navigable, such as paragraphs, able to receive tab focus.

• In HTML4, the tabindex attribute was only relevant for elements that could recieve focus including <a>, <area>, <button>, <input>, <object>, <select> and <textarea>. In HTML5, tabindex is a global attribute, enabling any element to receive tab focus.
• When not included, the code source order is the default tabbing order of a document, with links, form controls and objects getting focus as they appear in the source code.
• Tabbing gives focus to elements with tabindex attribute values greater than zero, such as tabindex="5", in order of their tabindex values starting with the smallest value to the largest. After tabbing sequentially thru all the elements with positive tabindex values, tabbing will navigate thru the other focusable elements (links, form controls and objects) that have their tabindex set to zero (tabindex="0"), or no tabindex attribute set at all.
• tabindex="0" allows a non-form/link/object element to be placed in the default navigation order, allowing any element to be focusable and trigger interaction.
• If a link, object or form control has a negative tabindex value, with tabindex="-1" being the convention, it is removed from the default tab navigation flow and will not receive focus on tab: users will not be able to tab into it, though they can click or touch for focus.
• tabindex="-1" (or any other negative value, but -1 is the convention) allows any element to receive programmatic focus. This allows us to use JavaScript to give focus to an element that might not otherwise be able to receive focus. For example, when opening up a modal dialog focus needs to be set to the dialog. This benefits not only the screen reader which will begin reading the modal instead of the next element that is now obfuscated from the sited user, but keyboard users will then be able to use their keyboard to navigate within the modal dialog.
• Because tabindex="-1" makes elements non-navigable via the keyboard, make sure you don’t include it on any form, object, or link elements a user could click on with a mouse or receive focus via touch.
• Changing tab order is NOT recommended. Instead, markup your page in the correct source order. If you do use tabindex to control tabbing order, remember that you must give every focusable element a tabindex value AND you must maintain the correct source order ad infinitum.
• Side note: Do not auto tab into the next form element. If the user isn’t watching the screen, like those using a screen reader, or those of us who type quickly and tab fast too, we will tab ahead and skip a field, then get confused and/or annoyed.