States

WAI-ARIA: aria-disabled (State)

Authored By :Raghavendra Satish Peri Last Updated :April 20, 2023 States

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 For aria-disabled

	desktop						mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
`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 For aria-disabled

Expectation	JAWS			Narrator	NVDA			Orca	TalkBack	VoiceOver (iOS)	VoiceOver (macOS)
Expectation	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

W3C (opens new window)
A11Y Support
MDN Web Docs

Related Insights on Accessibility

Raghavendra Satish Peri

Raghavendra Satish Peri is a digital Transformation specialist working with small & large enterprises in the areas of digital accessibility & digital marketing. He authors an Accessibility Blog at DigitalA11Y.com & is galvanizing the adoption of accessibility by inspiring the local tech community with meetups and mentorship. He propelled this thought by founding HelloA11y.com, a community of accessibility professionals, developers, and enthusiasts. When away from his computer, Raghava can be found at local cafes & restaurants sampling cuisines, attending local meetups, listening to audio books, or writing on his Personal Blog at raghava.in.

States