What HTML elements are not tabbable even with tabindex?

Asked 4/1, 2013 at 15:24 Answered 4/1, 2013 at 18:41

Does anyone have a list of the HTML (HTML5) elements that are not tabbable, even if a tabindex is specified? (By tabbable, I mean that they can receive the focus through repeatedly pressing the "tab" key.)

We know that there are those elements which are tabbable by default, such as input or textarea. We also know that there are some elements which are only tabbable if a tabindex is explicitly specified, such as div and span elements.

According to W3Schools, "In HTML5, the tabindex attribute can be used on any HTML element". However, there are surely some elements which are not tabbable even if they have a tabindex. For example, it makes no sense for the param element to be tabbable, or the head element. I also don't really think it's possible for the option element to be tabbable, but I'm not sure about that. And I'm even less sure about things like map which can contain tabbable elements but are not usually tabbable themselves.

Can someone give me a list of all the elements that can never receive focus even if they have a tabindex?

Haroldson answered 4/1, 2013 at 15:24 Comment(11)

Did you test whether the head element is actually not tabbable? – Aggi 4/1, 2013 at 15:38

No I haven't tested it. I just gave that as an example. – Haroldson 4/1, 2013 at 15:39

I just tested in Chrome 17.x and found that the head element is not tabbable. Neither is title or param, but the option element is tabbable (only if you provide a tabindex, obviously). That still does not answer my question though. – Haroldson 4/1, 2013 at 15:47

This may help: https://mcmap.net/q/76028/-tab-index-on-div – Berylberyle 4/1, 2013 at 16:13

@BillyMoat that's not helpful I'm afraid, it just states about not being able to use tabindex with div in html4, my question is really asking about html5. (Following your comment, I edited the question body to mention that specifically, although I feel uncomfortable about doing that because I am of the WHATWG-style opinion that there is no such thing as html5!) – Haroldson 4/1, 2013 at 16:35

w3.org/html/wg/wiki/ChangedAttributeTabindex – Drift 4/1, 2013 at 16:52

That link doesn't provide any information not in the text of my question. What part of that link answers my question? – Haroldson 4/1, 2013 at 17:42

@Kidburla - head and title are tabable if they are displayed. See jsfiddle.net/tbEPR. Elements can only be tabbed to if they are displayed, so those that cannot ever be displayed won't be tabable. – Babara 4/1, 2013 at 17:48

I have found that object is not tabbable, even if it displayed. Also, where can I find a list of those elements that can be displayed? – Haroldson 4/1, 2013 at 17:54

PS, strangely, that "title" thing seems to work within jsFiddle, but not in a standalone page :S Maybe because jsFiddle is rendering the result in an iframe, which changes the displayability of the title. – Haroldson 4/1, 2013 at 17:59

"there are surely some elements which are not tabbable" really? – Fondue 4/1, 2013 at 20:28

Since no one has yet come up with any kind of definitive list, I did some testing on a fairly recent version of Chrome and came up with the following list of elements which are not tabbable at all:

<base>
<basefont>
<embed>
<head>
<link>
<meta>
<object>
<param>
<source>
<style>
<title>
<track>

Unfortunately, since I only spent a couple of hours trying to write this list, it has a few caveats:

Not tested on any browser other than Chrome
I skipped over most of the elements that I thought likely to be tabbable (as they would have normal displayed content)
I have not tried setting any of these to be displayed (apart from <title> as in my comments)

I was most surprised that the following elements are tabbable:

<audio> and <video> (surprised because <embed> and <object> are not)
<br> and <wbr>
<col> and <colgroup>
<frame> and <frameset> (although they are more of a special case as they are not technically valid elements in HTML anyway)
<html> (there is almost no difference between this and <body> from a tabbing perspective)
<optgroup> and <option> (although tabbing to them does not give any visual indication - i.e. the select box does not open)

Haroldson answered 4/1, 2013 at 15:24 Comment(1)

Adding @Kidburla's comment to the answer, rather than the question, to make it easier for others to read, as it's referred to in the answer itself:

"PS, strangely, that "title" thing seems to work within jsFiddle, but not in a standalone page :S Maybe because jsFiddle is rendering the result in an iframe, which changes the displayability of the title. – Kidburla Jan 4 '13 at 17:59"

– Devisable 12/9, 2016 at 20:53

The HTML spec lists conditions under which elements are focusable and how tabindex is interpreted.

The element's tabindex focus flag is set.
The element is either being rendered or is a descendant of a canvas element that represents embedded content.
Neither the element nor any of its ancestors are inert.
The element is not disabled.

The definition relies on elements being rendered, and with CSS you can make any element rendered. For example, a focusable <param> and even <title> and <basefont>:

<!DOCTYPE>
<title tabindex=0>Test</title>
<basefont tabindex=0>
<style>
head, title {display:block}
basefont, param {content: url(image.png);}
</style>
<object><param tabindex=0></object>

BTW: Ignore W3Schools — generally that's not a reliable/authoritative source.

Snotty answered 4/1, 2013 at 18:41 Comment(5)

Hi there. First of all, in general I agree with you about W3Schools and hesitated to refer to them. But this was the simplest quote I could find that summarised what I know to be true about the applicability of the tabindex attribute. Thanks for the links you provide. However I can't see anything in there that specifically exclude any element such as <param> from being tabbable. In particular, the WHATWG seem to have a fairly odd definition of the term "being rendered" that relies on style properties and so includes elements with no visual content whatsoever. – Haroldson 4/1, 2013 at 18:52

@Kidburla indeed, there's nothing in the spec that forbids it. It doesn't need to — it may just treat all elements the same, and it works. Content can be added with CSS. I've updated my example with a focusable <param>. – Snotty 4/1, 2013 at 18:58

It doesn't really work as expected. I'm not sure how to test with the exact example you've given. But try adding a little <a tabindex=1>aa</a><a tabindex=3>bb</a> at the end and then changing the param's tabindex to 2. You will see that the tab order moves straight from the element "aa" to "bb" and skips out the <param> altogether. – Haroldson 4/1, 2013 at 19:6

@Kidburla that's just how tabindex works, regardless of type of elements involved. Non-0 tabindex is a can of worms you don't want to open. – Snotty 7/1, 2013 at 11:2

That's not true. tabindex works as you would expect. If your element had been some element which I would consider as "tabbable" (such as input, a etc) then the tab order would follow through that element. You can try it yourself. – Haroldson 14/1, 2013 at 9:47

Recommended topics

Hot tags