The HTML aria-disabled attribute
The aria-disabled="true" attribute tells assistive technology a control is disabled — present and perceivable, but not operable. Unlike the native disabled attribute, it does not remove the element from the tab order or block events, so you must handle that yourself.
Overview
The aria-disabled attribute indicates an element is perceivable but disabled, so it is not editable or operable.
It is a widget state — a condition that can change as the user interacts. Because ARIA does nothing on its own, you must update this value in JavaScript every time the underlying state changes; a stale state is worse than none. And wherever a native element already expresses the same thing (a checkbox's checked state, the disabled attribute, a <details>'s open state), use that instead.
Like all ARIA, aria-disabled changes only the accessibility tree — what assistive technology perceives — never the element's behavior or appearance. The first rule of ARIA applies: if a native HTML element or attribute conveys this, use that instead, and only reach for ARIA when nothing native fits.
Syntax
<div role="button" aria-disabled="true" tabindex="-1">Submit</div>Values
| Value |
|---|
| true | false |
Example
<button aria-disabled="true">Pay now</button>Best practices
- Follow the first rule of ARIA — use a native HTML element or attribute that conveys this where one exists, rather than adding ARIA.
- Update the value in JavaScript whenever the state changes — keep it in sync with reality.
- Use the matching native state where one exists (a checkbox's
checked, thedisabledattribute, a <details>'s open state) instead of the ARIA version. - Set it only on an element whose role actually supports this state.