authors MAY use aria-disabled=true on a button element, rather than the disabled attribute. However, authors SHOULD NOT use both the native HTML attribute and the aria-* attribute together,
HTML elements with disabled
are ignored when a screen reader uses tab navigation. To expose the disabled element, one may use aria-disabled
and custom JS and CSS to mimic disabled behavior instead. Setting both aria-disabled
and disabled
is unnecessary.
This linter will raise when both aria-disabled
and disabled
are set on HTML elements that natively support disabled
including button
, fieldset
, input
, optgroup
, option
, select
, and textarea
.
<button aria-disabled="true" disabled="true">
<input aria-disabled="true" disabled="true">
<button disabled="true">
<input disabled="true">
<button aria-disabled="true" class="js-disabled-button disabled-button">Update</button>