导航中使用按钮而不是锚点？

Question

我一直在学习网页无障碍技术，了解到应当只有在用户没有使用JavaScript时需要跳转到另一个URL时才应使用锚点标签(a标签)。而在其他情况下应该使用按钮(button标签)，如打开模态框。

所以我想知道，在导航栏中同时使用按钮和锚点是否正确或可行。像这样：

<nav>
  <a href="/">Home Page</a>
  <a href="/about">About Page</a>
  <button>Sign Up</button>
</nav>

在这种情况下，如果注册按钮启动模态框或执行其他不会将用户带到不同URL的行为，那么将两者都放在nav中是否可以？我不关心样式，我会让它们看起来一致，但我想知道处理这种情况的最正确的方式是什么？

- ceckenrode

---

你也应该研究一下 aria-role，它可以为辅助技术提供提示。 - Stephen P

Answer 1

从无障碍的角度来看，同时使用链接和按钮是语义上正确的方式。链接可以带您到另一个页面（或当前页面的其他地方），而按钮执行某个操作。屏幕阅读器用户将在同一个<nav>中听到“链接”或“按钮”时理解不同的操作将发生。

- slugolicious

Answer 2

如前面的评论所提到的，是完全可以在导航中同时使用两者的。

如果你真的想这样做，你可以对所有内容使用<a>元素，但对于按钮，你需要包含role="button"属性，这与使用<button>具有语义等效性。

最初的回答：

可以在导航中同时使用<a>和<button>。如果要使用<a>作为按钮，请添加role="button"属性。

<nav>
  <a href="/">Home Page</a>
  <a href="/about">About Page</a>
  <a role="button">Sign Up</a>
</nav>

- Canica

---

它在语义上是等价的，但它的行为不同。当按钮被聚焦时，使用回车或空格键来激活；然而，聚焦的链接只能使用回车键激活。具有按钮角色的链接还需要额外的按键监听器，在用户按下空格键时触发点击事件。最简单的方法就是使用真正的按钮。 - andrewmacpherson

Answer 3

完全可以在导航栏中使用按钮、锚点甚至div，你可以随意使用。只需熟悉css和样式设置，你应该就没有问题了。这回答了你的问题吗？

- Evik Ghazarian

Answer 4

在导航标签中允许使用任何流程内容元素，包括按钮。

- Matthew Rapati