Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time

What does "focusable" mean?

An HTML element can be a member of exactly one of the following five categories:

Inert : The element is not interactive and thus not focusable.

Focusable : The element can be focused by script (element.focus()) and possibly the mouse (or pointer), but not the keyboard.

Tabbable : The element is keyboard focusable ("tabbable"), as it is part of the document's sequential focus navigation order. The element is also focusable by script and possibly the mouse (or pointer).

Only Tabbable : The element is only keyboard focusable, possibly by the mouse (or pointer), but it cannot be focused by script.

Forwards Focus : The element will forward focus to another element instead of receiving focus itself.

In which of these buckets elements are sorted, depends on the browser. Have a look at the following comparison tables:

The functions pertaining to "focus" are grouped in two categories:* represents the filters and ally.query.* the crawlers.

Filtering elements

A filter takes an element (Element) for input and returns a boolean result. Filters can be used to verify the state of a given element.

Finding elements

A crawler (or "DOM walker") traverses the DOM in order to find elements matching the desired focusable state.

  • ally.query.focusable finds all the elements that are script focusable or keyboard focusable, but not only tabbable. By providing the strategies "quick" and "strict" the user can choose to trade performance for accuracy. The difference in accuracy is detailed by the compatibility tables for quick and strict. Internally the filter is used to verify each element's state. Internally a third strategy called "all" is available to find elements that are either focus relevant (regardless of disabled and visual state) or only tabbable.
  • ally.query.tabbable finds all the elements that are keyboard focusable, but not only tabbable.