语义错配会破坏辅助技术的可用性
别名: 角色错配 · fake button · div onClick
概念解释
把链接做成按钮、把按钮做成链接、或用无角色的 div 冒充二者，叫语义错配（role mismatch）。辅助技术按角色提供命令：链接有「打开、在新标签打开、复制」，按钮有「激活」，列表转子能按角色把它们分开。错配之后，这些命令对着错误的对象，或根本不出现。可用性坏在辅助通道上，视力正常的鼠标用户可能毫无察觉。
机制
无障碍树把每个控件标成角色。屏幕阅读器的转子、语音控制的「点击按钮 / 点击链接」、开关控制的激活方式，都读这棵树而不是读 CSS。<div onclick> 常常是「组」或「文本」，不进按钮名单，也不进链接名单；用户会以为功能不存在。<a> 没有 href 却绑了提交，语音用户说「点击链接」可能命中，说「点击按钮」却落空。反之，提交做成链接，转子里它出现在链接组，用户按「页面上的按钮」去找提交会找不到。错配还破坏阅读顺序：链接被当成导航跳过，实际却是唯一的保存入口。问题不是读不出字，是对象入错了类别，整套按类别工作的策略失效。
怎么研究
用屏幕阅读器转子、语音控制「显示编号」、键盘 Tab 三类通道走同一表单。对照正确语义与三种错配（div、无 href 的 a、用 button 做导航）。
自变量：DOM 角色、是否另有 ARIA 角色覆盖、任务通道。 因变量：控件是否出现在预期名单、激活所需步数、误激活、任务失败。
只听一遍线性播报会漏掉转子失败。必须测「按按钮列表找保存」这种分类查找，那才是错配真正打碎的策略。
边界
ARIA 角色可以修正视觉组件库里的无语义根节点，但要连同键盘行为和名称一起补齐；只写 role="button" 却不能用空格激活，错配从 DOM 换成了行为。原生控件已经正确时再覆盖角色，会把树搞乱。PDF 或画布里的自绘控件没有 DOM 角色，错配以另一种形式出现，需要无障碍对象补充，不在 HTML 语义这套修补里。
怎么落地
- 导航用带 href 的链接，动作用
button；禁止用可点击的div/span交货。 - 若设计系统只提供一种视觉，也要在根节点输出正确角色，而不是在外面包一层无语义盒子。
- 用转子列出本页所有按钮、所有链接，确认保存出现在按钮里、详情出现在链接里。
- 验证：语音说「点击保存」和「点击详情」。前者应命中按钮角色，后者应命中链接角色。说错类别就没有命中，语义已错配。