ally.js

About ally.js

ally.js is a JavaScript library that simplifies accessibility-related functions and behaviors in web applications. It provides standard functions for handling focus management that browsers do not natively expose, making it easier for developers to implement accessible behavior in their applications. It has been tested on IE9+, Firefox, Chrome, and Safari 9, as well as Mobile Chrome on Android 5.1 and Safari for iOS 9.

The library identifies and normalizes browser differences in which elements are considered focusable, and can query the DOM for focusable or tabbable (keyboard-focusable) elements. It supports trapping focus navigation within a DOM sub-tree, making DOM sub-trees inert by disabling focus and interaction on their elements, and identifying focused elements and focus changes within ShadowDOM.

Additional features include a polyfill for the CSS `:focus-within` selector, detection of how focus changed (keyboard, mouse, or script) to allow different focus outline styles, and detection of whether a focusable element is visible in the viewport to prevent unwanted scrolling on focus. It is intended for developers building JavaScript-driven interfaces, such as modal dialogs or menus, who need to manage focus and keyboard interaction. The library is published under the MIT License and was created by Rodney Rehm.

Key features

• Identifies and normalizes browser differences in which elements are considered focusable
• Queries the DOM for all focusable or tabbable (keyboard-focusable) elements
• Traps focus navigation within a DOM sub-tree
• Makes DOM sub-trees inert, disabling focus and interaction
• Detects focus changes within ShadowDOM
• Polyfills the :focus-within CSS Selectors Level 4 feature

Frequently asked questions