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

erb

<!-- Use only the native disabled attribute -->
<button disabled>Submit</button>
<input type="text" 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

erb

<!-- Both disabled and aria-disabled -->
<button disabled aria-disabled="true">Submit</button>aria-disabled may be used in place of native HTML disabled to allow tab-focus on an otherwise ignored element. Setting both attributes is contradictory and confusing. Choose either disabled or aria-disabled, not both. (html-avoid-both-disabled-and-aria-disabled)

<input type="text" disabled aria-disabled="true">aria-disabled may be used in place of native HTML disabled to allow tab-focus on an otherwise ignored element. Setting both attributes is contradictory and confusing. Choose either disabled or aria-disabled, not both. (html-avoid-both-disabled-and-aria-disabled)

<select disabled aria-disabled="true">aria-disabled may be used in place of native HTML disabled to allow tab-focus on an otherwise ignored element. Setting both attributes is contradictory and confusing. Choose either disabled or aria-disabled, not both. (html-avoid-both-disabled-and-aria-disabled)
  <option>Option 1</option>
</select>

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

Description ​

Rationale ​

Examples ​

✅ Good ​

🚫 Bad ​

References ​