WAI-ARIA: aria-disabled (State)
Description
Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. See related aria-hidden and aria-readonly.
For example, irrelevant options in a radio group may be disabled. Disabled elements might not receive focus from the tab order. For some disabled elements, applications might choose not to support navigation to descendants. In addition to setting the aria-disabled attribute, authors SHOULD change the appearance (grayed out, etc.) to indicate that the item has been disabled.
The state of being disabled applies to the current element and all focusable descendant elements of the element on which the aria-disabled attribute is applied.
Browser Compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
ariaDisabled | ChromeFull support81 | EdgeFull support81 | FirefoxNo supportNo | Internet ExplorerNo supportNo | OperaFull support68 | SafariFull support12.1 | WebView AndroidFull support81 | Chrome AndroidFull support81 | Firefox for AndroidNo supportNo | Opera AndroidFull support58 | Safari on iOSFull support12.2 | Samsung InternetFull support13.0 |
Screen Reader Support
| Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| MUST convey the “true” value | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported |
aria-disabled Example
<div role="button" aria-disabled="true" tabindex="-1">Edit</div>Characteristics
Used in roles
- All elements of the base markup
Values
- True/False
Value representing either true or false. The default value for this value type is False, unless otherwise specified. - False (default)
- The element is enabled.
- True:
- The element and all focusable descendants are disabled and its value cannot be changed by the user
Semantic HTML
Use the HTML “disabled” attribute.
<form action=”/action_page.php”>
First name: <input type=”text” name=”fname”><br>
Last name: <input type=”text” name=”lname” disabled><br>
<input type=”submit” value=”Submit”>
</form>
Reference
- WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on aria-disabled. - A11Y Support
The screenreader compatibility for each of the ARIA attributes is taken from the A11Y Support. Please refer to the original source if screenreader compatibility is updated for aria-disabled. - MDN Web Docs
The browser compatibility for each of the ARIA attributes is taken from the MDN Web Docs. Please refer to the original source if browser compatibility is updated for aria-disabled.
