У меня есть структура 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>

Мой вопрос:

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

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