我应该在导航标签中包含“菜单按钮”吗？答案

【问题标题】：Should I include the "menu button" inside the nav tags?我应该在导航标签中包含“菜单按钮”吗？
【发布时间】：2018-02-09 13:51:56
【问题描述】：

我有一个简单的问题。我用来打开/关闭导航菜单的按钮是否应该包含在导航标签中？

按钮本身无助于导航，但没有他，就无法访问导航。

<nav>
  <ul class="nav">
    <li class="nav__el nav__el-active">Home</li>
    <li class="nav__el">Generic</li>
    <li class="nav__el">Services</li>
    <li class="nav__el">Blog</li>
    <li class="nav__el">Contact</li>
  </ul>
  <i class="fas fa-bars"></i> //menu btn
</nav>

这就是例子。现在 btn 在导航中，但也可以是这样的：

  <div class="topbar">
    <nav>
      <ul class="nav">
        <li class="nav__el nav__el-active">Home</li>
        <li class="nav__el">Generic</li>
        <li class="nav__el">Services</li>
        <li class="nav__el">Blog</li>
        <li class="nav__el">Contact</li>
      </ul>
    </nav>
    <i class="fas fa-bars"></i> //menu btn
  </div>

【问题讨论】：

标签： html navigation standards

【解决方案1】：

乍一看，在阅读this at WHATWG时：

nav 元素代表页面的一部分，该部分链接到其他页面或页面内的部分：带有导航链接的部分。

在我看来，按钮不应该包含在内，因为这显然不是一个导航链接。

无论如何，如果您继续阅读：

用户代理（例如屏幕阅读器）针对的用户可以从初始呈现中省略的导航信息中受益，或者可以从立即可用的导航信息中受益，可以使用此元素来确定哪些内容页面上的内容最初跳过或根据要求提供（或两者）。

考虑到这一点，包含该按钮和您可能拥有的任何其他非链接控件（通常在标题区域中）是有意义的，因为如果屏幕阅读器用户想要...：

...跳过整个导航，他们也想跳过其他不是链接的控件。
...直接跳转到导航，他们可能还想使用一些不是链接的导航元素。

如果您查看 WHATWG 上的一些示例，您会发现他们正在应用这些标准。第一个例子是：

<body>
    <h1>The Wiki Center Of Exampland</h1>

    <nav>...</nav>

    <article>...</article>

    ...

</body>

在这里，不要跳过页面上的标题（以了解您的位置）而是跳过所有导航元素并直接跳转到内容是有意义的。

但是，在最后一个：

<nav>
    <h1>Folders</h1>

    <ul>
        <li><a ...>... </a></li>

        ...
    </ul>
</nav>

如果您对导航不感兴趣，跳过 Folders 标题元素会很有意义，因为它实际上是导航的一部分，the same way you put the heading of a section inside a section and not before it。这同样适用于您的菜单按钮。

可能是网站主导航的一部分并因此进入<nav> 的其他一些元素示例是链接到网站根目录或搜索表单的徽标。

例如，LinkedIn 正在这样做：

另外，作为无障碍工作组成员的Bruce Lawson 在his personal website 的<nav> 元素内进行了搜索：

但是，您也可以找到相反的例子。例如，Airbnb 只在<nav> 元素中包含一些链接：

虽然在这种情况下，我也会包括搜索，这对我来说清楚地代表了在他们的网站上导航的主要方式。

无论如何，您可以也应该使用ARIA 来获得可访问性，使用structured data / Schema.org markup 来获得搜索引擎支持。

【讨论】：