按钮和链接语义不可互换：通告为“button”并响应空格/回车，通告为“link”仅响应enter且必须有真实跳转目标；混用会破坏可访问性、键盘导航与用户预期。

按钮和链接在屏幕阅读器中被识别为完全不同的角色

屏幕阅读器不会凭外观判断元素用途，而是严格依据 HTML 语义。<button></button> 被通告为 “button”，@#@#@#@#@#@#@#@#@#@0）。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 优先用原生 <button></button> 或 <a></a>，而不是“增强”非语义元素
• 只有当需要自定义复杂控件（如开关、滑块）时，才考虑 ARIA widget 模式，且必须完整实现 keyboard behavior 和 state 同步
• 纯图标按钮（无文字）必须配 aria-label 或 aria-labelledby，否则屏幕阅读器只读 “button” 二字，毫无意义

真正难的不是写对标签，而是理解用户如何依赖这些语义做决策。一个被误标为 link 的按钮，可能让视障用户反复按 Enter 却得不到响应；一个被当成 button 的链接，可能让键盘用户意外离开当前页面。这些不是“小问题”，而是直接阻断操作路径。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！