Skip to content


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

# ally.element.disabled

Makes an element inert, i.e. not editable.

# Description

HTML knows the :disabled state for form elements, but lacks something similar for all the other interactive elements. This utility makes a form of this convenient state available to every element.

Elements that were made inert by ally.element.disabled can be identified in the DOM by the attribute [data-ally-disabled="true"] to align with styling of other :disabled elements.

The following things are done in order to make an element inert:

The WICG (Web Incubater Community Group) is working on reviving the inert attribute (including a polyfill).

# Usage

var element = document.getElementById('victim');
// disable the element
ally.element.disabled(element, true);
// enable the element
ally.element.disabled(element, false);
// check the elements disabled state
var isDisabled = ally.element.disabled(element);

# Arguments

Name Type Default Description
element <selector> required The Element to modify. First element of the collections is used.
state boolean, undefined undefined true to disable the element, false to enable the element.

# Returns

# Throws

TypeError if element argument does not resolve to an HTMLElement.

# Examples

# ally.element.disabled Example

ally.element.disabled Example on

play with ally.element.disabled Example on or open the document of ally.element.disabled Example

# Changes

# Notes

Internet Explorer 10 - 11 leave a few disabled elements focusable and thus editable to the mouse, but not keyboard focusable Trident 962368, Trident 817488 (ally.js does not fix that). One can prevent this wrong behavior by adding :disabled { pointer-events: none; }.

In Blink and WebKit based browsers (Chrome, Opera, Safari, …) the <use> element is keyboard focusable if the content it references contains focusable elements. In Blink even <use tabindex="-1"> remains keyboard focusable. ally.js does not identify these <use> elements and can therefore not disable them. Blink 665121

In Google Chrome <audio controls> and <video controls> elements are made inert by removing the controls attribute - Blink 512133.

# Contributing