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?
The HTML spec lists conditions under which elements are focusable and how tabindex is interpreted.
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.
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:
<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)If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With