Несколько заголовков и ролей 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), перейдите к одному элементу.

ARIA role main предназначенный для получения детальной информации. Навигация обычно не является основным контентом, если только он не является единственным контентом и целью страницы. Однако в этом случае вы не будете использовать элемент header, так как его задача - "exclude" content that is not considered to be part of the main content.

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

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