Avoid both disabled and aria disabled

March 28, 2023 ยท View on GitHub

Rule Details

From w3 ARIA in HTML :

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.

Examples

Incorrect code for this rule ๐Ÿ‘Ž

<button aria-disabled="true" disabled="true">
<input aria-disabled="true" disabled="true">

Correct code for this rule ๐Ÿ‘

<button disabled="true">
<input disabled="true">
<button aria-disabled="true" class="js-disabled-button disabled-button">Update</button>