Agent Wranglers

Data views Recommended

Say why a control is unavailable

When a control can't be used yet, say why in visible text next to it, and what would make it work.

By Erik Bergstedt, Agent Wranglers. Updated .

How to do it

Prefer an enabled control that explains the problem when pressed, because disabled buttons can't take focus and many people never find out why. When you must disable, link the reason with aria-describedby. Never disable a form's submit button to signal invalid fields. Let people submit and show the errors next to the fields.

Example

<button type="button" aria-disabled="true" aria-describedby="export-reason">Export to CSV</button>
<p id="export-reason">Exports are part of the Team plan. <a href="/billing">Change plan</a></p>

How to check

A browser test finds every disabled button and every aria-disabled="true" element. Each has an aria-describedby that points to visible, non-empty text.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/data-views/disabled-with-reason.