标准答案
- 跳转页面或资源用 a，并提供真实 href；触发页面内动作用 button。
- 不要用 href="#" 或空 href 伪装按钮，这会带来错误跳转和语义混乱。
- 不要用 div/span 加 click 伪装按钮，除非补齐 role、tabindex、键盘事件和焦点样式。
- 交互元素要有可访问名称，可以来自可见文本、aria-label 或 aria-labelledby。
- 所有键盘可操作元素都应该有清晰的 focus 样式。
题目解析
这题重点是原生语义优先。原生 a 和 button 已经包含大量键盘和辅助技术行为。
如果要手写交互语义，成本通常比直接使用正确元素更高，也更容易漏。
代码示例
跳转和动作应该使用不同元素。
HTML
<a href="/articles/">查看文章</a>
<button type="button" aria-label="关闭弹窗">关闭</button>常见误区
- 用 a href="#" 执行删除、提交、打开弹窗等动作。
- 用 div 绑定 click，但键盘无法聚焦和触发。
- 只在鼠标 hover 时有视觉反馈，没有 focus 样式。