7

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?

Adam Burley
  • 5,551
  • 4
  • 51
  • 72
  • 1
    Did you test whether the head element is actually not tabbable? – Dennis Jaheruddin Jan 04 '13 at 15:38
  • No I haven't tested it. I just gave that as an example. – Adam Burley Jan 04 '13 at 15:39
  • 1
    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. – Adam Burley Jan 04 '13 at 15:47
  • This may help: http://stackoverflow.com/questions/3059203/tab-index-on-div – Billy Moat Jan 04 '13 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!) – Adam Burley Jan 04 '13 at 16:35
  • http://www.w3.org/html/wg/wiki/ChangedAttributeTabindex – j08691 Jan 04 '13 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? – Adam Burley Jan 04 '13 at 17:42
  • @Kidburla - head and title *are* tabable if they are displayed. See http://jsfiddle.net/tbEPR/. Elements can only be tabbed to if they are displayed, so those that cannot ever be displayed won't be tabable. – Alohci Jan 04 '13 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? – Adam Burley Jan 04 '13 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. – Adam Burley Jan 04 '13 at 17:59
  • "there are surely some elements which are not tabbable" really? – feeela Jan 04 '13 at 20:28

2 Answers2

8

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.

Kornel
  • 97,764
  • 37
  • 219
  • 309
  • 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 `` 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. – Adam Burley Jan 04 '13 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 ``. – Kornel Jan 04 '13 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 `aabb` 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 `` altogether. – Adam Burley Jan 04 '13 at 19:06
  • @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. – Kornel Jan 07 '13 at 11:02
  • 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. – Adam Burley Jan 14 '13 at 09:47
8

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:

  1. Not tested on any browser other than Chrome
  2. I skipped over most of the elements that I thought likely to be tabbable (as they would have normal displayed content)
  3. 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)
Adam Burley
  • 5,551
  • 4
  • 51
  • 72
  • 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"` – redfox05 Sep 12 '16 at 20:53