原生语义与可访问名称

本节把原生按钮与伪按钮放在同一页面，比较角色、键盘行为和名称。

<button id="native">保存</button>
<div id="fake" role="button" tabindex="0">保存</div>
<script>
  for (const id of ['native', 'fake']) document.querySelector(`#${id}`).addEventListener('click', () => console.log(id))
</script>

鼠标点击两者都能触发，但只给伪按钮补充 Enter/Space 处理后，键盘行为才相近；这正是优先原生元素的原因。

规则与边界

• 平台保证、浏览器实现和业务约定必须分开；一个浏览器中的结果不能自动推广到所有宿主。
• 每个监听器、请求、观察器、缓存和焦点操作都要有清理/取消责任；页面或组件离开后不能继续写状态。
• 用户输入、URL、HTML、消息和持久化数据按不同信任边界处理；类型正确不代表内容可信。
• 失败、取消、超时、权限拒绝、配额不足和不支持要有不同的可观察结果。

机制拆解

原生 HTML 元素同时提供角色、键盘行为和默认状态，优先级高于用 div 加 ARIA 模拟控件。button、a、input 的语义不同，不能仅凭视觉样式互换。

可运行实验

创建一个原生 <button> 和一个 div role="button" tabindex="0"，分别测试 Enter、Space、禁用和读屏名称。为 div 补齐脚本后再比较维护成本，说明为什么原生元素仍是默认选择。

练习

1. 分别用鼠标、Enter、Space 操作原生按钮和伪按钮，记录触发次数。
2. 删除伪按钮的 tabindex，说明它为何无法进入 Tab 顺序。
3. 说明原生语义不足时补 ARIA 和键盘处理的最小范围。 查看本节答案

下一步

完成答案核对后继续本章下一篇，并把实验日志保存在自己的项目中。