re-upped: Short note on the disabled/aria-disabled attributes

Japanese kitkat and several finger food sticks

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 be disabled, will be disabled including those in nested fieldset 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)