This wouldn't normally receive focus
(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.
The Low Down
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,
tabindexis 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"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
tabindexto control tabbing order, remember that you must give every focusable element a
tabindexvalue 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.