Html elements that can be focused

Which HTML elements can receive focus?

I’m looking for a definitive list of HTML elements which are allowed to take focus, i.e. which elements will be put into focus when focus() is called on them? I’m writing a jQuery extension which works on elements that can be brought into focus. I hope the answer to this question will allow me to be specific about the elements I target.

6 Answers 6

There isn’t a definite list, it’s up to the browser. The only standard we have is DOM Level 2 HTML, according to which the only elements that have a focus() method are HTMLInputElement , HTMLSelectElement , HTMLTextAreaElement and HTMLAnchorElement . This notably omits HTMLButtonElement and HTMLAreaElement .

Today’s browsers define focus() on HTMLElement, but an element won’t actually take focus unless it’s one of:

• HTMLAnchorElement/HTMLAreaElement with an href
• HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement but not with disabled (IE actually gives you an error if you try), and file uploads have unusual behaviour for security reasons
• HTMLIFrameElement (though focusing it doesn’t do anything useful). Other embedding elements also, maybe, I haven’t tested them all.
• Any element with a tabindex

There are likely to be other subtle exceptions and additions to this behaviour depending on browser.

I found some interesting results: jsfiddle.net/B7gn6 suggests to me that the «tabindex» attrib is not enough to work in Chrome at least..

That the tabindex attribute «allows authors to control whether an element is supposed to be focusable» is standardized in HTML5: w3.org/TR/html5/… Basically, a value of 0 makes the element focusable but leaves its ordering up to the browser.

All elements with element.isContentEditable === true are focusable too. Note that IE -10 (11+?) can focus any element with display block or table (div, span, etc.).

An element with a tabindex of -1 may receive focus programmatically through the focus method; it just can’t be tabbed to.

…unless the tabindex is -1, which makes focus impossible >> not true, if tabindex is -1, focusing by CLICKING is possible, but focusing by pressing «tab» is impossible. -1 makes an element focusable, just it isn’t added in the tabbing order. See: jsfiddle.net/0jz0kd1a , first try to click the element, then change tabindex to 0 and try to use tab.

Here I have a CSS-selector based on bobince’s answer to select any focusable HTML element:

 a[href]:not([tabindex='-1']), area[href]:not([tabindex='-1']), input:not([disabled]):not([tabindex='-1']), select:not([disabled]):not([tabindex='-1']), textarea:not([disabled]):not([tabindex='-1']), button:not([disabled]):not([tabindex='-1']), iframe:not([tabindex='-1']), [tabindex]:not([tabindex='-1']), [contentEditable=true]:not([tabindex='-1']) < /* your CSS for focusable elements goes here */ >

or a little more beautiful in SASS:

a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, [tabindex], [contentEditable=true] < &:not([tabindex='-1']) < /* your SCSS for focusable elements goes here */ >> 

I’ve added it as an answer, because that was, what I was looking for, when Google redirected me to this Stackoverflow question.

EDIT: There is one more selector, which is focusable:

However, this is used very rarely.

@jbyrd that was just a call for edit based on bobince’s statement: «…unless the tabindex is -1, which makes focus impossible.», it was never supposed to replace ReeCube’s answer; see the edit history.

SASS (or CSS) is a suitable form to provide a rigorous answer to the above question (barring browser inconsistencies).

tabindex=»-1″ does not make an element unfocusable, it just can’t be focused by tabbing. It still may receive focus by clicking on it or programmatically with HTMLElement.focus() ; same for any other negative number. See: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…

I would recommend using input:not([type=»hidden»]) , unless you want the selector to focus an element that is visually and screen-reader hidden by browser default

$focusable: 'a[href]', 'area[href]', 'button', 'details', 'input', 'iframe', 'select', 'textarea', // these are actually case sensitive but i'm not listing out all the possible variants '[contentEditable=""]', '[contentEditable="true"]', '[contentEditable="TRUE"]', '[tabindex]:not([tabindex^="-"])', ':not([disabled])'; 

I’m creating a SCSS list of all focusable elements and I thought this might help someone due to this question’s Google rank.

