Tab Index

Add a logical tab index. This is particularly important if you are working with content from a CMS or you don't have full control of the source code.

Setting all elements to tabindex="0" means they will be focused in the order they appear in the document.

jQuery

jQuery(document).ready(function($) {
  $('a, input, select, button, textarea').attr('tabindex',0);
});

Native Javascript

var tabbable = ['a', 'input', 'select', 'button', 'textarea'];

for (var i = 0; i < tabbable.length; i++) {
  var elem = document.getElementsByTagName(tabbable[i]);
  for (var j = 0; j < elem.length; j++) {
    elem[j].setAttribute('tabindex', 0);
  }
}

Alternatively, you can leave any elements that already have a tabindex set as they are and set all other focusable elements to tabindex 0. The elements with a positive tabindex will be navigated to first, in ascending order, followed by elements with tabindex 0. See the W3C documentation for reference.

jQuery

jQuery(document).ready(function($) {
  $('a, input, select, button, textarea').not('[tabindex]').attr('tabindex',0);
});

Native Javascript

var tabbable = ['a', 'input', 'select', 'button', 'textarea'];

for (var i = 0; i < tabbable.length; i++) {
  var elem = document.getElementsByTagName(tabbable[i]);
  for (var j = 0; j < elem.length; j++) {
    if(!elem[j].hasAttribute("tabindex")) { /* do not edit existing tabindex */
      elem[j].setAttribute('tabindex', 0);
    }
  }
}