必须用实现跳转，用触发客户端逻辑；混用会破坏键盘导航、屏幕阅读器识别和原生交互行为，语义错误不可仅靠样式修复。

按钮该用 <button></button>，跳转该用 @#@#@#@#@#@#@#@#@#@0 → 所有原生行为 intact，再用 CSS 样式化成按钮外观即可

若需新窗口跳转，加 target="_blank" 和 rel="noopener"，不要靠 JS 模拟

什么时候必须用 <button></button> 而不是 @#@#@#@#@#@#@#@#@#@1 → 默认行为是滚动到页首，需 event.preventDefault() 抑制；键盘用户按 Enter 后焦点丢失；无障碍树里它是“链接”，不是“按钮”

正确写法：<button type="button" onclick="toggleMenu()">菜单</button> → 无副作用，语义清晰，禁用时自动失去焦点能力

表单内按钮优先用 type="submit"/type="reset"，别全写 type="button" 再手动 submit

@#@#@#@#@#@#@#@#@#@2），必须加 aria-label="购物车"，否则屏幕阅读器读不出意图

不要给 <a></a> 加 role="button" —— 它会覆盖原生语义，导致跳转行为被屏蔽，且违反 ARIA 实践准则

嵌套或并列交互元素时的常见崩坏点

当一个区域既要跳转又要执行 JS 行为（比如点击整行跳转，但行内有个删除图标），不能靠包裹或事件冒泡硬凑，必须拆解语义。

Wechat HTML Publisher

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

下载

• 错误结构：<div onclick="goToDetail(id)"> <span>标题</span><button onclick="deleteItem(id)">×</button> </div> → 删除按钮焦点被外层 div 抢走；点击 × 会先触发外层跳转
• 正确结构：用 <a></a> 包标题文字，<button></button> 单独放删除操作，两者平级；外层用 <article></article> 或 <li> 容纳，不绑定交互
• 若真需整行响应（如移动端），用 <a></a> 全宽包裹，删除按钮用 aria-hidden="true" + tabindex="-1" 移出焦点流，再靠 JS 绑定图标点击事件 —— 但前提是删除操作有独立可发现入口（如长按菜单）

最易被忽略的是：可访问性失效往往不在单个标签，而在父子关系与事件委托的耦合。一旦出现“点了没反应”“按空格没触发”“屏幕阅读器读错类型”，先查标签语义是否匹配行为，再查是否意外覆盖了原生交互链路。

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