链接用于跳转，按钮用于执行操作
掌握这一条规则，几乎可以解决所有情况
链接用于跳转，按钮用于执行操作 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Accessibility Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。
一条规则
这里有一条几乎可以解决所有情况的规则：链接会带您前往某处，而按钮会在当前页面执行某项操作。🧭
什么是链接
链接用于导航。点击链接会改变页面或 URL，例如跳转到另一篇文章或新的章节。
<a href="/pricing">See pricing</a>什么是按钮
按钮会在当前位置执行操作：它可以提交表单、打开菜单，或切换设置，而不会离开当前页面。
<button type="button">Add to cart</button>为什么这很重要
屏幕阅读器会大声宣布控件的角色。用户听到的是链接或按钮，因此使用正确的元素，用户在操作前就能形成正确预期。
不同按键，不同作用
这不只是外观问题。按下空格键或 Enter 键会触发按钮，而链接只能通过 Enter 键激活。按键行为取决于元素角色。
快速测试
请问自己一个问题：这个控件会改变我所在的位置，还是会改变屏幕上的内容？导航意味着使用链接；执行操作意味着使用按钮。
在新标签页中打开
如果某个控件适合在新标签页中打开或添加书签，那么它执行的是导航，因此应使用带有 href 的真实链接。
外观不等于角色
样式不会改变含义。按钮可以看起来像链接，链接也可以看起来像按钮，但元素本身决定了角色。
常见错误
人们常常使用带样式的 div 或 span，再为其添加点击处理程序。它看起来没问题，却没有角色，也不支持键盘操作。
<div class="btn" onclick="save()">Save</div>提交表单
要发送表单，请使用 type 为 submit 的按钮。这是一个操作，而不是导航，所以在这里使用链接是不正确的。
<button type="submit">Sign up</button>前往其他页面
要将用户带到您的联系页面，请使用链接。这完全属于导航，使用按钮会误导所有用户。
<a href="/contact">Contact us</a>快速检查
您添加了一个无需离开页面即可打开菜单的控件。哪个元素最合适？
回顾
链接用于前往某处，按钮用于执行操作。让元素匹配使用意图，您就能获得正确的角色、正确的按键行为，以及满意的用户。🎉
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 30
- 课程
- 120
常见问题解答
「链接用于跳转，按钮用于执行操作」课时是免费的吗？
是的 — 「链接用于跳转，按钮用于执行操作」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Accessibility Academy 课程的其余内容，请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。
「链接用于跳转，按钮用于执行操作」这节课中我会学到什么？
掌握这一条规则，几乎可以解决所有情况 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Web Accessibility Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「链接用于跳转，按钮用于执行操作」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Web Accessibility Academy 课中编写并运行代码吗？
能。每节 Web Accessibility Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 链接用于跳转，按钮用于执行操作
- 脱离上下文也有意义的链接文本
- 明确说明用途的按钮
- 没有 href 的锚点反模式