Mehrere Header und ARIA-Rollen

Ich habe eine HTML-Struktur, die wirklich zwei Überschriften hat: Am oberen Rand der Seite befinden sich einige Navigationselemente und Schaltflächen, darunter ein weiterer Bereich, in dem das Logo und das, was ich als Hauptnavigation bezeichne, enthalten sind.

Beide sind aufgrund von CSS3-Verläufen mit voller Breite in Wrapper unterteilt, sodass meine Struktur ungefähr so aussieht:

<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>

Meine Frage ist:

In dieser Situation ist es akzeptabel, beide zusammenzufassennav Elemente in aheader Element, wickle ich nur meine Hauptnav und Logo in aheader Element, oder wickle ich beide in einem großenheader Element?

Wenn ich Aria benutze, sollte ich verwendenrole="main" auf meiner Hauptnavigation oder meiner Hauptnavigationheader Element?