Skip to content


JavaScript library to help modern web applications with accessibility concerns by making accessibility simpler

# ally.query.tabsequence

Finds keyboard focusable ("tabbable") elements in the DOM and returns them in the order calculated based on tabindex attribute values.

# Description

The Sequential Navigation Focus Order depends on a variety of factors:

ally.query.tabsequence uses ally.query.tabbable to find keyboard focusable elements and then sorts the element positions respecting ShadowDOM, <area> vs <img> replacement and tabindex attribute value.

# Usage

var sequence = ally.query.tabsequence({
  context: '.within-filter-selector',
  includeContext: true,
  strategy: 'quick',

# Arguments

Name Type Default Description
context <selector> documentElement The scope of the DOM in which to search. The first element of a collection is used.
includeContext boolean false Prepend the context element if it is focusable.
includeOnlyTabbable boolean false Include elements that would otherwise be ignored because they're considered only tabbable,
strategy "quick", "strict", "all" "quick" The approach used to find elements.

# Returns

Array of HTMLElement.

# Examples

# ally.query.tabsequence Example

ally.query.tabsequence Example on

play with ally.query.tabsequence Example on or open the document of ally.query.tabsequence Example

# Changes

# Notes


In some browsers <area> elements are provided in DOM order they occur. Others provide them in DOM order of the <img> elements that use them. ally.query.tabindex handles this appropriately. See Sequential Navigation Focus Order for Image Maps, Blink 447289, WebKit 140259

In some browsers positive tabindexes are sorted localized to ShadowDOM, in some they are sorted globally. ally.query.tabindex handles this appropriately.

In Firefox the Flexbox CSS property order affects the tabsequence, Gecko 812687, ally.js does not replicate this behavior.

In Firefox referencing the same <map> from multiple <img> elements can lead to elements missing from the tabsequence, Gecko 1116126, ally.js does not replicate this behavior.

In Firefox <label tabindex="0"> is part of the tabsequence, Gecko 1240285, ally.js does not replicate this behavior.

# Contributing