CODEWITHSUNDEEP
javascripthtml
sir_thursday
sir_thursday

Reputation: 5419

Remove HTML tag from tab order

In my app's tab loop, the <html> tag occupies a tab stop. I'm looking to remove the <html> tag from the tap loop.

I tried adding tabindex="-1" to the <html> tag, but on IE11 at least, that did not seem to remove the element from the tab loop. I'm close to spinning my own logic using JS to "skip" to the next focusable element if document.activeElement === <html>, but I'm wondering if there's an easier way.

The solution needs to be supported cross the major browsers: IE11, Edge, FF, Chrome, Safari.

Any ideas?

Upvotes: 9

Views: 1918

Answers (2)

Raja Malik
Raja Malik

Reputation: 66

I visited HTML specification for tabindex attribute: https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute

Below is the second para:

When the attribute is omitted, the user agent applies defaults. (There is no way to make an element that is being rendered be not focusable at all without disabling it or making it inert.)

As it is clearly mentioned that the only way to make any element not focusable is by making it disable or make it invisible from DOM.

I am still searching and will post an update on this.

Moreover, I also tried to replicate this issue and could not do it on IE.(did not try to replicate on other browser).

Update 1:

I found the difference in tabIndex between HTML4 AND HTML5:

It is stated that though HTML5 allows adding tabIndex attributes on any element, it may not have any effect. This is applicable to HTML element also. My I know, how do we know if an HTML element is focused?

Upvotes: 3

DINA TAKLIT
DINA TAKLIT

Reputation: 8418

Well according to my simple research i have found that you can use You can use tabindex="-1".

The W3C HTML5 specification supports negative tabindex values.

You can use also,which works for most browsers: 

element.removeAttribute('tabindex');

I find this way with jquery but i'm not sure about 

$('#yourelment').prop('tabIndex', -1);

Please check those link for more details :

Upvotes: 1

Related Questions