# ally.is.tabbable
Determines if an element is considered keyboard focusable ("tabbable").
# Description
The function does not verify if an element is focusable. It expects input that is considered focusable, so isTabbable(element)
does not always equal isFocusable(element) && isTabbable(element)
.
Consult the data tables what browsers consider focusable and what ally.js fails to consider focusable to learn how HTML elements behave.
# Usage
var element = document.getElementById('victim');
var isTabbable = ally.is.tabbable(element);
# Arguments
Name | Type | Default | Description |
---|---|---|---|
element | HTMLElement |
required | The Element to test. |
The underlying rules can also be accessed in the options
argument style by calling ally.is.tabbable.rules(options)
:
Name | Type | Default | Description |
---|---|---|---|
context | <selector> |
required | The element to examine. The first element of a collection is used. |
except | <focus identification exception> |
{} |
The Element to test. |
# Returns
Boolean, true
if the element is tabbable.
# Throws
TypeError
if element
argument is not of type HTMLElement
.
# Changes
- Since
v1.1.0
matching ofSVGElement
s is done document-independent, to allow elements from other documents (e.g. from an iframe). - Since
v1.1.0
all<iframe>
elements are considered focusable, not tabbable - except for IE9. - Since
v1.1.0
exceptions can be passed toally.is.tabbable.rules(options)
. - Since
v1.1.0
the state of the<iframe>
or<object>
element in which the currently examined element is hosted in is considered. - Since
v1.3.0
theexcept.scrollable
properly filters elements with CSS propertyoverflow
in Firefox. - Since
v1.4.0
SVG elements can be tabbable in Firefox and Internet Explorer. - Since
v1.4.0
SVG elements within<object>
or<iframe>
can be tabbable in Blink. - Since
v1.4.0
SVG elements with negative tabindex attribute within browsing contexts (<iframe>
or<object>
) are considered tabbable since Edge 14. - Since
v1.4.0
Blink and Safari 9 consider<use … tabindex="-1">
tabbable.
# Notes
There is no way to feature detect if an element is tabbable or not. The Element.tabIndex
property gives some indication, but ultimately user agent sniffing (via platform.js) is done internally to fix mismatches.
# Related resources
-
ally.is.focusRelevant
identifies elements that can receive focus -
ally.is.focusable
identifies elements that are focusable -
ally.is.onlyTabbable
identifies elements that are keyboard focusable but not focusable by script -
ally.query.tabbable
finds keyboard focusable elements in the DOM