Vários cabeçalhos e funções ARIA
Eu tenho uma estrutura HTML que realmente tem dois cabeçalhos: no topo da página, alguns itens e botões de navegação; abaixo, há outra seção que contém o logotipo e o que eu chamaria de navegação principal.
Ambos são seccionados em invólucros por causa dos gradientes CSS3 de largura total; portanto, minha estrutura se parece com isso:
<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>
Minha pergunta é:
Nesta situação, é aceitável agrupar esses doisnav
elementos em umheader
elemento, apenas envolvo meu principalnav
e logotipo em umheader
elemento, ou envolvo ambos em um grandeheader
elemento?
Ao usar o Aria, devo usarrole="main"
na minha navegação principal ou no meu principalheader
elemento?