Skip to content

ally.js

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

# ally.maintain.tabFocus

Traps TAB focus in the tabsequence to prevent the browser from shifting focus to its UI (e.g. the location bar).

# Description

ally.maintain.tabFocus intercepts the keyboard events for Tab and Shift Tab in order to make sure the element receiving focus is part of the context element's tabsequence (Sequential Navigation Focus Order). The tabsequence is obtained via ally.query.tabsequence in order to follow the browser's rules of sorting the sequence.

As focus can be shifted by various means, even other keyboard commands (e.g. via spatial navigation), it is also necessary to engage ally.maintain.disabled, whenever ally.maintain.tabFocus is engaged.

# Usage

var handle = ally.maintain.tabFocus({
  context: '.dialog',
});

handle.disengage();

# Arguments

Name Type Default Description
context <selector> documentElement The scope of the DOM in which to consider the tabsequence. The first element of a collection is used.

# Returns

A <service> interface, providing the handle.disengage() method to stop the service.

# Examples

# ally.maintain.tabFocus Example

ally.maintain.tabFocus Example on jsbin.com

play with ally.maintain.tabFocus Example on jsbin.com or open the document of ally.maintain.tabFocus Example

# Changes

# Notes

As SVG elements cannot be focused by script in Internet Explorer and Firefox, these elements will not be part of the tabsequence, thus not reachable when ally.maintain.tabFocus is active.

# Contributing