# An “aria-disabled” attribute whose value is “true” should not be specified on an “a” element that has an “href” attribute.

> Canonical HTML version: https://rocketvalidator.com/html-validation/an-aria-disabled-attribute-whose-value-is-true-should-not-be-specified-on-an-a-element-that-has-an-href-attribute
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The core problem is that `aria-disabled="true"` is purely an accessibility hint — it communicates a disabled state to assistive technologies like screen readers, but it has **no effect** on the actual behavior of the element. When an `a` element has an `href` attribute, the browser treats it as a valid hyperlink regardless of any ARIA attributes. Users can still click it, follow it via keyboard navigation, and navigate to its destination. This mismatch between the announced state ("disabled") and actual behavior ("fully functional link") creates a confusing and misleading experience, particularly for users of assistive technologies.

The W3C validator flags this combination because it violates the principle that ARIA states should accurately reflect an element's true interactive state. A link that claims to be disabled but still works undermines user trust and can cause real usability problems.

### Why this matters

- **Accessibility:** Screen readers will announce the link as disabled, but users who activate it will be unexpectedly navigated away. This is disorienting and violates WCAG guidance on predictable behavior.
- **Standards compliance:** The HTML specification and ARIA in HTML requirements discourage or disallow this combination because it produces an unreliable user experience.
- **Browser behavior:** No browser will disable a link just because `aria-disabled="true"` is present. The `href` attribute always makes the `a` element an active hyperlink.

### How to fix it

You have two main approaches depending on your intent:

1. **The link should be active:** Remove `aria-disabled="true"` and keep the `href`. If the link works, don't mark it as disabled.

2. **The link should be disabled:** Remove the `href` attribute. Without `href`, the `a` element becomes a placeholder link that is not interactive. You can then use `aria-disabled="true"` to communicate the disabled state, `tabindex="-1"` to remove it from the keyboard tab order, and CSS to style it as visually disabled. You should also add JavaScript to prevent activation if needed.

## Examples

### Incorrect

This triggers the validation error because `aria-disabled="true"` conflicts with the presence of `href`:

```html
<a href="/dashboard" aria-disabled="true">Go to Dashboard</a>
```

### Correct — Keep the link active

If the link should function normally, simply remove the `aria-disabled` attribute:

```html
<a href="/dashboard">Go to Dashboard</a>
```

### Correct — Disable the link

If the link should be non-actionable (e.g., a navigation item the user doesn't currently have access to), remove the `href` attribute and use ARIA and CSS to communicate the disabled state:

```html
<a aria-disabled="true" tabindex="-1" role="link" class="link-disabled">Go to Dashboard</a>
```

```css
.link-disabled {
  color: #6c757d;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}
```

In this approach:

- Removing `href` ensures the link is not actionable by the browser.
- `aria-disabled="true"` tells assistive technologies the element is disabled.
- `tabindex="-1"` removes the element from the keyboard tab order so users can't Tab to it.
- `role="link"` preserves the link semantics so screen readers still identify it as a link (an `a` without `href` loses its implicit link role).
- The CSS provides a visual indication that the element is disabled, with `pointer-events: none` preventing mouse clicks and `cursor: not-allowed` giving a visual cue on hover.

### Correct — Use a button instead

If the "link" triggers an action rather than navigating somewhere, consider using a `button` element instead. Buttons natively support the `disabled` attribute:

```html
<button type="button" disabled>Perform Action</button>
```

This is the simplest and most robust solution when the element doesn't need to be a link. The `disabled` attribute is natively understood by browsers and assistive technologies without any ARIA workarounds.