Skip hidden tab indexes

Question

I have the following html:

<span tabindex="19">

</span>

<span tabindex="20">

</span>

<span tabindex="21">

</span>

<span id="hidden" tabindex="22">

</span>

<span tabindex="23">

</span>

<span tabindex="24">

</span>

As you can see one of the span is hidden, the code to hide it is

#hidden
{
display: none;
}

I want a behavior where tab skips the hidden indexes. So i want something like this when i click tab:- go to 19,20,21,23,24

I have no way of controlling the tab indexes as they are coming hard coded in the html i process.

Answer 1

Thank you guys!!

I tried a lot of things, so i was wrong in hiding it using

#hidden
{
display : none.
}

I tried

#hidden
{visibility : hidden }

and tab skips the links which are marked as hidden.

Answer 2

You could give it a negative tabindex which is supposed to be ignored by the browser. There are jQuery plugins that do this as well, such as SkipOnTab https://github.com/joelpurra/skipontab.

var $hidden = $('#hidden');
$hidden.attr('tabindex', '-' + $hidden.attr('tabindex'));