Question

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

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

<div class="row">
                            <div class="col text-r">
                                <p><strong>@lang('static.lasttime')</strong></p>
                            </div>
                            <div class="col">
                                <p>{!! $task->getTaskFinalDate('d.m.y  <span class="cl_gray">H:i</span>') !!}</p>
                            </div>
                        </div>

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

<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>

Answer 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>

如果你对导航不感兴趣，跳过文件夹标题元素是有意义的，因为它实际上是它的一部分，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获取搜索引擎支持。

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

1 个答案: