html - 在带有搜索表单元素的 HTML5 中语义使用 <nav>

标签 html accessibility semantics nav screen-readers

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

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip and/or provide on request.

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

虽然我知道它的主要用途是用于用户代理,但拥有一个 <nav> 似乎还是多余的在 <ul> 之前如果前者仅充当后者的容器,则标记。如果 <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> 用法吗? ?对于不太关心验证的人来说,除了确保屏幕阅读器和其他辅助工具能够正确呈现页面之外,会有什么影响?

最佳答案

nav 元素应用于站点的主要导航项,而不仅仅是所有导航项。它也不必包含 ul,但由于大多数时候它确实包含一个列表,所以它通常有意义,但不是必需的。

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

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

关于html - 在带有搜索表单元素的 HTML5 中语义使用 <nav>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9563845/

相关文章:

javascript - 如果我通过 JavaScript 在页面中添加内容,搜索引擎蜘蛛是否可以抓取它

semantics - 静态分析和语义分析有什么区别?

java - "call stack"和 "thread stack"之间的区别

html - 使用css选择器excel vba从网站抓取数据

javascript - 根据服务器的响应操作 DOM

html - 如何在 html 表格和 css 中解决这个奇怪的问题

java - TextView setContentDescription 不起作用

javascript - 在声明期间访问对象中的先前值

从 HTML 页面中提取内容(不包括导航)的 python 方法

c# - 自关闭 Html 通用控件?