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

desktopmobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung Internet
ariaDisabled

Screen Reader Support For aria-disabled

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey the “true” valuesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported

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

Leave a Reply

Your email address will not be published. Required fields are marked *