A semantic mismatch breaks assistive technology
Aliases: role mismatch · fake button · clickable div
What it is
Building a link as a button, a button as a link, or faking either with a role-less div is a role mismatch. Assistive technology offers commands by role: links get open, open-in-new-tab, copy; buttons get activate; rotors split them. After a mismatch those commands aim at the wrong object, or never appear. Usability breaks on the assistive channel; a sighted mouse user may notice nothing.
Why it happens
The accessibility tree labels every control with a role. Screen-reader rotors, voice “click button / click link,” and switch-access activation read that tree, not CSS. A div onclick is often a group or text: it enters neither the button list nor the link list, so the function seems absent. An <a> with no href wired to submit may be hit by “click link” and missed by “click button.” Conversely a submit built as a link sits in the link group; “buttons on this page” will not find save. Reading order breaks too: a link is skipped as navigation while it is the only save entry. The words may still be spoken. The object is in the wrong class, so every strategy that works by class fails.
Studying it
Walk the same form with a screen-reader rotor, voice-control “show numbers,” and Tab. Compare correct semantics with three mismatches (div, href-less a, button used to navigate).
Independent variables: DOM role, extra ARIA role override, task channel. Dependent variables: whether the control appears in the expected list, steps to activate, misactivation, task failure.
A single linear sweep misses rotor failure. The test that mismatch actually breaks is a classed lookup such as “find Save in the button list.”
Where it stops holding
ARIA roles can repair a visual library’s unsemantic root, but keyboard behavior and name have to be repaired with them; role="button" that cannot be fired with Space is a mismatch moved from DOM into behavior. Overriding an already correct native role scrambles the tree. Self-drawn controls in PDF or canvas have no DOM role; mismatch appears in another form and needs accessibility objects, not HTML patching.
Applying it
- Navigation is a link with an href; actions are a
button. Do not ship a clickablediv/span. - If the design system offers one visual, still emit the correct role on the root, rather than wrapping it in a role-less box.
- List all buttons and all links with a rotor; Save should be among buttons, Details among links.
- Verify by saying “click Save” and “click Details.” The first should hit a button role, the second a link role. Hitting nothing when the class is wrong means the semantics already mismatch.