Skip to content

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

Latest commit

 

History

History
48 lines (31 loc) · 1.92 KB

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

File metadata and controls

48 lines (31 loc) · 1.92 KB

Linter Rule: Avoid using both disabled and aria-disabled attributes

Rule: html-avoid-both-disabled-and-aria-disabled

Description

Prevent using both the native disabled attribute and the aria-disabled attribute on the same HTML element. Elements should use either the native disabled attribute or aria-disabled, but not both.

Rationale

Using both disabled and aria-disabled on the same element creates redundancy and potential confusion for assistive technologies. The native disabled attribute provides both visual and functional disabling, while aria-disabled only provides semantic information without preventing interaction. Having both can lead to inconsistent behavior and unclear expectations for users.

Elements that support the native disabled attribute include: button, fieldset, input, optgroup, option, select, and textarea.

Examples

✅ Good

<!-- Use only the native disabled attribute -->
<button disabled>Submit</button>
<input type="text" autocomplete="off" disabled>

<!-- Use only aria-disabled for custom elements -->
<div role="button" aria-disabled="true">Custom Button</div>

<!-- Use only aria-disabled -->
<button aria-disabled="true">Submit</button>

🚫 Bad

<!-- Both disabled and aria-disabled -->
<button disabled aria-disabled="true">Submit</button>

<input type="text" autocomplete="off" disabled aria-disabled="true">

<select disabled aria-disabled="true">
  <option>Option 1</option>
</select>

References