导航中的按钮而不是锚点？ [复制]答案

【问题标题】：Buttons in nav instead of anchor? [duplicate]导航中的按钮而不是锚点？ [复制]
【发布时间】：2019-08-05 20:34:33
【问题描述】：

我一直在阅读有关 Web 可访问性的内容，并阅读到只有当用户将被带到另一个没有 JavaScript 的 URL 时才应该使用锚标记。但是，只要发生其他一些行为，例如打开模式，就应该使用按钮。

所以我想知道导航中是否可以或预期同时具有按钮和锚点。像这样的：

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

假设在这种情况下，注册按钮会启动一个模式或执行一些不会将用户带到不同 URL 的其他行为。两者都在nav 中可以吗？我不关心样式，我会让这些看起来一致，但我想知道处理此类事情的最正确方法是什么？

【问题讨论】：

【解决方案1】：

从可访问性的角度来看，同时使用链接和按钮是语义上正确的方法。链接将您带到另一个页面（或当前页面上的其他位置）并且按钮执行操作。屏幕阅读器用户会明白，当他们在同一个

【讨论】：

【解决方案2】：

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

如果你真的愿意，你可以对所有元素使用<a>，但对于按钮，你可以包含role="button"属性，这在语义上等同于使用<button>。

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

【讨论】：

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

【解决方案3】：

是的，在导航栏中使用按钮、锚点或什至 div 都可以，但是您希望可以这样做。您只需要习惯使用您所说的 css 和样式即可。那么你应该没有问题。这能回答你的问题吗？

【讨论】：

【解决方案4】：

nav 标记中允许使用任何 flow content 元素，包括按钮。

【讨论】：