Skip to content

Instantly share code, notes, and snippets.

@jamiewilson
Last active Jun 14, 2022
Embed
What would you like to do?
Focusable HTML Elements

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:

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.

@ldong
Copy link

ldong commented Aug 9, 2019

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

@iAmServer
Copy link

iAmServer commented Jun 14, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment