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.
: 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:
- What browsers consider focusable details in which category the various HTML elements fall per browser
- Differences between browsers and ally.js shows the few situations that ally.js cannot identify properly
The functions pertaining to "focus" are grouped in two categories:
ally.is.* represents the filters and
ally.query.* the crawlers.
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.
ally.is.focusablereturns true for any element that passes
ally.is.focusRelevant, is not disabled, rendered (i.e. not visually hidden, e.g. by
visibility: hidden) and does not pass
ally.is.focusRelevantreturns true for any potentially focusable element.
ally.is.focusablehas already passed for the given element and returns true in case the element is keyboard focusable.
ally.is.onlyTabbablereturns true for any element that can only be focused by keyboard, but not by script.
A crawler (or "DOM walker") traverses the DOM in order to find elements matching the desired focusable state.
ally.query.focusablefinds all the elements that are script focusable or keyboard focusable, but not only tabbable. By providing the strategies
"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
ally.is.focusablefilter 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.tabbablefinds all the elements that are keyboard focusable, but not only tabbable.