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,
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" 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.