HTML Guide for disabled
An a element with both an href attribute and aria-disabled="true" is invalid; either remove aria-disabled or the href attribute.
The aria-disabled attribute is used for interactive elements to indicate that the element is perceivable as disabled by assistive technologies. However, using aria-disabled="true" in combination with an href attribute on an a element is not valid, because the link remains actionable for both user agents and assistive devices. Instead, if a link should appear disabled, you should remove the href attribute, use CSS for styling, and optionally use aria-disabled="true". If you need the element to always act as a link, avoid aria-disabled and control user access through application logic.
Incorrect:
<a href="page.html" aria-disabled="true">Visit Page</a>Correct—Option 1: Remove aria-disabled, keep link active
<a href="page.html">Visit Page</a>Correct—Option 2: Remove href, use aria-disabled, for non-actionable item
<a aria-disabled="true" tabindex="-1" style="pointer-events: none; color: gray;">Visit Page</a>In the second correct example, setting tabindex="-1" prevents keyboard navigation, and pointer-events: none; makes the link unclickable, while aria-disabled="true" makes the disabled state accessible.
Use the boolean attribute disabled without any value or with the attribute name as the value; "true" is invalid.
Detailed explanation
The HTML boolean attribute disabled indicates that the element is not editable, focusable, or submittable. For boolean attributes (per the WHATWG HTML standard and MDN), the presence of the attribute means “on/true,” and its absence means “off/false.” Valid syntaxes are:
- disabled
- disabled=""
- disabled="disabled"
Invalid values include arbitrary strings like "true" or "false". Using disabled="true" triggers the validator error because boolean attributes must not use non-empty values other than the attribute name itself.
Relevant elements that support disabled include input, button, select, textarea, optgroup, option, fieldset, and form (partial behavior). For dynamic enabling/disabling, set or remove the attribute via JavaScript rather than assigning string values.
HTML examples
Reproduce the validator error (invalid)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Invalid Disabled Example</title>
</head>
<body>
<form>
<input type="text" disabled="true">
<button type="submit" disabled="false">Submit</button>
</form>
</body>
</html>Fix (valid boolean attribute usage)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid Disabled Example</title>
</head>
<body>
<form>
<!-- Presence means disabled -->
<input type="text" disabled>
<!-- Also valid: disabled="disabled" or disabled="" -->
<button type="submit" disabled="disabled">Submit</button>
</form>
</body>
</html>The disabled attribute is a boolean attribute and must not have a value or should simply be present (disabled or disabled=""). Boolean attributes like disabled indicate presence by their occurrence alone and should not include explicit values.
Incorrect usage:
<input type="text" disabled="yes">
<input type="text" disabled="true">
<input type="text" disabled="false">Correct usage:
<input type="text" disabled>
<input type="text" disabled="">Only the presence of the disabled attribute disables the input. The value, if given, is ignored by the browser but causes validation problems if specified incorrectly. For W3C compliance, simply include the disabled attribute without specifying a value.
Although using <input type="text" disabled="disabled"> might still be marked as valid by the W3C Validator, the general recommendation for boolean attributes is to not pass any value.