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.

Feel free to leave a reply here...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s