Swapping appearance misleads expected consequences

What it is

Even with a correct DOM role, appearance can lie. Draw submit as blue underlined words, or draw Profile as a large filled key, and people will predict consequences from what it looks like: like a link, I can come back and open a new tab; like a button, this page will change and Back may not undo it. An appearance swap misleads the consequence model, not the assistive-technology lists.

Why it happens

Visible affordance is read before role. Fill, radius, and shadow are statistical features of the button family; underline, in-prose embedding, and visited color are the link family’s. People predict from those statistics: a button means “here will change,” a link means “I will be taken elsewhere.” Swap them and the prediction inverts. A purchase that looks like a link is taken as “go to details” and actually charges; a breadcrumb that looks like a button is taken as a submit and people will not press it. The browser still offers a context menu by true role, so menu and look fight—someone sees “Open in New Tab” on what they thought was a submit, or does not see that menu and still expects a new tab. The conflict itself makes people pause, or act on the wrong prediction.

Studying it

Cross appearance with role: 2 (real link / real button) × 2 (link look / button look). Tasks are “go to another page” and “submit on this page,” with Back and new tabs allowed.

Independent variables: appearance family, true role, task type. Dependent variables: new-tab attempts, Back used as undo, hesitation, whether a spoken expected consequence matches reality.

Asking “is this a button or a link?” stops at classification. Ask “after I press, can I undo by going back / will this change the order?”

Where it stops holding

A primary navigation action (“Go to checkout”) is often a link in button clothing, borrowing recommended weight while remaining a link. If new tab and Back still make sense, the mislead is limited; if that checkout link actually charges at once, appearance and consequence fail together. Plain-text and command-line UIs have none of these statistics. Children or people who rarely use the Web may not have learned underline = link; harm depends on whether the statistics have formed.

Applying it

• Navigation may borrow button appearance, but it must not also submit data. Actions must not wear underlined in-prose clothing.
• Check that the context menu and the look point the same way: if it looks like a link, new-tab belongs in the menu; if it looks like a button, do not imply a shareable address.
• Never set purchase, delete, or send in underlined prose, even when the technology allows it.
• Verify on a still screenshot with someone uninvolved: “if I press this, can Back undo it?” Every mismatch with the true consequence is appearance misleading expectation.

Related

• Within the group: E1.08.1 Links navigate; buttons act · E1.08.2 A semantic mismatch breaks assistive technology
• Adjacent: E1.16 Link and button semantics · E1.01 Button hierarchy · J2.03 Information must not rely on color alone
• Search terms: perceived affordance · link styled as button · expected consequence