问题
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?
回答1:
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)
回答2:
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.
来源：https://stackoverflow.com/questions/14159928/what-html-elements-are-not-tabbable-even-with-tabindex