The button that lies

There's a class of interfaces that looks honest and behaves meanly: a “Send” button that starts out active and turns grey after the click. The user thinks they pressed it, but nothing actually happened.

disabled has a well-known annoyance: the element drops out of the tab order and stops receiving focus. Someone navigating a form by keyboard suddenly loses their place. Screen readers stop announcing the button too — it just disappears from the accessibility tree.

The second option is to leave the button active and, on click, show what's missing. Focus stays where it was and the error appears next to the field instead of somewhere at the top of the form.

• disabled is fine while the form has never been submitted.
• aria-disabled plus validation on click — when focus must be preserved.
• The error message belongs next to the field, not in a corner of the screen.

The cheapest improvement I made last month: I stopped hiding the button. It's always there; only the behaviour changes. Fewer support emails of the “I clicked and it didn't send” kind.