Categories
HTML Accessibility

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)

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>

Leave a Reply

Your email address will not be published. Required fields are marked *