HTML5 中 <nav> 的语义使用与搜索表单元素

Posted 2023-02-24

【中文标题】HTML5 中 <nav> 的语义使用与搜索表单元素

【英文标题】：Semantic use of <nav> in HTML5 with search form element

【发布时间】：2012-03-22 18:13:37

【问题描述】：

W3C 对<nav> 标签的定义似乎有点模糊：

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

并非页面上的所有链接组都需要位于导航元素中——该元素主要用于由主要导航块组成的部分。特别是，页脚通常有一个指向站点各个页面的链接的简短列表，例如服务条款、主页和版权页面。对于这种情况，仅页脚元素就足够了；虽然在这种情况下可以使用 nav 元素，但通常没有必要。

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

根据对其定义的非常严格的解释以及我通过验证所遇到的情况，似乎<nav> 应该只包含列表元素。但是，搜索不应该被视为一系列页面中的一种导航形式吗？

虽然我知道它的主要用途是用于用户代理，但如果前者仅用作后者的容器，那么在 <ul> 标记之前有一个 <nav> 似乎仍然是多余的。如果<nav> 可以包含与导航相关的其他元素，而不限于链接列表，那将更有意义。

例如：

<nav role="navigation">
  <form action="http://google.com/search" method="get">
    <fieldset role="search">
       <input type="hidden" name="q" value="site:mysite.com" />
       <input class="search" type="text" name="q" results="0" placeholder="Search"/>
    </fieldset>
  </form>

  <ul class="top-navigation">
     <li><a href="/">Home</a></li>
     <li><a href="/about.html">About Me</a></li>
     <li><a href="/archive.html">Archives</a></li>
  </ul>
</nav>

除了验证之外，这不是可以接受的<nav> 用法吗？对于不太关心验证，而不是确保屏幕阅读器和其他可访问性工具能够正确呈现页面的人来说，会有什么影响？

【参考方案1】：

nav 元素应该用于网站的主要导航项，而不仅仅是所有导航项。它也不必包含ul，但由于大多数情况下它确实包含一个列表，它通常是有意义的，但不是必需的。

如果您的搜索是您网站的主要导航方法，那么请务必将其放在 nav 中，尽管从您上面给出的示例来看，该列表似乎是主要导航而不是您的搜索。

我写了一些关于在to nav or not to nav? 上使用nav 标签的文章，尽管它没有提到搜索，这是一个有趣的观察。

【讨论】：

我更喜欢你对我阅读 w3c 规范的解释。虽然搜索不是我网站的主要导航方法，但在我看来它仍然是一个“主要导航块”。有了草稿形式的 HTML5，我想我更关心各种用户代理将如何解释该代码块以及如何针对此目的对其进行优化。这就是我也加入了一些 ARIA 角色的原因。希望对该主题有更多了解的人能够加入。不过，感谢您的反馈，看到我不是唯一关心这个元素的人，这让我很欣慰。

如果是主要的导航块，则将其放在导航中。目前没有一个用户代理对它做任何事情。关于可访问性工具，我认为最好将搜索标记为搜索（使用“搜索”地标角色）。另外，您应该只在页面上使用“导航”地标角色标记一个元素，因此您应该将其附加到您的列表中并将“搜索”到搜索中。您可以阅读更多关于这些角色和一些相应的 HTML5 元素（向下滚动）的信息：paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles

谢谢伊恩。我查看了 paciellogroup 页面，[<nav>] 上的部分将我重定向到Bruce Lawson's site。查看源代码，他使用 [<nav>] 类似于我所做的。使用 role=navigation 定义 [<nav>]，在他的例子中使用 role=search 定义表单元素（相对于 fieldset 元素）。虽然我认为这些网站中的任何一个都不是该主题的足够权威，但在我有机会在几个可访问性工具上测试我的代码并报告之前，我会顺从它们。

好的，所以我做了很多测试，我很高兴地报告说，W3C 在验证包含搜索表单输入和链接列表的导航元素时没有问题。此外，似乎只要我对导航元素使用角色=导航，并且角色=搜索表单元素而不是字段集验证器就很高兴。这似乎是两全其美。再次感谢伊恩。我可能会写一篇关于我所学知识的博文，并且很乐意链接到你的博客。