SkipOnTab versus tabindex
Clone this wiki locally
SkipOnTab does not rely on setting
Drawbacks when using tabindex
- It must be used consistently throughout:
- The entire form or you'll confuse the users. Focus might end up somewhere unexpected in the form, or drop out of the form all toghether, when an element is missing a tabindex.
- All forms in the entire page in order to avoid unexpected orders. This includes site-wide headers and footer.
- Any re-used page components. Tabindex ranges cannot overlap, nor can they be used in different orders on different pages without re-calculating tabindex (perhaps by using a base value per component instance).
- Setting and keeping track of tabindex, be it statically or dynamically, can become a hassle when inserting/showing a new focusable element or the page layout is changed.
- An element skipped with tabindex cannot be reached by tabbing without
- Tabbing through the reset of the form (if it has a tabindex just higher than the tabindex of the last focusable element in the form).
- Tabbing through all the menus (since they are usually at the top, before the form) and links on the page.
- Even the new HTML5 standard allows for inconsistency across platforms, in favor of adhering to platform conventions. The tab order for an undefined tabindex or an unparseable tabindex or
tabindex="0"can change between platforms; the user agent "should follow platform conventions to determine the element's relative order". If the tabindex greater than 0, it will always be tree order though.
Advantages when using SkipOnTab
- SkipOnTab (using EmulateTab) always works in the predictable tree order.
- It has improved usability over using
tabindex="-1", as skipped elements can always be reached with shift-tab. Unless using a non-standard mode of input (as given by an example defined in the HTML5 standard), browsers do not allow elements to be reached by keyboard.citation needed
Drawbacks when using SkipOnTab
- It requires jQuery.
- It only moves to the next non-skipped focusable element in the form/page, not to a specific element in a different part of the form/page.
SkipOnTab is fully dynamic in the way it detects and moves focus.