我应该使用锚点还是按钮元素进行选项卡式导航吗？

Question

我正在构建一个网站，并且之前已经使用按钮和锚点构建了导航。我很困惑该使用哪一个进行选项卡式导航。

我看过this问题/答案，基本上可以归结为：

重定向到另一个页面时使用

<a>

，因为这是超链接的预期用途。

使用

<button>

执行表单提交等操作，或执行函数。

这对我来说很有意义，但我的特定网站是一个带有选项卡式导航的应用程序。我有几个页面是通过操作 DOM 构建的，但站点链接保持不变，导航实际上只是用新的 dom 元素替换现有的 dom 元素。

在这种情况下，使用按钮进行导航是否更好，或者我应该始终坚持使用锚点，即使它们没有以传统方式“重定向”页面？我知道有些差异只是主观的，例如开箱即用的样式差异，但是在选项卡式导航中使用其中一种差异是否存在相当大的缺点？

Answer 1

从语义上讲，这对我来说听起来像是同一页面导航。根据标准，为此目的使用

<a>

元素。然后为任何 JavaScript 副作用添加事件侦听器。

• 在此处阅读 元素的标准 - 在 Whatwg.org 上。
• 在 MDN 文档上阅读有关 元素的信息 - 此处。

希望这有帮助。

Answer 2

注： 当我问谷歌：“选项卡按钮与锚点”时，该网站会被否决回复的文本引用。也许需要做一些 StackOverflow SEO 任务。

W3C 使用按钮:

我也是 MDN 的忠实粉丝，但是，

<button>

用于 如何创建选项卡 示例。

我个人的理解

感觉好像有一些合法的选择来实现它，我个人查看选项卡并看到

<nav>

和

<section>

元素已组装。由于我的 UI 框架具有我正在使用的两种成分，因此导航内部有一个

<a>

（因为不是多级的，所以内部不需要

<ul><li>

...

给选项卡创建者的其他建议

但是，不要忘记添加

role

和

aria-*

标签，这样至少可以清楚所选元素的预期功能是什么，包括辅助功能支持（例如屏幕阅读器）：

..这次我们使用 MDN 参考（但这里的代码已调整为不过度使用“div”，我喜欢语义：

<section>
   <nav role="tablist">
      <a
         href='#'
         role="tab"
         aria-controls="panel-1"
         aria-selected="true"
         tabindex="0"
         aria-label="Tab 1"
         aria-controls="panel-1"
     >Tab 2</a>
      <a
         href='#'
         role="tab"
         aria-controls="panel-2"
         aria-selected="true"
         tabindex="1"
         aria-label="Tab 2"
     >Tab 1</a>
   </nav>
   <section
      id="panel-1"
      role="tabpanel"
      aria-labelledby="tab-1"
      tabindex="0">Panel 1</section>
   <section
      id="panel-2"
      role="tabpanel"
      aria-labelledby="tab-2"
      tabindex="0">Panel 2</section>
</section>

值得一提的是：

• display: none

  避免加载非活动内容（React.js）

• tabindex

  允许使用键盘控制选项卡

• href

  可用于通过直接链接到选项卡来保持状态，但需要带有

  e.preventDefault()

  的 onClick 事件处理程序以避免页面重新加载。

• <section>

  只能被视为整体，而不是内容部分，可能取决于您在面板内显示的内容。

ATM 我会坚持我的方式，但到时候我会对此做更多调查，因为 W3C 似乎更喜欢

<button>

。

问自己：

• 大家都能按预期使用吗？
• 您是否为精神/身体障碍者提供无障碍支持？