Skip to content

Latest commit

 

History

History
32 lines (22 loc) · 1.15 KB

avoid-both-disabled-and-aria-disabled.md

File metadata and controls

32 lines (22 loc) · 1.15 KB

Avoid both disabled and aria disabled

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>