Question

我有一个HTML结构，它实际上有两个标题：在页面顶部的tippity它有一些导航项和按钮，下面是另一个包含徽标的部分以及我称之为主导航的部分。

由于全宽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和徽标包装在{{1}中元素，或者我将两者都包装在一个大的header元素中？
使用Aria时，我应该在主导航或主header元素上使用role="main"吗？

Answer 1

是的，将header用于这两者是有意义的。

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

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

Answer 2

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

更合适的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。

Main应该包装页面的主要内容（对于页面来说是唯一的），通常从H1上方开始。应该只有一个。

多个标题和ARIA角色

2 个答案: