SkipOnTab versus tabindex

joelpurra edited this page Oct 10, 2012 · 3 revisions
Clone this wiki locally

SkipOnTab does not rely on setting tabindex on elements - it uses javascript events instead. Having some experience in trying to use and maintain a site using tabindex, I would not use it again.

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.

Getting and setting tabindex doesn't act consistently across browsers, but the Keyboard Accessibility Plugin should help with that and a lot of other useful things.

Note that the specification for tabindex and tabbing navigation changed between HTML4 and HTML5.

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 javascript enabled browsers.
  • 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.