Skip to content

ally.js

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

# ally.query.firstTabbable

Finds the first keyboard focusable ("tabbable") element in the DOM.

# Description

See ally.query.focusable for an explanation on the different query strategies.

Consult the data tables what browsers consider focusable and what ally.js considers focusable in strategy: "strict" or strategy: "quick" to learn how HTML elements behave.

# Usage

var element = ally.query.firstTabbable({
  context: '.within-filter-selector',
  defaultToContext: 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.
ignoreAutofocus boolean false Do not give elements with autofocs attribute precedence.
defaultToContext boolean false Return the context element if it is focusable and no other keyboard focusable element could be found.
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

HTMLElement that is the first keyboard focusable element in the given context.

# Examples

# ally.query.firstTabbable ignoring autofocus Example

ally.query.firstTabbable ignoring autofocus Example on jsbin.com

play with ally.query.firstTabbable ignoring autofocus Example on jsbin.com or open the document of ally.query.firstTabbable ignoring autofocus Example

# ally.query.firstTabbable ignoring autofocus Example

ally.query.firstTabbable ignoring autofocus Example on jsbin.com

play with ally.query.firstTabbable ignoring autofocus Example on jsbin.com or open the document of ally.query.firstTabbable ignoring autofocus Example

# Changes

# Notes

See ally.is.focusRelevant

Google Chrome's <dialog> implementation will focus the first keyboard focusable element, even if it has [tabindex="1"], ally.js does not.

Elements with a positive tabindex attribute (e.g. [tabindex="123"]) are ignored.

# Contributing