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); } } }