使用搜索表单元素</nav>在HTML5中对<nav>进行语义使用

时间:2012-03-05 08:50:28

标签: html5 accessibility semantics nav screen-readers

对于<nav>标记,W3C定义似乎有点模糊:

  

nav元素表示页面的一部分,该页面链接到其他页面或页面中的部分:带有导航链接的部分。

     

并非页面上的所有链接组都必须位于nav元素中 - 该元素主要用于由主要导航块组成的部分。特别是,页脚通常具有指向站点的各个页面的短链接列表,例如服务条款,主页和版权页面。单独的页脚元素足以满足这种情况;虽然在这种情况下可以使用nav元素,但通常是不必要的。

     

针对可以从初始渲染中省略的导航信息中受益的用户的用户代理(例如屏幕阅读器),或者可以立即获得导航信息的用户,可以使用此元素作为确定内容的方式页面上最初跳过和/或提供请求的内容。

基于对其定义的非常严格的解释以及我通过验证遇到的内容,似乎<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>的可接受用途吗?对于较少关注验证而不是确保屏幕阅读器和其他辅助工具可以正确呈现页面的影响会是什么?

1 个答案:

答案 0 :(得分:7)

nav元素应该用于网站的主要导航项目,而不仅仅是所有导航项目。它也不必包含ul,但由于大部分时间它都包含一个列表,因此它通常是有意义的,但不是必需的。

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

我已经写了一些关于在to nav or not to nav?使用nav标记的文章,虽然它没有提到搜索,这是一个有趣的观察。