Несколько заголовков и роли ARIA

Question

У меня есть структура HTML, которая на самом деле имеет 2 заголовка: в верхней части страницы есть несколько элементов и кнопок навигации, ниже - еще один раздел, в котором содержится логотип и то, что я бы назвал основной навигацией.

Оба разделены в обертках из-за 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>

Мой вопрос:

1. В этой ситуации допустимо обернуть оба эти nav элементы в header элемент, я просто обернуть мой главный nav и логотип в header элемент, или я обернуть оба в один большой header элемент?

2. Когда я использую Aria, я должен использовать role="main" на моей главной навигации или моей главной header элемент?

Answer 1

Да, имеет смысл использовать header для обоих из них.

Как header не влияет на структуру документа, вы можете использовать один или несколько header элементы; это не влияет на значение. Если нет причин не использовать один элемент (т. Е. Между ними нет содержимого, которое не должно быть частью header), идти с одним элементом.

Роль ARIAmain для основного содержимого страницы. Навигация обычно не является основным контентом, если только это не единственное содержание и назначение страницы. Тем не менее, в этом случае вы не будете использовать header элемент, так как его работа заключается в том, чтобы "исключить" контент, который не считается частью основного контента.

Answer 2

Если они используют 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, который должен использоваться только один раз на странице, чтобы обозначить мебель сайта в верхней части страницы. (При использовании из тела заголовок применяется к, см. Последний пример в спецификации HTML5.)
• Маркировка каждого nav со скрытым подзаголовком (используйте.at, чтобы переместить его за экран), с aria-describedby,

Main должен обернуть основное содержимое страницы (уникальное для страницы), как правило, начиная чуть выше H1. Там должен быть только один.