{{> site-header }}

What is ally.js?

ally.js is a JavaScript library simplifying certain accessibility features, functions and behaviors. However, simply loading ally.js will not automagically make a web application accessible. The library provides certain standard functions the "web platform" should've provided itself, so JavaScript applications can be made accessible more easily.

ally.js has been tested on IE9+, Firefox, Chrome and Safari 9, as well as Mobile Chrome on Android 5.1 and Safari for iOS 9.

Simple API

How would you prevent elements outside of your modal dialog or menu from receiving focus?

<script src="path/to/ally.min.js"></script>
<script>
  ally.maintain.disabled({
    filter: '#my-dialog-element'
  });
</script>
ally.maintain.disabled Example on jsbin.com

Features

  • Identify and absorb browser differences regarding which elements are considered focusable
  • Query the DOM for all focusable or tabbable (keyboard focusable) elements
  • Trap focus navigation in a DOM sub-tree
  • Make DOM sub-trees inert (i.e. disable all element's from being focused or interacted with)
  • Identify focused elements and focus changes within ShadowDOM
  • Provide :focus-within (CSS Selectors Level 4) Polyfill
  • Determine how focus changed (keyboard, mouse, script) to apply different focus outline styles
  • Determine when an element is focusable and visible in the viewport to prevent browsers from scrolling the element into view upon focus

Have a look at the API documentation.

What people say

This is a fantastic piece of information and I'm utterly in love with the helper methods ally.js is offering to make this (usually painful) work nice and easy. Dirk Ginader
Wow, ally.js looks super useful! Glad to see it happen. Robin Berjon
I'm intrigued by how simple ally.js makes it for us to handle basic accessibility needs. Sebastian Golasch

Supported by

  • BrowserStack and SauceLabs provide VMs for automated testing - free for open source projects.
  • Code Climate and Coveralls provide us with automated code analysis and coverage reports - free for open source projects.
  • Travis CI provides a build server - free for open source projects.
{{> site-footer }} {{> tracking }}