Disabled buttons demo (disabled vs aria-disabled)
If a control looks disabled but still takes focus and activates, keyboard and screen reader users can trigger actions they were told they couldn’t. In real products this often happens when “disabling” is done with CSS only.
AFTER mode
Keyboard: Tab to move · Enter/Space to activate
BEFORE: “disabled” via CSS only
This button is styled to look disabled, but it is still enabled and will run the action.
AFTER: real
<button disabled> + aria-disabled when neededTo enable Submit, check “Can submit?”. When disabled, the button is removed from the tab order automatically.
Example: a link styled as a button
When “Can submit?” is unchecked, this link is disabled using
aria-disabled="true", removed from the tab order (tabindex="-1"), and activation is prevented.Submit disabled.
Action log
(no actions yet)