• I changed :not([tabindex=»-1″]) to :not([tabindex^=»-«]) because it’s perfectly plausible to generate -2 somehow. Better safe than sorry right?
• Adding :not([tabindex^=»-«]) to all the other focusable selectors is completely pointless. When using [tabindex]:not([tabindex^=»-«]) it already includes all elements that you’d be negating with :not !
• I included :not([disabled]) because disabled elements can never be focusable. So again it’s useless to add it to every single element.

The part about not having to add :not([disabled]) on every line is wrong. Don’t believe me? Do a document.querySelectorAll(‘:not([disabled])’) and see what happens. Not disabled means you want all the enabled elements.

The ally.js accessibility library provides an unofficial, test-based list here:

(NB: Their page doesn’t say how often tests were performed.)

return value: true = success, false = failed

There is a much more elegant way to handle this:

Extend the element prototype like the sample below. Then you can use it like:

*Returns true if «element» is focusable and false if not.

/** * Determining if an element can be focused on * @return */ HTMLElement.prototype.isFocusable = function () < var current = document.activeElement if (current === this) return true var protectEvent = (e) =>e.stopImmediatePropagation() this.addEventListener("focus", protectEvent, true) this.addEventListener("blur", protectEvent, true) this.focus() var result = document.activeElement === this this.blur() if (current) current.focus() this.removeEventListener("focus", protectEvent, true) this.removeEventListener("blur", protectEvent, true) return result > // A SIMPLE TEST console.log(document.querySelector('a').isFocusable()) console.log(document.querySelector('a[href]').isFocusable())

Источник

Keyboard

To be fully accessible, a web page must be operable by someone using only a keyboard to access and control it. This includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who prefer to use a keyboard for input whenever possible.

Focusable elements should have interactive semantics

If an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option).

Note: One important exception to this rule is if the element has role=»document» applied to it, inside an interactive context (such as role=»application» ). In such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called «browse mode»).

Most interactive elements are focusable by default; you can make an element focusable by adding a tabindex=0 attribute value to it. However, you should only add tabindex if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events.

See also

Avoid using tabindex attribute greater than zero

The tabindex attribute indicates that an element is focusable using the keyboard. A value of zero indicates that the element is part of the default focus order, which is based on the ordering of elements in the HTML document. A positive value puts the element ahead of those in the default ordering; elements with positive values are focused in the order of their tabindex values (1, then 2, then 3, etc.).

This creates confusion for keyboard-only users when the focus order differs from the logical order of the page. A better strategy is to structure the HTML document so that focusable elements are in a logical order, without the need to re-order them with positive tabindex values.

See also

Clickable elements must be focusable and should have interactive semantics

If an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.

An element is clickable if it has an onclick event handler defined. You can make it focusable by adding a tabindex=0 attribute value to it. You can make it operable with the keyboard by defining an onkeydown event handler; in most cases, the action taken by event handler should be the same for both types of events.

See also

Interactive elements must be able to be activated using a keyboard

If the user can interact with an element using touch or a pointing device, then the element should also support interacting using the keyboard. That is, if you have defined event handlers for touch or click events, you should also define them for keyboard events. The keyboard event handlers should enable the effectively the same interaction as the touch or click handlers.

See also

Interactive elements must be focusable

If the user can interact with an element (for example, using touch or a pointing device), then it should be focusable using the keyboard. You can make it focusable by adding a tabindex=0 attribute value to it. That will add the element to the list of elements that can be focused by pressing the Tab key, in the sequence of such elements as defined in the HTML document.

See also

Focusable element must have focus styling

Any element that can receive keyboard focus should have visible styling that indicates when the element is focused. You can do this with the :focus and :focus-visible CSS pseudo-classes.

Standard focusable elements such as links and input fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.

If you create your own focusable components, be sure that you also define focus styling for them.

See also

Found a content problem with this page?

This page was last modified on Apr 12, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

jamiewilson / html-focus.md

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

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 representsembedded 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 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.

Источник