Note: originally published on my now defunct codepen blog.
The HTML disabled
attribute can be used on a limited set of HTML elements: button
, input
, select
, textarea
, option
, optgroup
, fieldset
, or form-associated custom elements (currently supported in Chrome only)
What disabled
does
When added to a control:
<input type="text" disabled>
A user:
- Cannot operate or move focus to it.
- Will get a different visual representation of the control. Usually it will be dimmed/grayed out.
- If using a screen reader they will get a different aural representation of the control. Usually the disabled state will be announced.
See the Pen
disabled fieldset by steve faulkner (@stevef)
on CodePen.
Other things to note:
- The
value
in a disabled control will not be included in form submission - When present on a
fieldset
element all descendant controls that can bedisabled
, will bedisabled
including those in nestedfieldset
elements. - It has no effect on arbitrary elements with interactive element roles:
<div role="textbox" disabled>
disabled
is a boolean attribute, when present = true, when absent = false:
false
<input type="text">
true
<input type="text" disabled>
It does not require or need any value, but still works regardless of what the value is:
See the Pen
disabled attribute values by steve faulkner (@stevef)
on CodePen.
What aria-disabled
does
<input type="text" aria-disabled="true">
aria-disabled
does one thing: It sets the disabled state in the accessibility tree exposed in the browser. If using a screen reader, when the user navigates to the control, the disabled state will be conveyed.
It does not effect control operation, or navigation, or value submission
aria-disabled
requires a value of either true
or false
(absence of the attribute in the DOM also = false
)
Also note
Setting the disabled
attribute on a control as well as aria-disabled="true"
is not necessary under any circumstances:
Not necessary
<input type="text" aria-disabled="true" disabled>
If aria-disabled="false"
is set on a control along with the disabled
attribute, the aria-disabled
attribute is ignored.
Still disabled
<input type="text" aria-disabled="false" disabled>