How to make a HTML element focusable

Input elements like text box, textarea, button, anchor drop down list(select), list are pre focusable element in HTML. But elements like span, div, label these are not focusable element, as these are not interacting with user directly. These are only use to show output. According to new American Disability Act (ADA) any disabled person can access the website as an able person does. So, in this case we have to make the site totally focusable so that a disable person can operate the whole website using only TAB and ENTER key.


Now in case of focusable items there is no problem, but for other items we can use TabIndex.


Just put tabindex="0" to each and every element of the page which should be focusable. TabIndex="0" implies that the element will be under focusable elements and also the first element of the page. But don't worry a page can have more than one element having tabindex="0". To make manual tabbing you can use tabindex="1", tabindex="2", tabindex="3" and so on.


Now if you are working on an existing project then it’s hard to set all the elements as tabindex="0" so on that case you can do two things.


1. Using Class.
Name those elements, which are need to be focusable, with a class name. Let’s say "focusable" is the class name.


Now on the ready method of you JQuery put the below line to comply.

$('.focusable').prop('tabindex','0');

This line of code will add tabindex property with value zero into those element which has been marked with the class name "focusable". And all the site will be ready to navigate using TAB.


2. Using JQuery selector
If there are lots of elements to be focused then you can use selectors like "div", "label", "span".

$("div, label, span").prop("tabindex","0");

Like this aim can be achieved and in this case all the elements will be under navigation. If you have your own tags used in the page then you can add those too.