E2.21.2disabled as non-interactivedesignresearch

Disabled means the capability is off and usually not interactive

Aliases: disabled field · greyed control · unavailable input

What it is

Disabled takes a control out of the current interaction: no focus, no edit, and usually no treating the value as selectable text. It says “this capability is not open now”—submit before the agreement is checked, province before a country is chosen. It is not “the value is here, please copy”; that is read-only. The issue is capability off, not whether the grey looks like read-only, and not where the reason is written after the off.

Why it happens

A disabled implementation drops the control from Tab order and from clicks; some screen readers skip it, some say “unavailable.” That is right when a precondition must be met first: focus should not sit on an action that will fail. The side effect is that the value becomes unreachable too—autofill cannot write, copy needs another node. Making a “temporarily uneditable filled value” disabled locks still-needed data into an unreachable state. Disabled also kills hover: pointer events are eaten, a title bubble never appears, and a reason that lives only on hover might as well not be written.

Studying it

Have people complete a task locked by a precondition, comparing disabled, read-only, and visible-but-click-explains. Record: whether the control is noticed, whether the current value can be read, whether focus is wrongly sucked in. Factors: still in focus order or not, static reason text. Outcomes: accuracy at “why can’t I use this,” disabled mistaken for breakage. A screen-reader walk is required: visual grey and an “unavailable” in the tree are not automatic correspondents.

Where it stops holding

A whole-page preview should not mark every control disabled; assistive tech then hears a litany of unavailable. Use read-only or static instead. A custom widget that is only visually grey and still clickable is fake-disabled; submit still fires. A loading lock on a button is another case: a short lock against double-submit, usually still in place, name retained. Disabling a field after a server validation error so the user cannot fix the mistake is the wrong object to disable.

Applying it

  • Use disabled only when the capability is not open; use read-only when an existing value must still be copied or spoken.
  • Do not put the reason only on hover; place static copy beside the disabled control, or let a click still open an explanation.
  • When disabling a custom widget, cut pointer and keyboard together and expose disabled on the accessibility tree.
  • Verify by tabbing a row: disabled items should be skipped or clearly announced unavailable. Then try copying the value—if the task needs that value taken, disabled was the wrong state. A click with no explanation means the off has not been accounted for.

Related

  • Within the group: E2.21.1 Read-only means not editable now, but still selectable and copyable · E2.21.3 Similar looks hide whether unlock can even be asked for · E2.21.4 A disabled reason must be discoverable; read-only must say when editing returns
  • Adjacent: E1.02 Button states · E3.03 Switches
  • Search terms: disabled as non-interactive · disabled field · unavailable control

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/E2.21.2