多个头和ARIA角色

我有一个HTML结构，它确实有2个标题：在页面的tippity顶部它有一些导航项目和按钮，下面是另一个部分，它包含徽标和我称之为主导航。多个头和ARIA角色

无论是在因为全宽CSS3渐变的包装被切开过，所以我的结构看起来是这样的：

<div id="topWrap"> 
    <div id="topNavWrap"> 
     <nav id="utilityLinks"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Page</a></li> 
       <li><a href="#">Page</a></li> 
       <li><a href="#">Page</a></li> 
       <li><a href="#">Page</a></li> 
      </ul> 
     </nav> 
     <div id="quickLinks"> 
      <ul> 
       <li><a href="#">Login</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

<div id="headerWrap"> 
    <div id="header"> 
     <div id="logo"><a href="#"><img src="logo.png" /></a></div> 
     <nav id="mainNav"> 
      <ul> 
       <li><a href="#">Main Service Page</a></li> 
       <li><a href="#">Main Service Page</a></li> 
       <li><a href="#">Main Service Page</a></li> 
       <li><a href="#">Main Service Page</a></li> 
       <li><a href="#">Main Service Page</a></li> 
      </ul> 
     </nav> 
    </div> 
</div>

我的问题是：

在这种情况下是可以接受包裹这两个nav元素在一个header元素中，我只是将我的主nav和徽标包装在一个header元素中，还是包装在一个大的header元素中？
使用咏叹调时，我应该在我的主导航上使用role="main"还是我的主要header元素？

来源

2014-08-27 Howdy_McGee

2）当然，你也不应该在你的文档的主要内容部分上使用'role =“main”'。在导航上使用它没有任何意义。 – CBroe 2014-08-27 14:42:35

是的，在这两种情况下使用header是有意义的。

由于header对文档大纲没有影响，因此您可以使用一个或多个header元素;它不影响意义。如果没有理由不使用一个元素（即，中间没有不应该是header的一部分的内容），请使用一个元素。

ARIA role main用于页面的主要内容。导航通常不是主要内容，除非它是页面的唯一内容和目的。但是，在这种情况下，您不会使用header元素，因为它的作用是"exclude" content that is not considered to be part of the main content。

来源

2014-08-28 06:14:05 unor

如果他们使用nav元素，则不应简单地将它们包装在标题中。尽管您可以在页面中使用多个标题元素，但它们应该代表“部分”（即内容区域）的顶部。

更合适的HTML设置为：

<header id="topWrap" role="banner"> 
    <div id="topNavWrap"> 
     <nav id="utilityLinks" role="navigation" aria-describedby="utilityLinksH2"> 
      <h2 class="at" id="utilityLinksH2">Site menu</h2> 
      <ul> 
       <li><a href="#">Home</a></li> 
       ... 
      </ul> 
     </nav> 
     <div id="quickLinks"> 
      <ul> 
       <li><a href="#">Login</a></li> 
       ... 
      </ul> 
     </div> 
    </div> 

    <div id="headerWrap"> 
    <div id="header"> 
     <div id="logo"><a href="#"><img src="logo.png" /></a></div> 
     <nav id="mainNav" aria-describedby="mainNavH2"> 
     <h2 class="at" id="mainNavH2">Service menu</h2> 
     <ul> 
       <li><a href="#">Main Service Page</a></li> 
       ... 
     </ul> 
     </nav> 
    </div> 
    </div> 
</header>

值得注意的要点是：

包裹一大堆的header，与banner的作用。应该只在页面上使用一次，以表示网页顶部的网站家具。（当从头部使用时，标头适用于，see the last example in the HTML5 spec。）
为每个nav标记一个隐藏的子标题（使用.at将其移出屏幕），其中aria-describedby。

主要应该包装页面的主要内容（该页面是唯一的），通常从H1开始。应该只有一个。

来源

2014-08-28 14:04:44 AlastairC

多个头和ARIA角色

回答

相关问题