Skip to content

Instantly share code, notes, and snippets.

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

This comment has been minimized.

Copy link

@ldong 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

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