Focusable HTML Elements

html-focus.md

CSS :focus Selector

The :focus selector is used to select the element that has focus. It is allowed on elements that accept keyboard events or other user inputs.

• HTMLInputElement
• HTMLSelectElement
• HTMLTextAreaElement
• HTMLAnchorElement
• HTMLButtonElement
• HTMLAreaElement

More information at https://www.w3.org/TR/html5/editing.html#focusable

An element is focusable if all of the following conditions are met:

• The element's tabindex focus flag is set.
• The element is either being rendered or is a descendant of a [canvas](https://www.w3.org/TR/html5/scripting-1.html#the-canvas-element) element that represents embedded content.
• The element is not inert.
• The element is not disabled.

In addition, each shape that is generated for an area element, any user-agent-provided interface components of media elements (e.g. a play button), and distinct user interface components of form controls (e.g. "up" and "down" buttons on an <input type=number> spin control), should be focusable, unless platform conventions dictate otherwise or unless their corresponding element is disabled. (A single area element can correspond to multiple shapes, since image maps can be reused with multiple images on a page.)

Notwithstanding the above, user agents may make any element or part of an element focusable, especially to aid with accessibility or to better match platform conventions.

Thanks for sharing, this doc makes lot sense to me that not every html element would be focusable by default. Such as div, if one wants to make that div focusable, one has to add tabindex= attribute

Thanks for sharing, this doc makes lot sense to me that not every html element would be focusable by default. Such as div, if one wants to make that div focusable, one has to add tabindex= attribute

Makes a lot of sense now, thanks for this.