What html elements are tabbable

Question

I'm trying to find a list of elements that are tabbable.

Adding tab-index to elements make them tabbable. Some elements are tabbable by default like <input>. Is there a list of these elements that are tabbable by default?

And optionally, why are they tabbable by deault?

Answer 1

https://allyjs.io/data-tables/focusable.html is probably the most comprehensive list I've ever found. Not only does it go over what is "expected" by the spec but also how all major browsers actually behave.

Answer 2

The easiest way to find answers to such questions is by looking at the spec

I believe the list you are looking for is:

• a elements that have an href attribute
• link elements that have an href attribute
• button elements
• input elements whose type attribute are not in the Hidden state
• select elements
• textarea elements
• Editing hosts
• Browsing context containers

To answer your optional question: they are "tabbable" by default for usability issues. If you follow the principals of making a good, user friendly app, it should allow for a consistent navigation and discoverability among other things.

So, by making them "tabbable", in the order they appear in code, the default behavior is to allow the user to complete a form from top to bottom, with minimal clicks and moving around, this making the "thinking process" about what should be filled next unnecessary

Answer 3

At https://www.w3schools.com/tags/att_global_tabindex.asp, it talks about the tabindex attribute in HTML 4.01, and how only certain elements could enter the tab order through the tabindex attribute.

Those elements were: <a>, <area>, <button>, <input>, <object>, <select>, and <textarea>.

I've been working with tab stuff for a few months now, and that list seems to fit with I've noticed as naturally tabbable.