Enable Tab navigation for your entire page using jQuery

One of the most commonly faced Accessibility issue is in maintaining the tab order. If you don’t take it the right way, you might end up wasting days and days of effort, when you can just get it done in 2mins using jQuery.

Requirement:

Clicking on tab should go through all the functional controls on my current page.

Solution:

$(function() {
SetTabIndex();//Set tabIndex for all the HTML input elements, dropdowns, anchor tags and any control with classname as ‘linkname’ coming under control with id ‘myId’
});
function SetTabIndex() {
var tabindex = 1;
$(‘input,select,a,#myId .linkname’).each(function() {
if (this.type != “hidden”) {
var $input = $(this);
       $input.attr(“tabindex”, tabindex);
tabindex++;
}
});
}

Concept:

It’s very simple, you just need to set the tabIndex property of all the desired controls on your page, when the DOM load is complete.

Word of Caution:

It might look simple to you, but there is an expensive for loop going on inside, hence its desirable to avoid using any classnames and good to target Ids and specific controls. But i did not see much impact on my page which had around 300 links.

Hope this saved your time and effort.