Skip to content

Instantly share code, notes, and snippets.

@jamiewilson

jamiewilson/html-focus.md

Last active October 29, 2025 18:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jamiewilson/c3043f8c818b6b0ccffd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jamiewilson/c3043f8c818b6b0ccffd to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jamiewilson revised this gist Mar 31, 2016. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions html-focus.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,12 @@
    # 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.
    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
    - HTMLInputElement
    - HTMLSelectElement
    - HTMLTextAreaElement
    - HTMLAnchorElement
    - HTMLButtonElement
    - HTMLAreaElement

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

  2. jamiewilson revised this gist Mar 28, 2016. 1 changed file with 11 additions and 1 deletion.
    12 changes: 11 additions & 1 deletion html-focus.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,14 @@
    via https://www.w3.org/TR/html5/editing.html#focusable
    # 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](https://www.w3.org/TR/html5/editing.html#specially-focusable) is set.
  3. jamiewilson revised this gist Mar 28, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion html-focus.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,6 +6,6 @@ An element is **focusable** if all of the following conditions are met:
    * The element is not [inert](https://www.w3.org/TR/html5/editing.html#inert).
    * The element is not [disabled](https://www.w3.org/TR/html5/disabled-elements.html#concept-element-disabled).

    In addition, each shape that is generated for an [area](https://www.w3.org/TR/html5/embedded-content-0.html#the-area-element) element, any user-agent-provided interface components of [media elements](https://www.w3.org/TR/html5/embedded-content-0.html#media-element) (e.g. a play button), and distinct user interface components of form controls (e.g. "up" and "down" buttons on an `[<input type=number>](https://www.w3.org/TR/html5/forms.html#number-state-(type=number))` spin control), should be [focusable](https://www.w3.org/TR/html5/editing.html#focusable), unless platform conventions dictate otherwise or unless their corresponding element is [disabled](https://www.w3.org/TR/html5/disabled-elements.html#concept-element-disabled). (A single [area](https://www.w3.org/TR/html5/embedded-content-0.html#the-area-element) element can correspond to multiple shapes, since image maps can be reused with multiple images on a page.)
    In addition, each shape that is generated for an [area](https://www.w3.org/TR/html5/embedded-content-0.html#the-area-element) element, any user-agent-provided interface components of [media elements](https://www.w3.org/TR/html5/embedded-content-0.html#media-element) (e.g. a play button), and distinct user interface components of form controls (e.g. "up" and "down" buttons on an [`<input type=number>`](https://www.w3.org/TR/html5/forms.html#number-state-(type=number)) spin control), should be [focusable](https://www.w3.org/TR/html5/editing.html#focusable), unless platform conventions dictate otherwise or unless their corresponding element is [disabled](https://www.w3.org/TR/html5/disabled-elements.html#concept-element-disabled). (A single [area](https://www.w3.org/TR/html5/embedded-content-0.html#the-area-element) 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](https://www.w3.org/TR/html5/editing.html#focus), especially to aid with accessibility or to better match platform conventions.
  4. jamiewilson revised this gist Mar 28, 2016. 1 changed file with 7 additions and 8 deletions.
    15 changes: 7 additions & 8 deletions html-focus.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,11 @@
    # 7.4.2 Focus management
    From https://www.w3.org/TR/html5/editing.html#focusable
    via 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 element that represents embedded content.
    - The element is not inert.
    - The element is not disabled.
    * The element's [tabindex focus flag](https://www.w3.org/TR/html5/editing.html#specially-focusable) is set.
    * The element is either [being rendered](https://www.w3.org/TR/html5/rendering.html#being-rendered) or is a descendant of a `[canvas](https://www.w3.org/TR/html5/scripting-1.html#the-canvas-element)` element that [represents](https://www.w3.org/TR/html5/dom.html#represents) [embedded content](https://www.w3.org/TR/html5/dom.html#embedded-content-2).
    * The element is not [inert](https://www.w3.org/TR/html5/editing.html#inert).
    * The element is not [disabled](https://www.w3.org/TR/html5/disabled-elements.html#concept-element-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.)
    In addition, each shape that is generated for an [area](https://www.w3.org/TR/html5/embedded-content-0.html#the-area-element) element, any user-agent-provided interface components of [media elements](https://www.w3.org/TR/html5/embedded-content-0.html#media-element) (e.g. a play button), and distinct user interface components of form controls (e.g. "up" and "down" buttons on an `[<input type=number>](https://www.w3.org/TR/html5/forms.html#number-state-(type=number))` spin control), should be [focusable](https://www.w3.org/TR/html5/editing.html#focusable), unless platform conventions dictate otherwise or unless their corresponding element is [disabled](https://www.w3.org/TR/html5/disabled-elements.html#concept-element-disabled). (A single [area](https://www.w3.org/TR/html5/embedded-content-0.html#the-area-element) 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.
    Notwithstanding the above, user agents may [make any element or part of an element focusable](https://www.w3.org/TR/html5/editing.html#focus), especially to aid with accessibility or to better match platform conventions.
  5. jamiewilson created this gist Mar 28, 2016.
    12 changes: 12 additions & 0 deletions html-focus.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    # 7.4.2 Focus management
    From 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 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.